A detailed introduction to Yahoo's military regulations-HTML Tutorial-php.cn

yahooThe military regulations are divided into a total of 7categoriesa total of 35articles:

1. Try to reduce the number of HTTP requests

##Category: Content

80%

of end user response time is spent on the front end, of which Most of the time is spent downloading various components on the page: images, style sheets, scripts, Flash, etc. Reducing the number of components will inevitably reduce the number of HTTP requests submitted by the page. This is the key to making your page faster.

One way to reduce the number of page components is to simplify the page design. But is there a way to build complex pages while speeding up response times? Well, there is indeed a way to have your cake and eat it too.

Merging files reduces the number of requests by putting all scripts in one file. Of course, you can also merge all CSS. Merging files can be a cumbersome task if the scripts and styles of each page are different, but doing this as part of the site publishing process can indeed improve response times.

CSS Sprites

are the preferred way to reduce the number of image requests. Integrate all the background images into one image, and then use background-image and background of CSS -position attribute to position the part to be displayed.

Image mapping Can merge multiple pictures into a single picture. The total size is the same, but the number of requests is reduced and accelerated. The page loads. Image maps are only useful if the image is continuous on the page, such as a navigation bar. The process of setting coordinates for image map is boring and error-prone, and it is not easy to use image map for navigation, so this method is not recommended.

Inline images (Base64 encoding) use data: URL mode to convert images Embed page. This will increase the size of the HTML file. Putting inline images in the (cached) style sheet is a good idea and successfully avoids the page becoming "heavy". However, current mainstream browsers do not support inline images well.

Reducing the number of HTTP requests for a page is a starting point. This is an important guiding principle to improve the first visit speed of the site. As written in Tenni Theurer’s blogBrowser Cache Usage – Exposed! From , 40% to 60%, the cache is empty when visitors visit your site. Therefore, speeding up the first visit of the page is extremely important to improve the user experience.

2.UseCDN（Content Delivery Network )

Category: Server

User Physical distance from the server also has an impact on response times. Deploying content on multiple geographically dispersed servers allows users to load pages faster. But how to do it?

###

The first step in achieving geographically distributed content is: Don't try to redesign your web application to accommodate a distributed structure. Depending on the application, changing the structure may include daunting tasks such as synchronizing session state and replicating database transactions across servers (translations may not be accurate). Proposals to shorten the distance between users and content may be delayed or simply impossible to pass because of this difficulty.

Remember the end user response time from 80% to 90% On the download page components: pictures, styles, scripts, Flash, etc. This is the golden rule of performance. It's better to decentralize static content first rather than redesign the application structure from the beginning. This can not only greatly reduce response time, but also make it easier to show CDN's credit.

Content delivery network (CDN) is a group of web# scattered in different geographical locations ##Server is used to send content to users more efficiently. Typically, the server chosen to deliver content is based on a measure of network distance. For example: choose the server with the smallest number of hops (hop) or the fastest response time.

Some Internet company giants have their own CDN, but use a CDN Service providers are more cost-effective, such as Akamai Technologies , EdgeCast , or level3 . For companies and personal websites that are just starting out, the cost of CDN services is very high, but if your user base becomes larger and larger, becoming more and more global, Then it is still necessary to use CDN in exchange for faster response time. In Yahoo!, move static content from the application's web server to CDN( Including the 3rd party mentioned above and Yahoo’s own CDN )Can improve the response time of end users by 20% or even more. Switching to CDN is a fairly simple code change, but it will drastically improve the responsiveness of your site.

3.Add Expires or Cache-Control HTTP头

Category: Server

This rule has two aspects:

For static components: never expire by setting a time in the distant future as Expires

Redundant dynamic components: Use the appropriate Cache-Control HTTP header to let the browser make conditional requests

Web design is getting richer, which means there are more scripts, pictures and Flash on the page. New visitors to the site may still have to submit a few HTTP requests, but by using expiration the component becomes cacheable, which avoids unnecessary requests during subsequent browsing sessions. The HTTP request. ValidityHTTP headers are typically used on images, but they should be used on all components, including scripts, styles, and Flash components .

Browsers (and proxies) use caching to reduce the number and size of HTTP requests so that pages can load faster. webThe server uses the validity periodHTTP response header to tell the client how long each component of the page should be cached. Use a time in the distant future as the validity period, telling the browser that this response will be in 2010year4month15 Will not change today.

Expires: Thu, 15 Apr 2010 20:00:00 GMT

If you are using the Apache server , use the ExpiresDefault directive to set the validity period relative to the current date. The following example sets an expiration date of 10 years from the request time:

ExpiresDefault "access plus 10 years"

Remember, if you use a time in the distant future as the validity period, you will have to modify the component's file name in time after the component changes. At Yahoo!, we often do this as part of the build process: embed the version number in the component's filename, for example: yahoo_2.0.6.js

Use a time in the distant future for the validity period HTTP header, which will only affect the page view after the user has visited the site. If it is a new visitor or the browser's cache is cleared, it will not affect the number of HTTP requests. This performance improvement therefore depends on how often users who have cached individual components visit the site. We measured this data at Yahoo! and found that page views (PV) of cached components accounted for 75% to 85%. By using a time in the distant future as the expiration HTTP header, the number of components cached by the browser is increased and does not require Internet on subsequent page views The connection sends even one more byte.

4.GzipComponent

Category : Server

Front-end engineers can find ways to significantly shorten the time it takes to transmit HTTP requests and responses over the network. There is no doubt that the end user's bandwidth speed, network service provider, distance of peer exchange points, etc. are all beyond the control of the development team. But there are other factors that can affect response times. Compression can improve response times by reducing the size of HTTP responses.

Starting from HTTP/1.1, the web client has support for compression The Accept-Encoding HTTP request header.

Accept-Encoding: gzip, deflate

If the web server sees this request header, it will compress the response using one of the methods listed by the client. webThe server notifies the client through the Content-Encoding corresponding header.

Content-Encoding: gzip

Gzip is currently the most common efficient compression method, developed by GNU Project developed and RFC 1952 standardized. The only other compression format you might see is deflate, but it's not very efficient and uncommon.

Gzipping Generally the response can be compressed to around 70%, currently about 90 %'s network transmission through the browser supports gzip. If it is an Apache server, the module to configure gzip depends on the version: Apache 1.3Use mod_gzip while Apache 2.x is the mod_deflate module.

Certain factors in browsers and proxies may cause a mismatch between what the browser expects and the compressed content it receives. Fortunately, these rare encounters are gradually decreasing as older browsers are retired, and the Apache module can automatically add the appropriate VaryResponse header to help you get it done.

The server will decide whether to use gzip compression based on the file type, but this is very limited. Most websites use gzip to compress HTML files. In fact, compressing scripts and style sheets is also a good choice, but many websites miss it. Got this opportunity. In fact, any text content can be compressed, including XML and JSON, while images and PDF No need to compress, because they have already been compressed. Using gzip to compress will not only waste CPU, but may also increase the pressure. The bigger.

Using gzip to compress as much as possible can make the page lose weight. This is also the easiest way to improve the user experience.

5.Put the style sheet at the top

Category: css

When Yahoo! was studying performance, we found that putting the style sheet in the document The HEAD section makes the page appear to load faster. This is because placing the style sheet in head allows the page to render gradually.

Front-end engineers who are concerned about performance want the page to render gradually. In other words, we want the browser to display existing content as quickly as possible, which is particularly important when there is a lot of content on the page or when the user's Internet connection is very slow. The importance of displaying feedback to users (such as progress indicators) has been extensively researched and documented down. In our example, the HTML page is the progress indicator! When the browser gradually loads the page header, navigation bar, top logo, etc., these are treated as feedback by users who are waiting for the page to load, which can improve the overall user experience. .

In many browsers (including IE), put the style sheet in HTMLThe bottom of the document will prevent the page from rendering gradually. These browsers block the rendering process to avoid redrawing page elements due to style changes, leaving the user staring at a blank page.

HTMLThe official document clearly describes that the style sheet should be placed inside the HEAD:"Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." (Unlike a# The ## tag, link tag may only appear in the HEAD section, although it can appear any number of times). Blank screens or unstyled falsh content are not acceptable. The ideal solution is to follow the HTML official documentation and place the style sheet in the HEAD of the HTML document part.

6.Put the script at the bottom

Category : javascript

The script will block parallel downloads, HTTP/1.1The official document recommends the number of components to be downloaded in parallel under each host name of the browser No more than two, if the image comes from multiple hostnames, the number of parallel downloads can be more than two. If the script is downloading, the browser will not start any other download tasks, even under a different hostname.

Sometimes, it’s not easy to move the script to the bottom. For example, if the script is inserted into the page content using document.write , there is no way to move it further down. There may also be scoping issues, which in most cases can be resolved.

A common suggestion is to use a deferred (deferred) script, there is DEFER The script attribute means that it cannot contain document.write, and prompts the browser to tell them they can continue rendering. Unfortunately, Firefox does not support the DEFER attribute. In IE, the script may be deferred, but not as expected. If the script can be deferred, we can move it to the bottom of the page and the page will load faster.

7.Avoid using CSSExpressions

Category: css

Using CSS expressions to dynamically set CSS properties is a powerful and dangerous way. Supported from IE5, but deprecated from IE8. For example, you can use the CSS expression to set the background color to alternate by hour:

In the above code, the expression method can accept a JavaScript expression. CSSThe property will be set to the result of the expression. The expression method will be ignored by other browsers, so it is only useful to find ways to achieve a cross-browser user experience consistent with IE .

The biggest problem with expressions is that they are often re-evaluated, more times than we think. Expressions are re-evaluated not just when the page is rendered and resized, but when the page is scrolled and even when the user moves the mouse around the page. Adding a counter to a CSS expression can track when and how often it is recalculated, and moving the mouse on the page can trigger 10000 multiple recalculations. calculate.

One way to reduce CSS expression re-evaluation is to use a one-time expression, that is, after the expression is evaluated for the first time Just set the style attribute to an explicit value and replace the expression. If you must dynamically set style properties throughout the page's life cycle, you can use event handlers instead of CSS expressions. If you must use CSS expressions, remember that they may be re-evaluated thousands of times, affecting the performance of the entire page.

8. Put JavaScript and CSSPut it outside

Category: javascript, css

A lot of performance The principles are all about how to manage external components, however, before these concerns arise you should ask a more basic question: where should JavaScript and CSS To an external file or directly to the page?

Actually, using external files can make the page faster because JavaScript and CSSThe file will be cached in the browser. HTMLInline JavaScript and CSS are executed on each request to the HTML document will be re-downloaded. Doing so reduces the number of HTTP requests required, but increases the size of the HTML document. On the other hand, if JavaScript and CSS are in external files and have been cached by the browser, then we are successful The HTML document has been greatly reduced, and the number of HTTP requests has not been increased.

The key factor is the relationship between the frequency of external files being cached and the number of page requests. Although this factor is difficult to quantify, it can be measured using a variety of metrics. Caching external files can be a huge benefit if the user has multiple page visits per session, so the same scripts and stylesheets can be reused across multiple pages.

Many sites fall in the middle of the pack in metrics, and for these sites, the best solution is generally to combine JavaScript and CSSDeployed as external file. The only exception is inline mode priority on homepages, such as the homepage of Yahoo! and My Yahoo! . Home pages with fewer visits per session will find that inline JavaScript and CSS result in faster response times for end users. .

For a typical site, the homepage is the beginning of many visits. There are many techniques that can leverage the reduction of HTTP requests. The effect is just like the benefits of using external file caching. One such technique is to use inline JavaScript and CSS on the homepage, but dynamically load external files after the page is loaded. In this way, the external files required for subsequent pages have been placed in the browser's cache.

9.ReduceDNSFind

##Category: Content

The domain name system establishes the host name and IP address The mapping between names is like the mapping between names and numbers in the phone book. When you enter www.yahoo.com in the browser, the browser will contact the DNS resolver to return the server's IPAddress. DNS has a cost, it takes 20 to 120 milliseconds to look it up The IP address given the hostname. The browser cannot download anything from the hostname until the DNS lookup is complete.

DNS

Lookups are cached more efficiently, by the user's ISP (Internet Service Provider) or local The network exists on a special caching server, but can also be cached on individual users' computers. DNSThe information is stored in the operating system’s DNS cache(MicrosoftWindows "DNSClient Service"). Most browsers have their own cache independent of the operating system. As long as the browser retains this record in its own cache, it will not query DNS from the operating system.

IEDefault CacheDNSLookup30 minutes, written in DnsCacheTimeout Registry settings. FirefoxCache1 minutes, which can be set using the network.dnsCacheExpiration configuration item. (Fasterfoxchanged the cache time to 1hoursP.S. FasterfoxYesFF A speed-up plug-in)

If the client’s DNS cache is empty (including browser and operating system), DNSThe number of lookups is equal to the number of different host names on the page, including the pageURL, pictures, script files, style sheets, Flash objects and other host names in components, reducing different host names can reduce DNS lookup.

Reducing the number of different host names also reduces the number of components that can be downloaded in parallel on the page, avoiding DNS lookups and reducing response time. Reducing the number of parallel downloads increases response time. My principle is to disperse the components under 2 to 4 host names, which reduces at the same time DNS A compromise between lookup and allowing high concurrent downloads.

10.CompressionJavaScript and CSS

Category: javascript, css

Compression specifically means removing unnecessary elements from the code characters to reduce size and thus load faster. Code minimization means removing all comments and unnecessary whitespace characters (spaces, newlines and tab). Doing this in JavaScript can improve responsiveness because the file to be downloaded becomes smaller. The two most commonly used JavaScript code compression tools are JSMin and YUI Compressor , YUI compressor can also compress CSS.

Obfuscation is an optional source code optimization measure, which is more complicated than compression, so the obfuscation process is also more likely to produce bug. In a survey of the top ten websites in the United States, compression reduced the size by 21%, while obfuscation reduced the size by 25%. Although obfuscation provides a higher degree of reduction, it is more risky than compression.

In addition to compressing external scripts and styles, inline <script> <span style="font-family: 宋体"> and </span><span style="font-family: Calibri"><style> </span><span style="font-family: 宋体"> blocks can also be compressed. Even if the </span><span style="font-family: Calibri">gzip</span><span style="font-family: 宋体"> module is enabled, compressing first can reduce the size by </span><span style="font-family: Calibri">5%</span><span style="font-family: 宋体"> or more. </span><span style="font-family: Calibri">JavaScript</span><span style="font-family: 宋体"> and </span><span style="font-family: Calibri">CSS</span><span style="font-family: 宋体"> are increasingly used, so compressing the code will have a good effect. </span></p> <p> </p> <p><strong>11.<span style="font-family: 宋体">Avoid redirection</span></strong></p> <p> </p> <p><span style="font-family: 宋体">Category</span>: <span style="font-family: 宋体">Content</span></p> <p> </p> <p><span style="font-family: 宋体">Redirect uses </span>301<span style="font-family: 宋体"> and </span><span style="font-family: Calibri">302</span><span style="font-family: 宋体"> status codes , the following is a </span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体"> header with a </span><span style="font-family: Calibri">301</span><span style="font-family: 宋体"> status code: </span></p> <p> </p> <p>HTTP/1.1 301 Moved Permanently</p> <p> Location:</p> <p> Content-Type: text/html</p> <p><span style="font-family: 宋体">The browser will automatically jump to </span> Location <span style="font-family: 宋体"></span><span style="font-family: Calibri">URL</span><span style="font-family: 宋体"> specified by the #domain. All the information needed for redirection is in the </span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体"> header, and the response body is usually empty. In fact, additional </span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体"> headers, such as </span><span style="font-family: Calibri">Expires </span><span style="font-family: 宋体"> and </span><span style="font-family: Calibri">Cache-Control </span><span style="font-family: 宋体"> also represent Redirect. There are other ways to redirect: </span><span style="font-family: Calibri">refresh</span><span style="font-family: 宋体">meta tag and </span><span style="font-family: Calibri">JavaScript</span><span style="font-family: 宋体">, but if you must do a redirect , it is best to use the standard </span><span style="font-family: Calibri">3xxHTTP</span><span style="font-family: 宋体"> status code, mainly so that the return button can be used normally. </span></p> <p> </p> <p><span style="font-family: 宋体">Keep in mind that redirects slow down the user experience, and inserting redirects between the user and the </span>HTML<span style="font-family: 宋体"> document delays everything on the page , the page cannot be rendered, and the component cannot start downloading until the </span><span style="font-family: Calibri">HTML</span><span style="font-family: 宋体"> document is served to the browser. </span></p> <p> </p> <p><span style="font-family: 宋体">There is a common redirection that is extremely wasteful of resources, and </span>web<span style="font-family: 宋体"> developers are generally not aware of this, that is</span><span style="font-family: Calibri">URL</span><span style="font-family: 宋体">When there is a trailing slash missing. For example, jumping to </span><span style="font-family: Calibri"> </span><span style="font-family: 宋体"> will return a </span><span style="font-family: Calibri">301</span><span style="font-family: 宋体"> response that redirects to </span><span style="font-family: Calibri"> </span><span style="font-family: 宋体"> (Note the slash at the end). In </span><span style="font-family: Calibri">Apache</span><span style="font-family: 宋体"> you can use </span><span style="font-family: Calibri">Alias </span><span style="font-family: 宋体">, </span><span style="font-family: Calibri">mod_rewrite </span><span style="font-family: 宋体"> or </span><span style="font-family: Calibri">DirectorySlash </span><span style="font-family: 宋体"> directive to cancel unnecessary redirects. </span></p> <p> </p> <p><span style="font-family: 宋体">The most common use of redirection is to connect the old site to the new site. It can also connect different parts of the same site and do some processing according to the different situations of the user (browser type, user account type, etc.) . Connecting two websites using redirects is the simplest and requires only a small amount of additional code. Although using redirects at these times reduces development complexity for developers, it reduces user experience. An alternative is to use </span> Alias <span style="font-family: 宋体"> and </span><span style="font-family: Calibri">mod_rewrite </span><span style="font-family: 宋体">, provided both code paths are on the same server. If redirection is used because the domain name changes, you can create a </span><span style="font-family: Calibri">CNAME</span><span style="font-family: 宋体"> (create a </span><span style="font-family: Calibri">DNS</span><span style="font-family: 宋体"> record pointing to another domain name as an alias) combined with the </span><span style="font-family: Calibri">Alias </span><span style="font-family: 宋体"> or </span><span style="font-family: Calibri">mod_rewrite </span><span style="font-family: 宋体"> directive. </span></p> <p> </p> <p><strong>12.<span style="font-family: 宋体">Remove duplicate scripts</span></strong></p> <p> </p> <p><span style="font-family: 宋体">Category</span>: javascript</p> <p> </p> <p><span style="font-family: 宋体"> Pages containing duplicate script files will affect performance, which may not be what you think. In a review of the top </span><span style="font-family: 宋体">big</span><span style="font-family: Calibri">web</span><span style="font-family: 宋体"> sites in the United States, only </span><span style="font-family: Calibri">2</span><span style="font-family: 宋体"> sites were found to contain duplicate scripts . Two main reasons increase the chances of duplicate scripts appearing on a single page: team size and number of scripts. In this case, the duplicate script creates unnecessary </span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体"> requests, executes useless </span><span style="font-family: Calibri">JavaScript</span><span style="font-family: 宋体"> code, and affects page performance. . </span></p> <p> </p> <p>IE<span style="font-family: 宋体"> will generate unnecessary </span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体"> requests, while </span><span style="font-family: Calibri">Firefox</span> <span style="font-family: 宋体">Won't. In </span><span style="font-family: Calibri">IE</span><span style="font-family: 宋体">, if a non-cacheable external script is introduced twice by the page, it will generate two </span><span style="font-family: Calibri">HTTP</span># when the page loads. ##ask. Even if the script is cacheable, it will generate additional <span style="font-family: 宋体"></span>HTTP<span style="font-family: Calibri"></span> requests when the user reloads the page. <span style="font-family: 宋体"></span></p> <p></p> <p>In addition to generating meaningless <span style="font-family: 宋体">HTTP</span> requests, evaluating the script multiple times also wastes time. Because redundant <span style="font-family: 宋体"></span>JavaScript## will be executed in <span style="font-family: Calibri"></span>Firefox<span style="font-family: 宋体"></span> and <span style="font-family: Calibri"></span>IE<span style="font-family: 宋体"></span> regardless of whether the script is cacheable or not. <span style="font-family: Calibri">#Code. </span><span style="font-family: 宋体"></span> </p> <p></p>One way to avoid accidentally introducing the same script twice is to implement a script management module in the template system. A typical way to introduce a script is to use the <p><span style="font-family: 宋体">SCRIPT</span><span style="font-family: 宋体"> tag in the </span>HTML<span style="font-family: Calibri"> page: </span><span style="font-family: 宋体"></span> </p> <p><script type="text/javascript" src="menu_1.0.17.js?1.1.11"></script>

One option in PHP

is to create a file called

insertScript 's function:

<?php insertScript("menu.js?1.1.11") ?>

Copy after login

In addition to preventing the same script from being introduced multiple times, this function can also solve other script-related problems, such as dependency checking and Add a version number to the script file name to support the

"permanent" expiration HTTP header.

13.

ConfigurationETags

Category

: Server

Entity tags (ETags) are a mechanism used by servers and browsers to determine whether components in the browser cache match components in the origin server ("entities" are components: images, scripts, stylesheets, etc.). Adding ETags provides an entity validation mechanism that is more flexible than last modified date. An ETag is a string that serves as a unique identifier for a specific version of a component. The only formatting constraint is that the string must be enclosed in quotes, and the origin server specifies the component's ETag using the ETag in the corresponding header. ：

HTTP/1.1 200 OK

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

ETag: "10c24bc-4ab-457e1c1f"

Content-Length: 12195

Then, if the browser must validate a component, it uses If-None-Match Request header to pass ETag back to the origin server. If ETags matches successfully, a 304 status code will be returned, thus reducing 12195 byte response body.

GET /i/yahoo.gif HTTP/1.1

Host: us.yimg.com

If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

If-None-Match: "10c24bc-4ab-457e1c1f"

HTTP/1.1 304 Not Modified

ETagsThe problem is that they are constructed by a specific server, so if the browser gets the initial component from one server and then wants to validate the same component on another server, ETags It is impossible to match successfully, and using a group of servers to handle requests is very common in web sites. By default, Apache and IIS will embed data in ETag, To greatly reduce the chance of successful validity testing on a multi-server site.

Apache 1.3 and 2.x ETag The format is inode-size-timestamp . Even though a given file may be in the same directory on multiple servers, and the file size, access permissions, timestamps, etc. are all the same, its inode (P.S. inode, index file in UNIX) is also different in different servers.

IIS5.0 and 6.0 also have similar problems. The format of ETags in IIS is Filetimestamp:ChangeNumber , ChangeNumber is a counter used to track IIS configuration changes. The ChangeNumber of a site on different IIS servers cannot be the same.

The end result is Apache and IIS generated ETags for the exact same component Cannot be matched across browsers, if ETags do not match, the user will not receive the 304 response designed for small and fast ETags. Instead, they will receive a 200normal response carrying all the data for the component. If the site is deployed on a single server, this problem does not exist at all. But if the site is deployed on multiple servers and you plan to use the default ETags# of Apache or IIS ##Configuration, users will see slow pages, higher server load, greater bandwidth consumption, and the proxy cannot effectively cache page content. Even if the component has a "permanent" Expires HTTP header, when the user clicks to reload or refresh, a conditional GET request will still be issued.

If you don’t want to use the flexible verification model provided by ETags, it is best to put all Etag Remove them all, you can use the Last-Modified HTTP header verification based on the component timestamp, and remove ETag to reduce HTTPThe size of response headers and subsequent requests. Microsoft Support article describes how to remove ETags. In Apache, this can be achieved simply by adding the following code to the Apache configuration file:

FileETag none

14.Make Ajaxcacheable

Category: Content

One of the benefits of Ajax

is that it can provide users with instant feedback. Because it can request information asynchronously from the backend server. However, with Ajax there is no guarantee that the user is waiting for asynchronous JavaScript and XMLThe response return period will not be very boring. In many applications, the user's ability to wait depends on how Ajax is used. For example, in a web-based email client, users will keep searching for Ajax# in order to find email messages that match their search criteria. ##Request attention to return results. It's important to remember that "asynchronous" doesn't mean "immediate".

To improve performance, optimizing these

Ajax responses is critical. The most important way to improve Ajax performance is to make the response cacheable, like adding Expires or # The same as discussed in the ##Cache-Control HTTP header. The following additional rules apply to Ajax:

Gzip

Component

减少DNS查找

压缩JavaScript

避免重定向

配置ETags

我们一起看看例子，一个Web 2.0的电子邮件客户端用了Ajax来下载用户的通讯录，以便实现自动完成功能。如果用户从上一次使用之后再没有修改过她的通讯录，而且Ajax响应是可缓存的，有尚未过期的Expires或者Cache-Control HTTP头，那么之前的通讯录就可以从缓存中读出。必须通知浏览器，应该继续使用之前缓存的通讯录响应，还是去请求一个新的。可以通过给通讯录的Ajax URL里添加一个表明用户通讯录最后修改时间的时间戳来实现，例如 &t=1190241612 。如果通讯录从上一次下载之后再没有被修改过，时间戳不变，通讯录就将从浏览器缓存中直接读出，从而避免一次额外的HTTP往返消耗。如果用户已经修改了通讯录，时间戳也可以确保新的URL不会匹配缓存的响应，浏览器将请求新的通讯录条目。

即使Ajax响应是动态创建的，而且可能只适用于单用户，它们也可以被缓存，而这样会让你的Web 2.0应用更快。

15.尽早清空缓冲区

分类: 服务器

当用户请求一个页面时，服务器需要用大约200到500毫秒来组装HTML页面，在这期间，浏览器闲等着数据到达。PHP中有一个 flush() 函数，允许给浏览器发送一部分已经准备完毕的HTML响应，以便浏览器可以在后台准备剩余部分的同时开始获取组件，好处主要体现在很忙的后台或者很“轻”的前端页面上（P.S. 也就是说，响应时耗主要在后台方面时最能体现优势）。

比较理想的清空缓冲区的位置是HEAD后面，因为HTML的HEAD部分通常更容易生成，并且允许引入任何CSS和JavaScript文件，这样就可以让浏览器在后台还在处理的时候就开始并行获取组件。

例如：

... <!-- css, js -->
    </head>
    <?php flush(); ?>
    <body>
      ... <!-- content -->

Copy after login

Yahoo!搜索开创了这项技术，而且真实用户测试研究也证明了使用这种技术的诸多好处。

16.对Ajax用GET请求

分类: 服务器

Yahoo!The mailbox team discovered that when using XMLHttpRequest , the browser's POST request goes through a two-step The process is implemented: first send the HTTP header, and then send the data. So it is best to use GET request, which only needs to send a TCP message (unless cookieExceptionally many). The maximum length of IEURL is 2K, so if you want to send If the data exceeds 2K, GET cannot be used.

An interesting side effect of the POST request is that no data is actually sent, like the GET request . As described in the HTTP documentation, the GET request is used to retrieve information. So its semantics are just to request data with a GET request, not to send data that needs to be stored to the server.

17.Lazy loading component

Category: Content

You can take a closer look at the page and ask yourself: What is necessary to render the page in the first place? The rest can wait.

JavaScript is ideal for separating before and after the onload event. For example, if you have JavaScript code and a library that supports drag-and-drop and animations, these can wait because drag-and-drop elements occur after the page is initially rendered. Other sections that can be lazy loaded include hidden content (content that appears after an interaction) and collapsed images.

Tools can help you reduce your workload: YUI Image Loader can delay loading of collapsed images, and YUI Get utility is a simple way to introduce JS and CSS. Yahoo!Home page is an example. You can open the network panel of Firebug and take a closer look.

It's best to align performance goals with other web development best practices, such as "progressive enhancement." If the client supports JavaScript, the user experience can be improved, but you must ensure that the page can work properly when JavaScript is not supported. So, once you’re sure your page is working properly, you can enhance it with some lazy-loading scripts to support some fancy effects like drag-and-drop and animations.

18.Preloaded components

Category: Content

Preloading may seem like the opposite of lazy loading, but it actually has a different goal. By preloading components, you can make full use of the browser's idle time to request components (images, styles, and scripts) that will be used in the future. When the user accesses the next page, most of the components are already in the cache, so the page will load faster from the user's perspective.

In actual applications, there are the following types of preloading:

Unconditional Preloading - Start loading as soon as possible, getting some extra components. google.com is a good example of sprite image preloading. This sprite image does not It's not what the google.com homepage needs, but the content on the search results page.

Conditional Preloading - Guess where the user will jump based on user operations and preload accordingly. After typing in the input box of search.yahoo.com , you can see how those additional components are requested to be loaded.

Ahead of Time Preloading - Preload new designs before they are rolled out. We often hear after a redesign: "This new website is good, but it's slower than before." Part of the reason is that the previous pages users visited have old caches, but the new ones are in an empty cache state. experience. This negative impact can be mitigated by preloading some components before a new design is rolled out. The old site can use the browser's idle time to request the images and scripts that the new site needs.

19.Reduce the number of DOM elements

Category: Content

A complex page means downloading more bytes and using JavaScriptAccessDOM will also be slower. For example, when you want to add an event handler, loop through the 500 DOM elements and 5000DOM elements are different.

A large number of DOM elements is a sign - there are some irrelevant tags on the page that need to be cleaned up. Are you using nested tables for layout? Or did you add a bunch of

s just to fix the layout problem? Perhaps better semantic markup should be used.

YUI CSS utilities Very helpful for layout: grids.cssFor the overall layout, fonts.css and reset.css can be used to remove the browser's default format. This is a good opportunity to start cleaning up and thinking about markup, such as only using

when it makes sense semantically, not because it renders a newline.

DOMThe number of elements is easy to test, just enter in the Firebug console:

document.getElementsByTagName('*').length

So how many DOM elements are too many? You can refer to other similar well-tagged pages, such as Yahoo!The home page is a fairly busy page, but there are less than 700 elements (HTML tags).

20.Cross-domain separation components

Category: content

Separate components can maximize parallel downloads, but make sure to only use no more than 2-4 domains because of DNS lookups cost. For example, you can deploy HTML and dynamic content in www.example.org , and separate static components to static1.example.org and static2.example.org .

For more information, please see the articles of Tenni Theurer and Patty Chi: Maximizing Parallel Downloads in the Carpool Lane

21.Use as little as possibleiframe

Category: Content

UseiframeYou can insert a HTML document into a parent document. The important thing is to understand how iframe works and use it efficiently. .

<span style="font-family: 宋体"> Advantages: </span></p><p> </p><p> Introduce slow third-party content such as logos and Advertisement</p><p>Security Sandbox</p><p>Parallel Download Script</p><p><iframe> <span style="font-family: 宋体">Disadvantages:</span></p><p> </p><p> <span style="font-family: 宋体"> Costly, even a blank </span>iframe</p><p>Blocks page loading</p><p>Non-semantic</p><p><strong>22.<span style="font-family: 宋体">Put an end to it</span><span style="font-family: Calibri">404</span></strong></p><p> </p><p><span style="font-family: 宋体">Category</span>: <span style="font-family: 宋体">Content</span></p><p> </p><p>HTTP<span style="font-family: 宋体">The request is expensive, there is no need to use a </span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体"> request to get a useless response (such as </span><span style="font-family: Calibri">404 Not Found</span><span style="font-family: 宋体">), It will only slow down the user experience without any benefit. </span></p><p> </p><p><span style="font-family: 宋体">Some sites use the helpful </span>404<span style="font-family: 宋体">——“You mean</span><span style="font-family: Calibri">xxx</span> <span style="font-family: 宋体">?" This is beneficial to the user experience, but it also wastes server resources (such as databases, etc.). The worst thing is that the external </span><span style="font-family: Calibri">JavaScript</span><span style="font-family: 宋体"> linked to has an error and the result is </span><span style="font-family: Calibri">404</span><span style="font-family: 宋体">. First, this download will block parallel downloads. Secondly, the browser will try to parse the </span><span style="font-family: Calibri">404</span><span style="font-family: 宋体"> response body because it is </span><span style="font-family: Calibri">JavaScript</span><span style="font-family: 宋体"> code and need to find out what parts of it are available. </span></p><p> </p><p><strong>23.<span style="font-family: 宋体">Give </span><span style="font-family: Calibri">Cookie</span><span style="font-family: 宋体"> lose weight</span></strong></p><p> </p><p><span style="font-family: 宋体">Category</span>: cookie</p><p> </p><p><span style="font-family: 宋体">There are many reasons to use </span>cookie<span style="font-family: 宋体">, such as authorization and personalization. </span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体"></span><span style="font-family: Calibri">cookie</span><span style="font-family: 宋体">Information in the header is exchanged between the </span><span style="font-family: Calibri">web</span><span style="font-family: 宋体"> server and browser . It is important to keep the </span><span style="font-family: Calibri">cookie</span><span style="font-family: 宋体"> as small as possible to minimize the impact on user response time. </span></p><p> </p><p><span style="font-family: 宋体">For more information, please see the articles of </span>Tenni Theurer<span style="font-family: 宋体"> and </span><span style="font-family: Calibri">Patty Chi</span><span style="font-family: 宋体">: </span><span style="font-family: Calibri">When the Cookie Crumbles </span> <span style="font-family: 宋体">. The relevant empirical principles can be summarized as follows: </span></p><p> </p><p><span style="font-family: 宋体">Clear unnecessary </span>cookie</p><p><span style="font-family: 宋体">Guarantee</span>cookie<span style="font-family: 宋体"> As small as possible to minimize the impact on user response time</span></p><p><span style="font-family: 宋体">Pay attention to setting the appropriate domain level for </span>cookie<span style="font-family: 宋体"> so as not to affect other subdomains</span></p><p><span style="font-family: 宋体">Set an appropriate validity period. An earlier validity period or </span>none<span style="font-family: 宋体"> can be deleted faster </span><span style="font-family: Calibri">cookie</span><span style="font-family: 宋体"> and improve user response time</span> </p><p><strong>24.<span style="font-family: 宋体">Place the component under a domain that does not contain </span><span style="font-family: Calibri">cookie</span><span style="font-family: 宋体"></span></strong></p><p> </p><p><span style="font-family: 宋体">Category</span>: cookie</p><p> </p><p><span style="font-family: 宋体">When the browser sends a request for a static image, </span>cookie<span style="font-family: 宋体"> is also sent together , and the server does not need these </span><span style="font-family: Calibri">cookie</span><span style="font-family: 宋体"> at all. So they will only cause meaningless network traffic, and you should ensure that requests for static components do not contain </span><span style="font-family: Calibri">cookie</span><span style="font-family: 宋体">. You can create a subdomain and deploy all static components there. </span></p><p> </p><p><span style="font-family: 宋体">If the domain name is </span> www.example.org <span style="font-family: 宋体">, you can deploy the static component to </span><span style="font-family: Calibri">static.example.org </span><span style="font-family: 宋体">. However, if a </span><span style="font-family: Calibri">cookie# has been set at the top-level domain </span><span style="font-family: 宋体">example.org </span><span style="font-family: Calibri"> or </span><span style="font-family: 宋体">www.example.org </span><span style="font-family: Calibri"> </span>##, then all requests to <span style="font-family: 宋体"></span>static.example.org <span style="font-family: Calibri"></span> will contain these <span style="font-family: 宋体"></span>cookie<span style="font-family: Calibri"></span>. At this time, you can buy a new domain name, deploy all the static components, and keep the new domain name without <span style="font-family: 宋体"></span>cookie<span style="font-family: Calibri"></span>. <span style="font-family: 宋体"></span>Yahoo!<span style="font-family: Calibri"></span> is using <span style="font-family: 宋体"></span>yimg.com <span style="font-family: Calibri"></span>, <span style="font-family: 宋体"></span>YouTube<span style="font-family: Calibri"></span> is <span style="font-family: 宋体"> </span>ytimg.com <span style="font-family: Calibri"></span>, <span style="font-family: 宋体"></span>Amazon<span style="font-family: Calibri"></span> is <span style="font-family: 宋体"></span>images-amazon.com <span style="font-family: Calibri"></span> and so on. <span style="font-family: 宋体"></span></p> <p></p><p>Another advantage of deploying static components under a domain that does not contain <span style="font-family: 宋体">cookie</span> is that some proxies may refuse caching <span style="font-family: 宋体"> Components of </span>cookie<span style="font-family: Calibri"></span>. One thing to note: If you don’t know whether you should use <span style="font-family: 宋体"></span>example.org<span style="font-family: Calibri"></span> or <span style="font-family: 宋体"></span>www.example.org<span style="font-family: Calibri"></span> as your homepage, you can consider it# The impact of <span style="font-family: 宋体">##cookie</span><span style="font-family: Calibri">. If </span><span style="font-family: 宋体">www</span><span style="font-family: Calibri"> is omitted, you can only write </span><span style="font-family: 宋体">cookie</span><span style="font-family: Calibri"> to </span><span style="font-family: 宋体">*.example.org </span><span style="font-family: Calibri">, so for performance reasons it is best to use the </span><span style="font-family: 宋体">www</span><span style="font-family: Calibri"> subdomain, and write </span><span style="font-family: 宋体">cookie</span><span style="font-family: Calibri"> under this subdomain. </span><span style="font-family: 宋体"></span> </p><p></p>25.<p>Minimize <strong><span style="font-family: 宋体">DOM</span><span style="font-family: Calibri">access</span><span style="font-family: 宋体"></span></strong> </p><p><span style="font-family: 宋体">Category</span>: javascript</p><p> </p><p><span style="font-family: 宋体">Use </span>JavaScript<span style="font-family: 宋体"> to access </span><span style="font-family: Calibri">DOM</span><span style="font-family: 宋体"> elements is very slow, so in order to make the page respond more quickly, you should: </span></p><p> </p><p>Cache the index of the visited element</p><p><span style="font-family: 宋体">First</span>Update nodes "offline" before adding them to the <span style="font-family: Calibri">DOM</span><span style="font-family: 宋体"> tree</span></p><p><span style="font-family: 宋体">Avoid using </span>JavaScript<span style="font-family: 宋体">Fix layout issues</span></p><p><span style="font-family: 宋体">For more information, please see </span>YUI<span style="font-family: 宋体"> in the cinema</span><span style="font-family: Calibri">Julien Lecomte</span><span style="font-family: 宋体">'s article: </span><span style="font-family: Calibri">High Performance Ajax Applications</span></p><p> </p><p><strong>26.<span style="font-family: 宋体">Use smart event handlers</span></strong></p><p> </p><p><span style="font-family: 宋体">Category</span>: javascript</p><p> </p><p><span style="font-family: 宋体">Sometimes it feels like the page is not responsive enough because too many frequently executed event handlers have been added to the </span>DOM<span style="font-family: 宋体"> On different elements of the tree, this is why event delegation is recommended. If there are </span><span style="font-family: Calibri">10</span><span style="font-family: 宋体"> buttons in a </span><span style="font-family: Calibri">div </span><span style="font-family: 宋体">, it should only be given to the </span><span style="font-family: Calibri">div</span><span style="font-family: 宋体"> container Add an event handler instead of one for each button. Events can bubble up, so you can capture the event and know which button is the source of the event. </span></p><p> </p><p><span style="font-family: 宋体">There is no need to wait for the </span><span style="font-family: 宋体">onload</span><span style="font-family: Calibri"> event in order to process the </span>DOM<span style="font-family: 宋体"> tree, usually as long as the target The element can be accessed in the </span><span style="font-family: Calibri">DOM</span><span style="font-family: 宋体"> tree without having to wait for all images to be downloaded. Consider using </span><span style="font-family: Calibri">DOMContentLoaded </span><span style="font-family: 宋体"> instead of the </span><span style="font-family: Calibri">onload</span><span style="font-family: 宋体"> event, but to make it available in all browsers, use </span> <span style="font-family: Calibri">YUI Event </span><span style="font-family: 宋体"> Tool, it has a </span><span style="font-family: Calibri">onAvailable </span><span style="font-family: 宋体"> method. </span></p><p> </p><p><span style="font-family: 宋体">For more information, please see the article of </span>YUI<span style="font-family: 宋体"> in the cinema</span><span style="font-family: Calibri">Julien Lecomte</span><span style="font-family: 宋体">: </span><span style="font-family: Calibri">High Performance Ajax Applications</span></p><p> </p><p><strong>27.<span style="font-family: 宋体">Select</span><span style="font-family: Calibri"><link></span><span style="font-family: 宋体">Discard </span><span style="font-family: Calibri">@import</span></strong></p><p> </p><p><span style="font-family: 宋体">Category</span>: css</p><p> </p><p><span style="font-family: 宋体"> A best practice was mentioned earlier: in order to achieve progressive rendering, </span>CSS<span style="font-family: 宋体"> should be placed at the top. </span></p><p> </p><p><span style="font-family: 宋体">Use </span><span style="font-family: 宋体">@import </span><span style="font-family: Calibri"> in </span>IE<span style="font-family: 宋体"> and </span># at the bottom ##<link> <span style="font-family: Calibri"></span>The effect is the same, so it is best not to use it. <span style="font-family: 宋体"></span></p> <p></p><p>28.<strong>Avoid using filters<span style="font-family: 宋体"></span></strong></p> <p></p><p>Category<span style="font-family: 宋体">: css</span></p> <p></p>IE<p>Proprietary<span style="font-family: 宋体"></span>AlphaImageLoader <span style="font-family: Calibri"></span>Filter can be used to repair<span style="font-family: 宋体"></span>IE7<span style="font-family: Calibri"></span>Problems with translucent <span style="font-family: 宋体"></span>PNG<span style="font-family: Calibri"></span> images in previous versions. During the image loading process, this filter will block rendering, freeze the browser, increase memory consumption, and is applied to each element, not each image, so there will be a lot of problems. <span style="font-family: 宋体"></span></p> <p><p><span style="font-family: 宋体">The best way is to not use </span> AlphaImageLoader <span style="font-family: 宋体"> at all, and downgrade gracefully to one that has good support in </span><span style="font-family: Calibri">IE</span><span style="font-family: 宋体"></span><span style="font-family: Calibri">PNG8</span><span style="font-family: 宋体"> picture instead. If you must use </span><span style="font-family: Calibri">AlphaImageLoader </span><span style="font-family: 宋体">, you should use underscore </span><span style="font-family: Calibri">hack</span><span style="font-family: 宋体">: </span><span style="font-family: Calibri">_filter </span><span style="font-family: 宋体"> to avoid Affects users of </span><span style="font-family: Calibri">IE7</span><span style="font-family: 宋体"> and higher. </span></p><p> </p><p><strong>29.<span style="font-family: 宋体">Optimize pictures</span></strong></p><p></p><p>##Category<span style="font-family: 宋体"> : </span>Pictures<span style="font-family: 宋体"></span></p> <p></p><p>After the designer makes the pictures, he uploads them to <span style="font-family: 宋体"></span> through <span style="font-family: 宋体">FTP</span> Before the web<span style="font-family: Calibri"></span> server, we can do some things. <span style="font-family: 宋体"></span></p> <p></p><p>Check the <span style="font-family: 宋体">GIF</span> picture to see if the number of colors corresponding to the palette size is used in the picture, use <span style="font-family: 宋体"></span>imagemagick <span style="font-family: Calibri"></span>You can simply check: <span style="font-family: 宋体"></span></p>identify -verbose image.gif<p></p><p>If the <span style="font-family: 宋体">4</span> color image is used If the <span style="font-family: 宋体"></span>256<span style="font-family: Calibri"></span> color "slot" in the palette, then there is room for improvement<span style="font-family: 宋体"></span></p><p>Try to put <span style="font-family: 宋体">GIF</span>Convert the image to <span style="font-family: 宋体"></span>PNG<span style="font-family: Calibri"></span> and see if the size can be reduced. It usually can. Developers were often reluctant to use <span style="font-family: 宋体"></span>PNG<span style="font-family: Calibri"></span> images due to limited browser support, but this is a thing of the past. The real problem is that <span style="font-family: 宋体"></span>PNG<span style="font-family: Calibri"></span> images fully support <span style="font-family: 宋体"></span>alpha<span style="font-family: Calibri"></span> transparency, while <span style="font-family: 宋体"></span>GIF<span style="font-family: Calibri"></span> images It does not support transparency gradients, so anything <span style="font-family: 宋体"></span>GIF<span style="font-family: Calibri"></span> can do, <span style="font-family: 宋体"></span>PNG<span style="font-family: Calibri"></span> can do (except animation). The following simple command will make the <span style="font-family: 宋体"></span>PNG<span style="font-family: Calibri"></span> image safe to use: <span style="font-family: 宋体"></span></p>convert image.gif image.png<p></p>"We The emphasis is: Give <p>PNG<span style="font-family: Calibri"></span> a chance. ”<span style="font-family: 宋体"></span></p>##Use <p> pngcrush <span style="font-family: 宋体"> (or other </span><span style="font-family: 宋体">PNG. </span><span style="font-family: Calibri">Optimization tool) processes all </span><span style="font-family: 宋体">PNG</span><span style="font-family: Calibri"> images, for example: </span><span style="font-family: 宋体">##pngcrush image.png -rem alla -reduce -brute result .png</span></p><p>Use </p>jpegtran<p> to process all <span style="font-family: 宋体"></span>JPEG<span style="font-family: 宋体"></span> pictures. This tool supports <span style="font-family: Calibri"></span>JPEG<span style="font-family: 宋体"> </span> Lossless operations on images, such as rotation, can also be used to remove comments and other useless information (such as <span style="font-family: Calibri"></span>EXIF<span style="font-family: 宋体"></span>information<span style="font-family: Calibri"></span>P.S. <span style="font-family: 宋体"></span>digital Photo information, focal length, aperture, etc.): <span style="font-family: Calibri"></span><span style="font-family: 宋体">jpegtran -copy none -optimize -perfect src.jpg dest.jpg</span></p><p>30.</p>Optimize<p><strong>CSS Sprite<span style="font-family: 宋体"></span><span style="font-family: Calibri"></span> </strong></p><p>Category</p>: <p>Picture<span style="font-family: 宋体"></span><span style="font-family: 宋体"> </span></p><p>In </p>Sprite<p> the horizontal arrangement of the image is generally smaller than the vertical arrangement of the final file<span style="font-family: 宋体"></span><p><span style="font-family: 宋体">Combination</span>Sprite<span style="font-family: 宋体"> Similar colors in the picture can be kept low, ideally </span><span style="font-family: Calibri">256</span><span style="font-family: 宋体"></span><span style="font-family: Calibri"># PNG8</span><span style="font-family: 宋体">Format</span></p><p> is "mobile friendly" and does not leave too big a gap in the <span style="font-family: Calibri">Sprite</span><span style="font-family: 宋体"> image. Although it does not affect the image file size to a large extent, doing so can save the memory consumed by the user agent when decompressing the image into a pixel map. The picture of </span><span style="font-family: Calibri">100</span><span style="font-family: 宋体">×</span><span style="font-family: Calibri">100</span><span style="font-family: 宋体"> is </span><span style="font-family: Calibri">1</span><span style="font-family: 宋体"> million pixels, and ## A picture of </span>#1000<span style="font-family: Calibri"></span>×<span style="font-family: 宋体"></span>1000<span style="font-family: Calibri"></span> is <span style="font-family: 宋体"></span>100<span style="font-family: Calibri"></span> million pixels. <span style="font-family: 宋体"></span></p>3<p>1.<strong>Do not use <span style="font-family: 宋体"></span>HTML<span style="font-family: Calibri"></span>Zoom images<span style="font-family: 宋体"></span></strong></p> <p> </p><p>Category<span style="font-family: 宋体">: </span>Picture<span style="font-family: 宋体"></span></p> <p></p><p>Don’t use it just because you can set the width and height in <span style="font-family: 宋体">HTML</span> Unnecessarily large picture. If needed<span style="font-family: 宋体"></span></p> <p></p><img width="100" height="100" src="mycat.jpg" alt="My Cat" /><p></p><p>Then the image itself (<span style="font-family: 宋体">mycat.jpg</span>) should be <span style="font-family: 宋体"></span>100x100px<span style="font-family: Calibri"></span> instead of shrinking it to <span style="font-family: 宋体"></span>500x500px<span style="font-family: Calibri"> </span>picture of. <span style="font-family: 宋体"></span></p> <p></p><p>32.<strong>Use a small cacheable <span style="font-family: 宋体"></span>favicon.ico<span style="font-family: Calibri"></span>（<span style="font-family: 宋体"></span>P.S. <span style="font-family: Calibri"></span>Favorite icon)<span style="font-family: 宋体"></span></strong></p> <p></p><p>Category<span style="font-family: 宋体">: </span>Picture<span style="font-family: 宋体"></span></p> <p></p>favicon.ico<p> is an image placed in the root directory of the server. It will cause a lot of trouble, because even if you ignore it, the browser will automatically request it, so it is best not to give it a <span style="font-family: 宋体"></span>404 Not Found <span style="font-family: Calibri"></span>Response. And as long as it is on the same server, <span style="font-family: 宋体"></span>cookie<span style="font-family: Calibri"></span> will be sent every time it is requested. In addition, this image will interfere with the download order, such as in <span style="font-family: 宋体"></span>IE<span style="font-family: Calibri"> In </span>, when you request additional components in <span style="font-family: 宋体"></span>onload<span style="font-family: Calibri"></span>, <span style="font-family: 宋体"></span>favicon<span style="font-family: Calibri"></span> will be downloaded first. <span style="font-family: 宋体"></span></p> <p></p><p>So in order to mitigate the shortcomings of <span style="font-family: 宋体">favicon.ico</span>, you should ensure: <span style="font-family: 宋体"></span></p> <p></p><p> is small enough, it is best to set the appropriate validity period below <span style="font-family: 宋体">1K</span><span style="font-family: 宋体"></span></p><p><span style="font-family: 宋体">HTTP</span> header (if you want to change it later, you cannot Renamed), it is generally safer to set the validity period to a few months later. You can ensure that the change is known to the browser by checking the last modification date of the current <span style="font-family: 宋体"></span>favicon.ico<span style="font-family: Calibri"></span>. <span style="font-family: 宋体"></span></p>Imagemagick <p>Can be used to handle small favorite icons<span style="font-family: 宋体"></span></p> <p></p><p>33.<strong>Ensure all components are smaller than<span style="font-family: 宋体"></span>25K<span style="font-family: Calibri"></span></strong></p> <p></p><p>Category<span style="font-family: 宋体">: </span>Mobile<span style="font-family: 宋体"></span></p> <p><p><span style="font-family: 宋体">这个限制是因为</span>iPhone<span style="font-family: 宋体">不能缓存大于</span><span style="font-family: Calibri">25K</span><span style="font-family: 宋体">的组件，注意这里指的是未压缩的大小。这就是为什么缩减内容本身也很重要，因为单纯的</span><span style="font-family: Calibri">gzip</span><span style="font-family: 宋体">可能不够。</span></p><p> </p><p><span style="font-family: 宋体">更多信息请查看</span>Wayne Shea<span style="font-family: 宋体">和</span><span style="font-family: Calibri">Tenni Theurer</span><span style="font-family: 宋体">的文章： </span><span style="font-family: Calibri">Performance Research, Part 5: iPhone Cacheability </span><span style="font-family: 宋体">– </span><span style="font-family: Calibri">Making it Stick</span></p><p> </p><p><strong>34.<span style="font-family: 宋体">把组件打包到一个复合文档里</span></strong></p><p> </p><p><span style="font-family: 宋体">分类</span>: <span style="font-family: 宋体">移动</span></p><p> </p><p><span style="font-family: 宋体">把各个组件打包成一个像有附件的电子邮件一样的复合文档里，可以用一个</span>HTTP<span style="font-family: 宋体">请求获取多个组件（记住一点：</span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体">请求是代价高昂的）。用这种方式的时候，要先检查用户代理是否支持（</span><span style="font-family: Calibri">iPhone</span><span style="font-family: 宋体">就不支持）。</span></p><p> </p><p><strong>35.<span style="font-family: 宋体">避免图片</span><span style="font-family: Calibri">src</span><span style="font-family: 宋体">属性为空</span></strong></p><p> </p><p><span style="font-family: 宋体">分类</span>: <span style="font-family: 宋体">服务器</span></p><p> </p><p>Image with empty string src <span style="font-family: 宋体">属性是空字符串的图片很常见，主要以两种形式出现：</span></p><p> </p><p>straight HTML</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><img src=””></pre><div class="contentsignin">Copy after login</div></div><p>JavaScript</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">var img = new Image();img.src = “” ;</pre><div class="contentsignin">Copy after login</div></div><p><span style="font-family: Calibri"></span><br></p> <p> </p> <p>这两种形式都会引起相同的问题：浏览器会向服务器发送另一个请求。</p> <p> </p> <p>IE <span style="font-family: 宋体">向页面所在目录发起一个请求</span></p> <p>Safari<span style="font-family: 宋体">和</span><span style="font-family: Calibri">Chrome </span><span style="font-family: 宋体">想当前页面本身发送一个请求</span></p> <p>Firefox 3<span style="font-family: 宋体">及更早版本与</span><span style="font-family: Calibri">Safari</span><span style="font-family: 宋体">和</span><span style="font-family: Calibri">Chrome</span><span style="font-family: 宋体">处理方式一样，但</span><span style="font-family: Calibri">3.5</span><span style="font-family: 宋体">解决了这个问题 </span><span style="font-family: Calibri">[bug 444931] </span><span style="font-family: 宋体">，不会再发送请求了</span></p> <p>Opera <span style="font-family: 宋体">遇到有空</span><span style="font-family: Calibri">src</span><span style="font-family: 宋体">属性的图片不做任何处理</span></p> <p><span style="font-family: 宋体">为什么图片</span>src<span style="font-family: 宋体">属性为空不好？</span></p> <p> </p> <p>意外发送大量的通信量对服务器来说是很伤的，尤其是在每天有几百万访问量页面的时候。</p> <p>浪费服务器资源去生成一个根本不可能被看到的页面</p> <p><span style="font-family: 宋体">可能会污染用户数据，如果追踪请求状态，要么通过</span>cookie<span style="font-family: 宋体">要么是其它方式，可能会破坏用户数据。即使图片请求并没有返回图片，整个</span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体">头部也会被浏览器接受并读取，包括所有的</span><span style="font-family: Calibri">cookie</span><span style="font-family: 宋体">。虽然其余部分会被丢弃，但这可能已经造成破坏了。</span></p> <p><span style="font-family: 宋体">The root cause of the problem is the differences in how various browsers handle </span>URI<span style="font-family: 宋体">, which is specified in </span><span style="font-family: Calibri">RFC 3986 </span><span style="font-family: 宋体">– </span><span style="font-family: Calibri"> Uniform Resource Identifiers</span><span style="font-family: 宋体"> are clearly defined in the documentation. If </span><span style="font-family: Calibri">URI</span><span style="font-family: 宋体"> is an empty string, it will be treated as a relative </span><span style="font-family: Calibri">URI</span><span style="font-family: 宋体"> and followed </span><span style="font-family: Calibri">5.2## Algorithmic processing defined in section </span>#. The actual situation is that <span style="font-family: 宋体"></span>Firefox<span style="font-family: Calibri"></span>, <span style="font-family: 宋体"></span>Safari<span style="font-family: Calibri"></span> and <span style="font-family: 宋体"></span>Chrome<span style="font-family: Calibri"></span> are all based on the documentation. The specifications listed in section <span style="font-family: 宋体"></span>5.4<span style="font-family: Calibri"></span> are used to handle empty strings, but <span style="font-family: 宋体"></span>IE<span style="font-family: Calibri"></span> does not handle them correctly. It is said that in the old version of the specification document <span style="font-family: 宋体"></span>RFC 2396 <span style="font-family: Calibri"></span>– <span style="font-family: 宋体"></span>Uniform Resource Identifiers<span style="font-family: Calibri"></span> (replaced by <span style="font-family: 宋体"></span>RFC 3986<span style="font-family: Calibri"></span>Abandoned), so strictly speaking, the browser's approach to processing relative <span style="font-family: 宋体"></span>URI<span style="font-family: Calibri"></span> is correct. The problem is that in this case, the empty string is clearly unintentional (<span style="font-family: 宋体"></span>P.S. <span style="font-family: Calibri"></span> rather than some relative <span style="font-family: 宋体"></span>URI<span style="font-family: Calibri"></span>). <span style="font-family: 宋体"></span></p> Section <p></p>4.8.2<p><span style="font-family: 宋体"> of </span><span style="font-family: Calibri">HTML5</span> is about <span style="font-family: 宋体"></span><img><span style="font-family: Calibri"></span> Tag<span style="font-family: 宋体"></span>src<span style="font-family: Calibri"></span> Description of the attribute, stipulating that the browser will no longer send additional requests: <span style="font-family: 宋体"></span></p> <p></p>The src attribute must be present, and must contain a valid URL referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. If the base URI of the element is the same as the document<p>'<span style="font-family: 宋体"></span> s address, then the src attribute<span style="font-family: Calibri"></span>'<span style="font-family: 宋体"></span>s value must not be the empty string.<span style="font-family: Calibri"></span>（<span style="font-family: 宋体"></span>P.S. <span style="font-family: Calibri"></span>" The <span style="font-family: 宋体"></span>src<span style="font-family: Calibri"></span> attribute must exist, and must have a legal <span style="font-family: 宋体"></span>URL<span style="font-family: Calibri"></span> to reference non-interactive animation or image resources, and cannot be paged or Contains script. If the element's base <span style="font-family: 宋体"></span>URI<span style="font-family: Calibri"></span> is the same as the document address, the value of the <span style="font-family: 宋体"></span>src<span style="font-family: Calibri"></span> attribute cannot be an empty string.") <span style="font-family: 宋体"></span></p></span></p></span></p><p>The above is the detailed content of A detailed introduction to Yahoo's military regulations. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Related labels：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/search?word=yahoo" target="_blank">yahoo</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/faq/374562.html" title="Complete front-end development manual document (including html css jquery html5) manual download"> <span>Previous article：Complete front-end development manual document (including html css jquery html5) manual download</span> </a> <a href="http://www.php.cn/faq/374610.html" title="Summary of key CSS knowledge"> <span>Next article：Summary of key CSS knowledge</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Statement of this Website</div> <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Articles by Author</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/377601.html">Video material on building your own PHP framework from scratch</a> </div> <div>2023-03-15 16:54:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/377137.html">Example analysis of how PHPMailer uses QQ mailbox to complete the email sending function</a> </div> <div>2023-03-15 12:26:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/376186.html">Introduction to how to receive emails in IMAP in php</a> </div> <div>2023-03-14 18:58:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/375194.html">Example of how to quickly implement array deduplication in PHP</a> </div> <div>2023-03-14 11:30:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/369412.html">Summary of the use of all attributes of the <a> tag in html</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/379971.html">Summary of basic knowledge of PHP (necessary for beginners to get started)</a> </div> <div>2023-03-16 15:20:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/381607.html">Introduction to the use of typeof in JavaScript</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/382066.html">Introduction to the use of confirm() method in JavaScript</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/357705.html">A detailed introduction to the HTML5 Placeholder attribute</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/380149.html">How to implement single-select, multiple-select and reverse-select in forms in ReactJS</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Issues</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176411.html" target="_blank" title="function_exists() cannot determine the custom function" class="wdcdcTitle">function_exists() cannot determine the custom function</a> <a href="http://www.php.cn/wenda/176411.html" class="wdcdcCons">Function test () {return true;} if (function_exists ('test')) {echo "test is function...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-29 11:01:01</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1842</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176410.html" target="_blank" title="How to display the mobile version of Google Chrome" class="wdcdcTitle">How to display the mobile version of Google Chrome</a> <a href="http://www.php.cn/wenda/176410.html" class="wdcdcCons">Hello teacher, how can I change Google Chrome into a mobile version?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-23 00:22:19</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>10</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2014</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176407.html" target="_blank" title="The child window operates the parent window, but the output does not respond." class="wdcdcTitle">The child window operates the parent window, but the output does not respond.</a> <a href="http://www.php.cn/wenda/176407.html" class="wdcdcCons">The first two sentences are executable, but the last sentence cannot be implemented.</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-19 15:37:47</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1695</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176406.html" target="_blank" title="There is no output in the parent window" class="wdcdcTitle">There is no output in the parent window</a> <a href="http://www.php.cn/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('I am the output of the child ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-18 23:52:34</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1596</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176405.html" target="_blank" title="Where is the courseware about CSS mind mapping?" class="wdcdcTitle">Where is the courseware about CSS mind mapping?</a> <a href="http://www.php.cn/wenda/176405.html" class="wdcdcCons">Courseware</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-16 10:10:18</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1613</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Related Topics</div> <a href="http://www.php.cn/faq/zt" target="_blank">More> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/ynxmlssyq"><img src="https://img.php.cn/upload/subject/202407/22/2024072213505727266.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What directory search engines are there?" /> </a> <a target="_blank" href="http://www.php.cn/faq/ynxmlssyq" class="title-a-spanl" title="What directory search engines are there?"><span>What directory search engines are there?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/phphjsdqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072212193525022.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between php and js" /> </a> <a target="_blank" href="http://www.php.cn/faq/phphjsdqb" class="title-a-spanl" title="The difference between php and js"><span>The difference between php and js</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/smsxtrj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214191086760.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What is system software" /> </a> <a target="_blank" href="http://www.php.cn/faq/smsxtrj" class="title-a-spanl" title="What is system software"><span>What is system software</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/mysqlljbzmjj"><img src="https://img.php.cn/upload/subject/202407/22/2024072213514945291.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to solve the problem that mysql link reports 10060" /> </a> <a target="_blank" href="http://www.php.cn/faq/mysqlljbzmjj" class="title-a-spanl" title="How to solve the problem that mysql link reports 10060"><span>How to solve the problem that mysql link reports 10060</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/winggwjlx"><img src="https://img.php.cn/upload/subject/202407/22/2024072213555083633.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to change file type in win7" /> </a> <a target="_blank" href="http://www.php.cn/faq/winggwjlx" class="title-a-spanl" title="How to change file type in win7"><span>How to change file type in win7</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/bzzxgkrszn"><img src="https://img.php.cn/upload/subject/202407/22/2024072211491553720.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Where are the number of online viewers at station b?" /> </a> <a target="_blank" href="http://www.php.cn/faq/bzzxgkrszn" class="title-a-spanl" title="Where are the number of online viewers at station b?"><span>Where are the number of online viewers at station b?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/mdfwjdrsjkdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213560841155.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to import mdf files into database" /> </a> <a target="_blank" href="http://www.php.cn/faq/mdfwjdrsjkdff" class="title-a-spanl" title="How to import mdf files into database"><span>How to import mdf files into database</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/langbarchm"><img src="https://img.php.cn/upload/subject/202407/22/2024072214400942833.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="langbar.chm" /> </a> <a target="_blank" href="http://www.php.cn/faq/langbarchm" class="title-a-spanl" title="langbar.chm"><span>langbar.chm</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">Popular Recommendations</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does url mean?" href="http://www.php.cn/faq/418772.html">What does url mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does DOM mean?" href="http://www.php.cn/faq/414303.html">What does DOM mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to change image size" href="http://www.php.cn/faq/414252.html">How to change image size</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to make font bold in HTML" href="http://www.php.cn/faq/414520.html">How to make font bold in HTML</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to set the size of html images" href="http://www.php.cn/faq/475145.html">How to set the size of html images</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Popular Tutorials</div> <a target="_blank" href="http://www.php.cn/course.html">More> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Related Tutorials <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Popular Recommendations<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Latest courses<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="http://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div>1417684 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/74.html" title="PHP introductory tutorial one: Learn PHP in one week" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="http://www.php.cn/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a> <div class="wzrthreerb"> <div>4258801 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div>2485474 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div>504181 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/2.html" title="PHP zero-based introductory tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP zero-based introductory tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP zero-based introductory tutorial" href="http://www.php.cn/course/2.html">PHP zero-based introductory tutorial</a> <div class="wzrthreerb"> <div>858833 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="http://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div >1417684 times of learning</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div >2485474 times of learning</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div >504181 times of learning</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/901.html" title="Quick introduction to web front-end development" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Quick introduction to web front-end development" href="http://www.php.cn/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div >215355 times of learning</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/234.html" title="Master PS video tutorials from scratch" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Master PS video tutorials from scratch" href="http://www.php.cn/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div >879350 times of learning</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/course/1648.html" title="[Web front-end] Node.js quick start" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Node.js quick start" href="http://www.php.cn/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div >6575 times of learning</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/1647.html" title="Complete collection of foreign web development full-stack courses" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="http://www.php.cn/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div >5111 times of learning</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/1646.html" title="Go language practical GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go language practical GraphQL" href="http://www.php.cn/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div >4286 times of learning</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/1645.html" title="550W fan master learns JavaScript from scratch step by step" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="http://www.php.cn/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div >638 times of learning</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/1644.html" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="http://www.php.cn/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a> <div class="wzrthreerb"> <div >21821 times of learning</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Latest Downloads</div> <a href="http://www.php.cn/xiazai">More> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">Web Effects <div></div></div> <div class="swiper-slide" data-id="twof">Website Source Code<div></div></div> <div class="swiper-slide" data-id="threef">Website Materials<div></div></div> <div class="swiper-slide" data-id="fourf">Front End Template<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery enterprise message form contact code" href="http://www.php.cn/toolset/js-special-effects/8071">[form button] jQuery enterprise message form contact code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 music box playback effects" href="http://www.php.cn/toolset/js-special-effects/8070">[Player special effects] HTML5 MP3 music box playback effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 cool particle animation navigation menu special effects" href="http://www.php.cn/toolset/js-special-effects/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery visual form drag and drop editing code" href="http://www.php.cn/toolset/js-special-effects/8068">[form button] jQuery visual form drag and drop editing code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS imitation Kugou music player code" href="http://www.php.cn/toolset/js-special-effects/8067">[Player special effects] VUE.JS imitation Kugou music player code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Classic html5 pushing box game" href="http://www.php.cn/toolset/js-special-effects/8066">[html5 special effects] Classic html5 pushing box game</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery scrolling to add or reduce image effects" href="http://www.php.cn/toolset/js-special-effects/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 personal album cover hover zoom effect" href="http://www.php.cn/toolset/js-special-effects/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8328" title="Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8327" title="Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8326" title="Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8325" title="Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8324" title="Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8323" title="Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8322" title="IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8321" title="Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-materials/3078" target="_blank" title="Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-materials/3077" target="_blank" title="Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-materials/3076" target="_blank" title="Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-materials/3075" target="_blank" title="Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-materials/3074" target="_blank" title="Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-materials/3073" target="_blank" title="Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-materials/3072" target="_blank" title="Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-materials/3071" target="_blank" title="Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8328" target="_blank" title="Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8327" target="_blank" title="Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8326" target="_blank" title="Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8325" target="_blank" title="Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8324" target="_blank" title="Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8323" target="_blank" title="Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8322" target="_blank" title="IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/toolset/website-source-code/8321" target="_blank" title="Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Public welfare online PHP training，Help PHP learners grow quickly！</p> </div> <div class="footermid"> <a href="http://www.php.cn/about/us.html">About us</a> <a href="http://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="http://www.php.cn/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1731598451"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>