Firefox's 34 military (front-end performance optimization)

Performance Optimization: 1. Stability 2. Extensibility 3. Optimization Yelow:chrome F12 NetWork requires experience firefox YSLow Yahoo Install plugin must have Firebug Firefox after 3.6 is not compatible with the tag Yslow.org/mobile cannot detect HTTPS protocol URLs we have no effect on tools: learning Things Yahoo gives a detailed description of the 34 rules that optimize the loading speed of the website (including the YSlow rule 22), and download the translation of the forwarded ponytail (from the Palanga image). 1. Reduce HTTP requestsImages, CSS, script, Flash, and so on all increase the number of HTTP requests, reducing the number of these elements to reduce response time. The multiple JS, CSS in the possible case of writing into a file, the page directly written to the picture is not good practice, it should be written into the CSS, using CSS sprites to use the background to locate the small image. 2. Leveraging CDN TechnologyCDN is really a good thing, 8 over the server provider of this service is generally charged, I used to buy the domestic space there is this but I did not know what to use, now no ... 3. Set header file expiration or static cacheThe browser will use the cache to reduce the number of HTTP requests to speed up page loading time, if the page header with a long expiration time, the browser will always cache the elements in the page. However, if the contents of the page will change the name, otherwise the user will not be active refresh, look at their own measurement ~ This can be done by modifying the. htaccess file. 4.Gzip CompressionGzip format is a very popular compression technology, almost all browsers have the ability to unzip the gzip format, and it can compress the proportion is very large, the general compression rate of 85%. Compression is not compressed, you can do the next test here. 5. Put the CSS on topAllow the browser to see the full style of the site as early as possible. 6. Put JS on the bottomAfter the site has been rendered, the function settings, of course, these JS to your loading process does not affect the performance of the content. 7. Avoid CSS ExpressionsCSS expression is very scary, this is only supported by IE, the operation of the execution time is very large, you move the mouse it will be recalculated, but sometimes in order to do browser compatibility must use this | | | IE6 to Die! ~ 8. Add JS and CSS outside the chain (NO)In front of the cache this thing, some of the more common JS and CSS, we can use the form of the chain, for example, I am from Google outside the chain of jquery files, if my browser in the browsing of other websites using this external link file has downloaded and cached this file, Then he doesn't need to download it when he's browsing my website! ~ 9. Reduce DNS lookups (NO)It seems to be to reduce the site from the external call resources, my Google Analytics and Picasa outside the chain of images are counted inside. 10. Reduce the volume of JS and CSSWrite JS and CSS are skilled, with the least code to achieve the same function, reduce whitespace, enhance logic, abbreviated way, and of course, there are many tools can also help you achieve this. 11. Avoid redirectsWhen you write the link again, although the "http://www. Today-s-ooxx. com "and" http://www. Today-s-ooxx. com/"Only one Last"/"only difference, but the result is different, the server needs to take the time to redirect the former and then jump, this to their own attention, can also be in Apache with alias or mod_rewrite or Directoryslash solution. 12. Delete Duplicate ScriptsRepeated calls to the Code browser do not recognize the ignore, but will be again the operation again, which is of course a big waste. 13. Configuration Etags (NO)I don't know what the hell is going on, anyway. It was removed in the htaccess. 14. Cache Ajax (NO)Ajax is a real-time response, and the old data is cached before the browser receives the new data, which can improve efficiency. 15. Early release buffer (NO)When a user makes a page request, the server takes 200 to 500 milliseconds to flatten the HTML, writes between the head and body, releases the buffer, and then sends the file header before sending the file content to improve efficiency. 16. Make AJAX requests in Get modeThe Get method interacts with the server only once (sending data), and the Post is two times (sending the header and then sending the data). 17. Delay Loading ComponentsFirst load the necessary components for page initialization, and then load the other, YUI Image Loaderis a good example. 18. Pre-loaded ComponentsThings that might be used later in the load are not conflicting with deferred loading, and it is intended to provide a quicker response to subsequent requests, see the CSS Sprites app on the Google home page. 19. Reduce the number of DOM elementsComplex page structure means longer download and response times, more reasonable and more efficient use of tags to structure the page, is a good front-end prerequisite. 20. Separating components across domainsMultiple sources of page components can increase your parallel downloads, but be careful not to do too much, with more than 2-4 domain names causing the DNS lookup waste mentioned above. 21. Reduce the number of IFRAMEMore effective use of ifames is needed. IFRAME Advantages: Facilitates download of slow ads and other third-party content, security sandbox, parallel download script iframe disadvantage: Even if empty, there will be a large resource consumption, will prevent the page onload, non-semantic 22. Do not show 404 pagesThere are 404 pages in the site itself (non-search results), and meaningless 404 pages can affect the user experience and consume server resources. 23. Reduce CookiesThe cookie is exchanged between the server and the browser through the file header, minimizing the cookie volume and setting a reasonable expiration time, which can improve the efficiency. 24. Use a non-cookie-free domain for the componentCookie reading of static components is a waste of a good way to store your static components using another cookie-free domain name, or you can store only domain names with www in the cookie. 25. Reduce the number of DOM accessesJS access to the DOM is very slow, try not to use JS to set the page layout. 26. Develop flexible event handling handlesIf too many elements on the DOM tree are added to the event handle, the reaction efficiency will certainly be low, and the Yui event tool has a onavailable method to help you set the DOM event handle flexibly. 27. Use < link > not @importUsing @import in IE is just like < link > at the bottom of the page, we said to put < link > top. 28. Avoid the use of filtersIf alpha transparency is required, do not use alphaimageloader, it is inefficient and only applies to versions IE6 and below. with PNG8 pictures。 If you have to use, plus _filter to avoid affecting ie7+User. 29. Picture OptimizationTurning your GIF into PNG8 is a great way to reduce volume, and there are a number of ways to work with your JPG and PNG images to achieve optimal results. Optimize css Sprites optimizing CSS SpritesIn the CSS sprites vertical and as close as possible to arrange the picture, as far as possible color similar pictures together, will reduce the size of the image itself and improve the speed of the page image display. 31. Do not scale the picture in HTMLHow big the picture to use how big, 1000x1000 picture is width= "100″height=" 100″, the KB number of itself is not reduced. Make Favicon. ICO Small and cacheable reduce favicon. ICO size and cache the browser of its site ICO should not often change it, it will be cached for a long time, and preferably under 1K control. 33. Ensure that the components are below 25Kiphone cannot cache more than 25K of components, and this is still before being compressed. 34. Package components into a multi-part documentJust like adding an attachment to a message, an HTTP request is enough, but this technology needs to ensure that your proxy support is not supported by the iphone.

Firefox's 34 military (front-end performance optimization)