14 Yahoo (yahoo) 14 optimization principle "turn"

Please everyone can study hard, do not like me as a sweep over, good to write down! Not only know some CSS xhtml is good, deep understanding of a lot of things need to learn. Very early use Firebug, but have not heard of Yslow, this is called do not like the pursuit. Hope that everyone concerned about the front-end design, more pursuit.

Interested students can install a Firebug under the Yslow, test their own website.

WEB Application Performance optimization Golden rule: Optimize the performance of the Front End program (front-end) first, as this is the cost of 80% or more of the end-user response time.

Law1: ReduceNumber of HTTP requests
80% of end-user response time is spent on front-end programs, and most of the time is spent on various page elements like, stylesheets, scripts, andOn the download of Flash and so on. Reducing the page elements will reduceThe number of HTTP requests. This is the key to quickly displaying the page. One way to reduce the number of page elements is to simplify page design. But is there any other way to achieve both rich content and fast response times? Here are some of these techniques:Image maps combined, multiple images into one picture. The total file size varies a little, but reduces theThe number of HTTP requests speeds up the page display. This method is only suitable for continuous picture, and the definition of coordinates is a tedious and error-prone job.CSS Sprites is a better approach. It can combine pictures in a page into a single file, and use theof CSS background-image  and  background-position  properties to realistic desired portions of the picture.  inline images  use  data:url scheme  to embed images in the page. This will increase the size of the html file. Combining  inline images  to your (cache) style sheet is less http requests and avoids increased html file size method.  combined files  reduce the number of http  requests by combining multiple script files into a single file. Styles   Tables can also be handled in a similar way.   Although this method is simple, it has not been used on a large scale. Each page of the U.S. website has an average of 7 script files and http requests is the starting point for performance tuning. This is an important factor in maximizing the efficiency of first-time visits.  tenni theurer  article  browser Cache usage–exposed! description, 40-60%  daily access is the first visit, so accelerating page access for first time visitors is the key to the user experience.

Rule 2: Using a CDN (content Delivery Network, distribution networks )

The proximity of the user to the Web server also has a significant impact on response time. From a user perspective, deploying content to multiple geographically dispersed servers will effectively increase page loading speed. But where should we start?

As the first step in achieving the geographic distribution of content, do not attempt to refactorWeb applications to accommodate distributed architectures. Changing the schema will result in multiple recurring tasks, such as synchronizingsession state to replicate database transactions between multiple servers. This attempt to shorten the user-to-content distance may be delayed or blocked by the application schema revision. We also remember that 80-90% 's end-user response time was spent on various elements of the download page, such as files, stylesheets, scripts, and Flash. Instead of the difficult task of refactoring the system, it is better to distribute the static content first. This not only greatly reduces the response time, but also due to the existence of CDN, the distribution of static content is very easy to implement. A CDN is a collection of geographically distributed Web servers that you use to publish content more efficiently. Web server is typically selected for specific user services based on the proximity of the network . Some large websites have their own CDN, but services such as Akamai Technologies, Mirror Image Internet, or Limelight Networks will be zoned It's counted. In Yahoo!, the distribution of static content to the CDN reduced user Impact time by 20% or more. Switching to a CDN code modification is easy, but it can improve the speed of the website.

Law3: IncreaseExpires Header
Web content is becoming richer, meaning more script files, style sheets, image files, and flash.   First-time visitors will have to face multiple http requests, but by using expires header,  you can cache these elements on the client. This avoids unnecessary http requests in subsequent visits.  expires header  is most commonly used in image files, but it should also be used for script files, style sheets, and  flash.   Browsers (and proxies) use caching to reduce the number and size of http  requests, allowing the Web page to load faster.  web server  through  expires header  tells the client how long an element can be cached.   If the server is apache , you can use expiresdefault  to set an expiration date based on the current date, such as: Span lang= "en-US" > expiresdefault "Access plus years"   set expiration time for 10  year from the time of request. Keep in mind that if you use an extremely long expiration time, you must modify the file name when the content changes.   in  yahoo! We often change our name as a step of  release : The version number is embedded in the file name, such as  yahoo_2.0.6.js.

Rule 4: Compress page elements
Reduce page response time by compressing HTTP response content. starting with http/1.1, theWeb client uses the accept-encoding header in the HTTP request to indicate the supported compression types, such as:

Accept-encoding:gzip, deflate. IfWeb Server checks toAccept-encoding header, it uses a client-supported method to compressThe HTTP response will be setContent-encoding head, such as:content-encoding:gzip.  gzip  is currently the most popular and effective compression method.   Other ways such as  deflate, but it is less effective and not popular. by  gzip, the content can generally be reduced  70%. If  apache, use lang= > 1.3  "en-us"  mod version   _gzip  module, and in  2.x  version, you need to use  mod_deflate.  web server  determines whether compression is based on the file type.   Most websites compress  html  files.   But   compression of script files and style sheets is also worthwhile. In fact, it is worthwhile to compress task text information including  xml  and  json .   Image files and  pdf  files should not be compressed because they are saved in a compressed format. Compressing them not only wastes  cpu, but it may also increase the size of the   file.   Therefore, compressing as many file types as possible is a simple   easy way to reduce page size and improve the user experience.

Rule 5: Put the style sheet on your head
We found that moving the stylesheet to the Head section can improve the loading speed of the interface, so that the page elements can be displayed sequentially. In many browsers, such as IE, the problem with putting stylesheets at the bottom of document is that it prohibits the order of Web content from appearing. The browser prevents the display from redrawing the page elements, and the user sees only the blank pages. Firefox does not block the display, but this means that some page elements may need to be redrawn when the stylesheet is downloaded, which causes flicker problems. The HTML specification explicitly requires that the style sheet be defined in the head, so to avoid blank screen or flicker problems, the best way is to follow the HTML specification and place the stylesheet in the head.

Law 6: Place the script file at the bottom
As with the style file, we need to be aware of the location of the script file.   We need to put them at the bottom of the page as much as possible, in order to display sequentially, the other side can achieve the largest parallel download. The   browser blocks the display until the stylesheet is downloaded, so we need to place the stylesheet in the  head section.   for scripts, the sequential display of the content behind the script will be blocked, so putting the script as far as possible at the bottom means more content can be displayed quickly. The second problem that the   script causes is that it blocks the number of concurrent downloads. http/1.1  specification recommends that browsers do not exceed 2  for each host in parallel downloads.   Therefore, if you distribute the image files across multiple machines, you can achieve a parallel download of more than document.write  method to insert the page content.   There may be problems with the domain as well.   But in many cases, there are some ways.   An alternative approach is to use deferred scripting (deferred script). defer  property indicates that the script does not contain  document.write, indicating that the browser engraving continues to display. Unfortunately, the firefox  does not support defer  properties.  ie, the script may be deferred, but not necessarily the long delay required.   But from a different perspective, if the foot instinct is delayed, it can be placed at the bottom.

Rule 7: avoid CSS expressions
CSS expressions are powerful (and dangerous ) ways to dynamically set CSS properties. ie supports CSS expressions starting with version 5, such as backgourd-color:expression (New Date ()). GetHours ()%2? " #B8D4FF ":" #F08A00 "), that is, the background color is toggled every hour. the problem with CSS expressions is that they perform more frequently than most people expect. Expressions are evaluated not only when the page is displayed and resize, but also when the page scrolls, even when the mouse moves on the page. One way to reduce the number of times a CSS expression executes is one-time expression, which is to replace an expression with a definite value when it is first executed. If you must set it dynamically, you can use the event handler function instead. If you must use CSS expressions, keep in mind that they can be executed thousands of thousand of the way, affecting page performance.

Rule 8: Put JavaScript and css in an external file

javascript  and css should be included in an external file or in a paging file? In the real world, using external files can speed up page display because external files are cached by the browser. If the built-in javascript  and  css  in the page, although the http requests are reduced , but it increases the size of the page.   On the other hand, using external files will be cached by the browser, and the page size will be reduced without increasing the number of  http  requests.   Therefore, in general, external files are a more feasible way.   The only exception is that inline is more efficient for the home page, such as yahoo! and my Yahoo! all using inline mode. In general, in a  session, the home page access is less so that the inline approach can achieve faster user response times.

Rule 9: Reduce the number of DNS queries
DNS is used to map host names and IP addresses, typically requiring 20~ of 120 milliseconds for a single resolution. To achieve higher performance,DNS resolution is typically cached in multiple levels, such as caching server maintained by an ISP or LAN , caching of Local machine operating systems (such as DNS Client on Windows) Service) The default DNS cache time for the browser is 30 minutes, andthe default buffer time for Firefox is 1 minutes. ie reducing the hostname can reduce the number of DNS queries, but may result in a reduction in the number of concurrent downloads. Avoiding DNS queries can reduce response time, while reducing the number of concurrent downloads can increase response time. A viable compromise is to distribute the content to at least 2, up to 4 different hostnames.

Rule 10: Minimize JavaScript code

minimized javascript code refers to the deletion of unnecessary characters in JS code, thus reducing download time.   Two popular tools are jsmin  and yui Compressor.   Obfuscation is the alternative to minimizing the source code.   as minimized, it reduces the source size by removing comments and spaces, and it can also obfuscate the code.   As part of the confusion, function names and variable names are replaced with short strings, which makes the code more compact and more difficult to read, making it difficult to reverse engineer. dojo Compressor (Shrinksafe) is the most common obfuscation tool.   Minimization is a safe, straightforward process, and confusion is more complex and prone to problems. From the survey of 10 large web site, by minimizing the file can reduce the  21%, and confusion can reduce 25%.   In addition to minimizing external script files, embedded script code should also be minimized.   Even if the script according to the law 4 is compressed after transmission, minimized script engraving reduces file size  5% or higher.

Rule 11: avoid redirection
Redirection is done with 301 and 302 of these two HTTP status codes, such as:http/1.1 301 Moved Permanently Location:http://example.com/newuri content-type:text/html Browser Automatic redirect requests to the URL specified by Location , the main issue of redirection is to reduce the user experience. One of the most resource-intensive, frequently occurring, and easily overlooked redirects is the last missing URL, such as Access http://astrology.yahoo.com/astrology will be redirected to

http://astrology.yahoo.com/astrology/. under Apache, you can solve this problem by using Alias,mod_rewrite, or directoryslash.

Rule 12: Delete duplicate script files
Including duplicate JS script files on one page can affect performance, that is, it will create unnecessary HTTP requests and additional JS execution. Unnecessary HTTP requests occur under IE, and Firefox does not generate extra HTTP requests. Additional JS execution, whether under ie, or under Firefox, will occur. One way to avoid duplicate script files is to use a template system to build a script management module. In addition to preventing duplicate script files, the module can also implement dependency checking and add version numbers to the script file name, allowing for an extremely long expiration time.

Law13: ConfigurationEtags
Etags is used to determine whether the elements in the browser cache areThe elements in Web server match the mechanism, which is more thanLast-modified date is a more flexible element validation mechanism.The ETag is a string that uniquely represents the version of the element, which needs to be included in the quotation marks.The WEB server firstspecified in responseETag:http/1.1 OK < 03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f "content-length:12195 later, if the browser needs to validate an element, it usesIf-none-match Head backhaul etag  to  web server if  etag  match , the server returns 304 code, saving download time: get/i/yahoo.gif http/1.1 Host:us.yimg.com < 03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f "http/1.1 304 not Modified etags  The problem is that they are constructed based on certain attributes of server uniqueness, such as  apache1.3 and  2.x, in the format  inode-size-timestamp, and in the Span lang= "en-us" > iis5.0  and  6.0  in the format filetimestamp: ChangeNumber. So the same element on different  web server , its  etag  is not the same. In this way, in a multi- web server  Environment, the browser first from  server1  request a   element, and later to the Span lang= "en-US" >server2  validates the element, because  etag  differently, so the cache fails and must be re-  downloaded.

Therefore, if you do not use the flexible authentication mechanism provided by the etags system, it is best to remove the ETag. Deleting The ETag reduces the HTTP response and the size of the HTTP headers for subsequent requests. Microsoft Support article describes how to delete etags, and under Apache, just set Fileetag none in the configuration file .

Rule 14: Cache Ajax
The principle of performance optimization also applies to Web 2.0 applications. The most important way to improve the performance of Ajax is to make it response cacheable, as discussed in the "Rule 3" add Expires Header. The following other rules apply to Ajax, of course, "rule 3" is the most effective way :

14 Yahoo (yahoo) 14 optimization principle "turn"