Yahoo! ~

This is from the Internet to find, for the future to do the Web is very useful! ~

1. Minimize the number of HTTP requests--weigh

Merging pictures (such as CSS sprites, built-in image usage data), merging CSS, JS, is important, but consider the volume of the merged file.

2. Using CDN (Content distribution Network)

There are three types of implementations of CDN: Mirroring, caching, leased lines, and smart routers and load balancing.

3. Specify expires or Cache-control for the file header, so that the content is cached.

Differentiate between static content and dynamic content, avoiding unnecessary HTTP requests in future page accesses.

4. Avoid empty src and href

Note the labels with these two attributes, such as link,script,img,iframe, etc.;

5. Compress content using gzip

Gzip reduces file volume since all possible file types are compressed

6. Put CSS on the top

Implement the page to load in an orderly manner, which is more important for pages with more content and slower users, while the HTML specification clearly indicates that the style sheet should be included in the

7. Put JS on the bottom

The http/1.1 specification suggests that the browser does not have more than two concurrent downloads for each hostname, and the problem is that the script blocks the parallel download of the page, even if the host name is different

8. Avoid using CSS expressions

When the page is displayed and scaled, scrolling, and even moving the mouse, the calculation frequency of the CSS expression is our concern. You can consider a one-time expression or use an event handle instead of a CSS expression.

9. Put CSS and JS into external files

We need to weigh the compromise between the HTTP requests that the built-in code brings and the benefits of caching by using external files.

10. Reduce the number of DNS lookups

We need to weigh the relationship between reducing the number of DNS lookups and maintaining a high degree of parallel downloads.

11. Streamline CSS and JS

The goal is to reduce the volume of downloaded files, you can consider the compression tool jsmin and Yui Compressor.

12. Avoid jumping

To ensure that the back button can be used correctly, use the standard 3XXHTTP status code, and avoid the backslash "/" jump in the same domain;
Cross-domain use alias or mod_rewirte to establish a CNAME (a DNS record that holds the relationship between a domain name and another domain name)

13, eliminate the repetition of JS and CSS

Repeated invocation of the script, in addition to adding additional HTTP requests, multiple operations can also waste time. In IE and Firefox, regardless of whether the script is cacheable, there is a problem with repeating the JavaScript.

14, Configuration Etags

Entity tags (etags) is a mechanism used by Web servers and browsers to determine whether content in the browser cache matches the original content in the server ("entity" is what it says "content", including pictures, scripts, stylesheets, etc.), and is more than last-modified Date more flexible mechanism, the file has been repaired several times per unit time, the ETag can synthesize the inode (the number of index nodes (inode) of the file), MTime (modified time) and size to accurately judge, avoid UNIX records MTime only accurate to the second problem. The server cluster is used, preferably after two parameters. Use Etags to reduce Web application bandwidth and load.

15. Enable Ajax to cache

With timestamps, more subtle implementations of the response can be cached and synchronized with server data updates.

16. Refresh the output buffer as soon as possible

Especially useful for parallel downloads of css,js files

17. Use get to complete AJAX requests

When using XMLHttpRequest, the Post method in the browser is a "two-step Walk" process: First send the file header before sending the data. It is more meaningful to get data using get when the URL is less than 2K.

18. Delayed loading

After you have determined that the page is working properly, load the script to implement such things as drag and drop and animation, or the contents of the hidden parts and collapsed content.

19. Pre-loading

Follow the unconditional load, conditional loading and expected loading.

20. Reduce the number of DOM elements

Using tags that are more appropriate or more relevant in semantics, consider the performance overhead of loops in a large number of DOM elements.

21, according to the Domain name Division page content

It is clear that parallel downloads are maximized

22, minimize the number of IFRAME

Considering that even if the content is empty, loading takes time, prevents the page from loading, has no semantics, and notes that the IFRAME has a 1-2-magnitude overhead relative to other DOM elements, which blocks the onload event in a typical way, and the home page style sheet in IE and Firefox blocks its download.

23. Avoid 404

HTTP request time consumption is very large, some sites to the 404 Error response page to "You are not looking for * * *", which improves the user experience but also wasted server resources (such as databases, etc.). The worst case scenario is a link to an external JavaScript that has a problem and returns 404 code. First, this load destroys parallel loading, and second, the browser will try to find something useful in the returned 404 response content as JavaScript code to execute.

24. Reduce the size of cookies

Removal of unnecessary Coockie
Minimizes the impact of user response by minimizing Coockie volume
Note Set Coockie on the domain name of the adaptive level so that the subdomain is not affected
Set a reasonable expiration time. Expire time earlier and not removing Coockie prematurely will improve user response time.

25. Use a domain without cookies

The request for static content is determined to be non-coockie. Create a subdomain and use it to store all of the static content.

26. Reduced DOM Access

Cache the relevant elements that have been accessed
Add them to the document tree after you update the nodes below the line
Avoid using JavaScript to modify page layouts

27. Develop Intelligent event handlers

Sometimes we feel the page is unresponsive because there are too many event handles attached to the DOM tree element and some of the event sentences are frequently triggered. That's why using the event delegation is a good way to do that. If you have 10 buttons in a div, you just need to attach an event handle to the DIV, instead of adding a handle to each button. When the event bubbles, you can capture the event and determine which event was emitted.
You also don't have to wait for the OnLoad event to operate the DOM tree. All you need to do is wait for the element you want to access in the tree structure to appear. You don't have to wait for all the images to load.
You might want to replace the Onavailable method in the event application with the Domcontentloaded event.

28. Replace @import with <link>

In IE, the bottom of the page @import and use <link> function is the same, so it is best not to use it.

29. Avoid using filters

The best way to avoid using alphaimageloader completely is to use the PNG8 format instead, which works well in IE. If you do need to use AlphaImageLoader, use the underscore _filter and make it invalid for users IE7 or later.

30. Optimize the image

Try converting the GIF format to PNG format to see if you're saving space. Run Pngcrush (or other PNG optimization tools) on all PNG images

31. Optimize CSS Spirite

Arrange your images horizontally in the spirite, and the vertical arrangement will slightly increase the file size;
Spirite The combination of the color closer together can reduce the number of colors, the ideal condition is less than 256 colors in order to apply the PNG8 format;
Easy to move, do not leave a large gap in the middle of the spirite image. While this is unlikely to increase the file size, it requires less memory for the user agent to decompress the image into a pixel map. 100x100 's picture is 10,000 pixels, while 1000x1000 is 1 million pixels.

32. Do not scale images in HTML--weigh

Don't use a larger picture than you actually need to set the length and width in HTML. If you need:

then your picture (mycat.jpg) should be 100x100 pixels instead of reducing the use of a 500x500 pixel image. Here is a more interesting analysis.

33, Favicon.ico to be small and cacheable

Favicon.ico is a picture file located in the root directory of the server. It must exist, because even if you don't care if it's useful, the browser makes a request for it, so it's best not to return a 404 Not Found response. Because it is on the same server, it is sent once every time Coockie is requested. This image file also affects the download order, for example, in IE when you request additional files in onload, Favicon will download the additional content before it is loaded.

Therefore, in order to reduce the favicon.ico caused by the drawbacks, to do:
File as small as possible, preferably less than 1K
At the right time (that is, you do not want to change favicon.ico, because it cannot be renamed when the new file is replaced), set the expires file header for it. You can safely set the expires file header to the next few months. You can make a judgment by checking the last editing time of the current favicon.ico.
ImageMagick can help you create a small favicon.

34. Keep single content less than 25K

Because the iphone cannot cache files larger than 25K. Note that this refers to the size after decompression. Because simple GIZP compression may not be required, it is important to streamline files.

35. Packaging components into compound text

Wrapping content into composite text is like an email with multiple attachments, which enables you to get multiple components in an HTTP request (remember: HTTP requests are extravagant). When you use this rule, first determine whether the user agent is supported (iphone is not supported).

Yahoo! ~