Excerpt from: http://www.cnblogs.com/chenxizhang/archive/2013/05/20/3088196.html
Overview
Actually want to write this article long-standing, the idea of this series is to refer to the Yahoo team to provide 35 performance optimization best practices (in fact, the earliest time is 14), combined with my own years of practical work experience, combined with specific development platform (ASP), to provide readers with both theoretical knowledge, There is also a practical guide to the reference, for optimization, itself is a long-term meticulous work (no so-called silver bullets), and weigh the pros and cons, choose the most suitable for their project situation solution. To achieve such a goal, you need to optimize the site design has a more systematic understanding, know it, but also know why, and then can skillfully use them.
I began writing this series from April 30, to this day (May 20) have all finished, the main use of holidays, weekends and night time, although relatively hard, but I think the quality of this series is my best so far, and no doubt, I have reason to take this opportunity to thank my family for their support.
In this process, I also know about the knowledge of the new, so that personal harvest is very large, if it can be helpful to the reader, it is no better.
Guide
The content organization of this series maintains the structure of the 35 principles proposed by the Yahoo team in the year, so that everyone can learn by comparison. It is worth saying that although these documents refer to the original text, but not to the original translation, more is to add some of my ideas and interpretation, some places may also have a different description of the original.
- Optimize website Design (i): Reduce the number of requests
- Optimize website Design (ii): Using CDN
- Optimize website Design (iii): Add cache control to resources
- Optimize Web site design (iv): Enable compression on resources
- Optimizing Web Site Design (v): Placing style definitions at the top
- Optimize website Design (vi): Place script definitions or references at the bottom of the document
- Optimize Web site design (vii): Avoid using expressions in CSS
- Optimizing Web Site Design (eight): Referencing script files and style sheets as external files
- Optimize website Design (ix): Reduce the number of DNS lookups
- Optimize website Design (10): Minimize JavaScript and CSS
- Optimize website Design (11): Avoid redirects
- Optimize Web site design (12): Delete duplicate scripts
- Optimize website Design (13): Configure Etags
- Optimize Web site design (14): Make Ajax calls as far as possible using caching features
- Optimize Web site design (15): Send buffer content as early as possible
- Optimize Web site design (16): Use the Get method for Ajax requests
- Optimize Web site design (17): Load content with delay or on demand
- Optimize website Design (18): Preload content
- Optimize Web site design (19): Reduce the number of DOM elements
- Optimize Web site design (20): Use multiple hosts to balance the load
- Optimize website Design (21): Use less IFRAME as much as possible
- Optimize website Design (22): Avoid 404 errors
- Optimize website Design (23): Reduce the volume of cookies
- Optimize website Design (24): Reduce the use of cookies by using different hosts
- Optimize Web site design (25): Avoid excessive manipulation of DOM elements
- Optimize Web site design (26): Design "intelligent" event handlers
- Optimize website Design (27): Import style sheets using link instead of @import
- Optimize website Design (28): Avoid using filters (filters)
- Optimize website Design (29): Optimize picture
- Optimize Web site design (30): Optimize CSS Sprites
- Optimize website Design (31): Do not scale the picture in the page
- Optimize Web site design (32): Make the Favicon.ico file as small as possible and can be cached
- Optimize website Design (33): Try to make a single content size less than 25KB
- Optimize Web site design (34): Package components directly to a page
- Optimize Web site design (35): Avoid setting the SRC attribute of img to blank
Weigh
I have repeatedly mentioned the tradeoff, as an architect was asked, "What is the best architecture?" The most plausible answer to this question might really be "this depends" (although the answer may seem a bit like diplomatic), because there are a lot of techniques, there are many architectures, and no architecture is appropriate for all business scenarios.
In the same vein, we have mentioned a number of principles, each of which has its own focus. It is clear that they may also be in conflict with each other. So, what does this mean? Does this mean that these principles are unreasonable? Of course not, just on the contrary, it is reasonable.
To help you better understand the relationship between these principles, or whether they are mutually exclusive or complementary, I have compiled a form as follows for your reference.
The principle of red marking in the figure is that it is more or less mutually exclusive. In the face of these principles, you need to take into account other principles, the two evils of the right to light, make the most suitable for your actual situation of choice.
If no color is identified, the identification of these principles is complementary, or at least does not conflict.
Tools
When I write this series of articles, I use the following tools
- Development tools: Visual Studio 2012. I use 2012, but if I want to do the exercises, there are 2010 of them.
- Http://www.microsoft.com/visualstudio/chs/downloads
- Debugging Tools:
- Fiddler:: Http://fiddler2.com/home This is a standalone network testing and debugging tool.
- IE comes with the development tool (through F12): I use IE 10, preferably you have at least IE 9. http://msdn.microsoft.com/en-us/library/ie/gg589507 (v=vs.85). aspx
- Chrome's own development tool (via F12): Use the latest version. https://developers.google.com/chrome-developer-tools/
- YSlow plugins installed in Chrome: Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
- For more information about YSlow (including scoring rules, etc.), please refer to: http://yslow.org/ruleset-matrix/
- Google itself has also developed a similar plugin (function very much like): Page Speed Insights Https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo /gplegfbjlmmehdoakndmohflojccocli
Finally, I hope this series of articles will help you a bit!