Pages 14 to accelerate the optimization of the rules

Rule 1. To reduce the number of HTTP requests

80% of the end-user response time spent on front-end process, but most of their time is spent on the various page elements, such as images, style sheets, scripts, and Flash, etc. of the download. To reduce the page elements will be reduced the number of HTTP requests. Express This is the key to display the page.

A reduction in the number of page element method is to simplify the page design. However, the existence of other means, to ensure the availability of rich content, but also to obtain fast response time? The following are some such techniques:

Image maps combine multiple images into one picture. Little change in the total file size, but reduced the number of HTTP requests so as to speed up the page display speed. The approach is only suitable for the situation picture; At the same time, the definition of the coordinates are annoying also error-prone work.

CSS Sprites are better ways. It can be combined page picture into a single document, and use CSS's background-image and background-position property to the reality part of the required picture.

Inline images use the data: URL scheme to embed in the page image. This will increase the size of HTML documents. Portfolio inline images into your (cached) stylesheets are not only fewer HTTP requests, but also to avoid increasing the size of HTML documents Ways.

Combined files through the combination of multiple script files into a single document to reduce the number of HTTP requests. Stylesheet treatment may also have recourse to similar methods. This method is simple, but did not receive large-scale use. 10 The United States Web site has seven per page average script file and the two style sheets. When the page between the scripts and style sheets changed greatly, the way will be faced with great challenges, but if so, will be able to speed up response time.

<o:p> </ o: p>

Reduce the number of HTTP requests are the starting point for performance optimization. This is the most improve the efficiency of the first visit to play a very important role. Tenni Theurer, according to the article Browser Cache Usage - Exposed! Described ,40-60% of the day-to-day visit is the first visit, so for the first time visitor to accelerate the speed of page views are the key to user experience.

Rule 2. The use of CDN (Content Delivery Network, Content Distribution Network)

Users from the web server response time for the distance also has a significant impact. From the user point of view, put the contents of the deployment to multiple geographically dispersed servers will effectively improve the speed of page loading. However, where the start?

As the first step in the geographical distribution of content and not try to remodeling to adapt to the distribution of web application architecture. Change the architecture will lead to a number of periodic tasks, such as synchronization session state replication in a number of database transactions between the server. This shortened distance between the user and the content of the application architecture may be trying to change the delay, or prevent.

We also remember that 80-90% of the end-user response time spent on the download page on the various elements, such as image files, style sheets, scripts, and Flash. Reconfigurable System with its spent on this difficult task, not as good as the first distribution of static content. This is not only able to significantly reduce the response time, but also because of the existence of CDN, the distribution of static content is easy to achieve.

CDN is the geographical distribution of a collection of web server for more efficient distribution of content. Usually Web-based distance to give specific users to select services web server.

Some large sites have their own CDN, but the use of such as Akamai Technologies, Mirror Image Internet, or Limelight Networks and other service providers CDN services will be cost-effective. At Yahoo! Put static content distribution to the CDN to reduce the impact of time users 20% or more. Switch to CDN code modifications are very easy job, but can improve the speed of the site.

Rule 3. Increase Expires Header

Web content is becoming more and more rich, which means that more script files, style sheets, image files and Flash. The first time, visitors will have to face multiple HTTP requests, but by using the Expires header, you can cache on the client these elements. This follow-up visits to avoid unnecessary HTTP requests. Expires header is most commonly used image files, but it should also be used in script files, style sheets, and Flash.

Browser (and agent) the use of cache to reduce the number of HTTP requests and size makes web pages to speed up loading. Web server through the Expires header to tell the client can cache an element length of time.

If the server is Apache, you can use ExpiresDefault based on the current date to set the expiration date, such as:

ExpiresDefault "access plus 10 years" Set expiration time of the request time from the start of 10 years.

Please remember, if you use the expired long time, then when the content changes, you must modify the file name. At Yahoo! We often put renamed as the release of a step: the version number embedded in the file name, such as yahoo_ <st1: chsdate w: st = "on" isrocdate = "False" islunardate = "False" day = "30" month = "12" year = "1899"> 2.0.6 </ st1: chsdate>. js.

Rule 4. Compressed page elements

Through the HTTP response content can be compressed to reduce page response time. HTTP/1.1 started from, web at HTTP client request through the Accept-Encoding header to indicate support for compression type, such as:

Accept-Encoding: gzip, deflate.

If the Web server checks the Accept-Encoding header, it will support the use of client-side method to compress HTTP response, will set up a Content-Encoding header, such as: Content-Encoding: gzip.

Gzip is the most popular and effective compression method. Other ways such as deflate, but it is less effective, but also not popular. Through Gzip, content in general can be reduced by 70%. If it is Apache, version 1.3 under the need to use mod_gzip module, and in the 2.x version, the need to use mod_deflate.

Web server under the file type to decide whether or not compressed. Most sites on the HTML file compression. But the script files and style sheets for compression is worthwhile. In fact, including XML and JSON mission, including compressed text information are worth it. Image files and PDF files should not be compressed, because they were originally saved in compressed format. They are compressed, not only a waste of CPU, but also may increase the file size.

Therefore, as many as possible to compress the file type is a reduction in page size and improve the user experience simple way.

Rule 5. Stylesheet put on the head

We found that the style sheet can be moved to HEAD improve loading speed interface, so this makes page elements can appear in the order.

At a lot of browsers, such as IE, put on the document style sheet at the bottom of the problem lies in its prohibition of the order of the contents of a web page display. Block the display of the browser in order to avoid re-draw the page element, then the user can only see a blank page. Firefox will not prevent the show, but this means that when style sheet after the download, some page elements may need to re-draw, which leads to flickering problem.

HTML specification explicitly requested style sheet is defined in the HEAD, so, in order to avoid a blank screen or a blinking question, the best way is follow the HTML specification, the style sheet placed in the HEAD.

Rule 6. Put on the bottom of script file

Documents with the same style, we need to pay attention to the script file. We need to try to put them on the bottom of the page, so that can appear in the order on the one hand, on the other hand, can achieve the maximum parallel download.

Browser will display until the style sheet obstructive download has finished, so we need to put some style sheet on the HEAD. As for the script, the script appear in the order behind the content will be blocked, so try to put the script on the bottom means more content can be quickly displayed.

Scripts arising from the second problem is that it blocking parallel download quantity. HTTP/1.1 specification recommends that the browser for each host a number of parallel download is not more than two. So if you put the distribution of image files to multiple machines, you can achieve more than two parallel download. But when the script file download, the browser will not start other parallel download, and even in other host download do not start.

In some cases, not very easy to put a script at the bottom. For example, the script uses document.write method to insert the page content. May also exist at the same time the problem domain. However, in many cases, there are some methods.

An alternative approach is to use deferred scripts (deferred script). Defer indicates that the script does not contain a property document.write, instructions engraved browser continue to show. Unfortunately, Firefox does not support the Defer property. In IE, the script may be delayed, but not necessarily be required for long delays. But from another perspective, if the script can be delayed, then it can be placed at the bottom of the.

Rule 7. To avoid CSS expressions

CSS expressions are a powerful (and dangerous) for the dynamic way of setting CSS property. IE, from version 5 to start to support the CSS expressions, such as backgourd-color: expression ((new Date ()). GetHours ()% 2? "# B8D4FF": "# F <st1: chmetcnv w: st =" on " tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "8" unitname = "a"> 08A </ st1: chmetcnv> <st1: chmetcnv w: st = "on" tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "0" unitname ="""> 00 "</ st1: chmetcnv>), that is, to switch the background color once every hour.

CSS expressions are questions over the implementation of most people's expectations. Not only resize when the page display and calculation of expression, and when the page scroll, even when the mouse moves on the page will be re-evaluating the expression.

A reduction in the number of CSS expression to implement the method is a one-time expression, that is, when the first implementation on the specific values in place of expression. If you have to dynamically set up, it can function in lieu of the use of case treatment. If you must use CSS expressions, please keep in mind they may be executed thousands of times, thus affecting the performance page.

Rule 8. Put JavaScript and CSS into external files

A lot of performance optimization of these rules are based on the optimization of the external file. Now, we must ask a question: JavaScript and CSS should be included in the external file, or the page file?

In the real world, the use of an external file will speed up the page display speed, because the external file will be your browser cache. If the built-in JavaScript and CSS in the page although it will reduce the number of HTTP requests, but increases the size of the page. The other hand, the use of external documents, will be the browser cache, the page size will be reduced without increasing the number of HTTP requests.

Therefore, in general, external documents are more workable. The only exception is embedded on the home page more effective, such as Yahoo! And My Yahoo! Using embedded mode. Generally speaking, in a session, the home visit at this time less, so embedded in the way users can get a faster response time.

Rule 9. To reduce the number of DNS queries

DNS for mapping host names and IP addresses, generally required to resolve a 20 ~ 120 ms. In order to achieve higher performance, DNS Resolution is usually to many level cache, such as by the ISP or local area network to safeguard the caching server, local machine operating system cache (such as windows on the DNS Client Service), browser. IE's default DNS cache time is 30 minutes, Firefox's default buffer time is 1 minute.

Reducing the host name can reduce the number of DNS queries, but may result in the reduction of the number of parallel download. Avoid DNS query response time can be reduced, and less likely to increase the number of parallel download response time. One possible compromise is to put content distribution to at least two, a maximum of four different host name on.

Rule 10. Minimization JavaScript code

Minimize JavaScript code in the JS code means delete unnecessary characters, thereby reducing download time. Two popular tools are JSMin and YUI Compressor.

Confusion is the smallest of the options in the source. As to minimize the same, it by removing comments and spaces to reduce the source size, at the same time it can also deal with the code confusing. As part of confusion, function names and variable names have been replaced by a short string, which makes the code more compact, but also more difficult to read, making it difficult to be reverse engineering. Dojo Compressor (ShrinkSafe) are the most common tool of confusion.

The smallest is safe, straightforward process, and the confusion is even more complex and prone to question. From 10 large American site survey, by minimizing, documents can be reduced 21 percent, and the confusion can be reduced by 25%.

In addition to minimizing the external script file, the embedded script code should be minimized. Even if the script has been compressed in accordance with rule 4, after transmission, to minimize file size reduction script carved 5 percent or higher.

Rule 11. To avoid redirection

Redirect function is through the 301 and 302 of these two HTTP status code completion, such as:

HTTP/1.1 301 Moved Permanently Location: Content-Type: text / html <o:p> </ o: p>

Browser automatically redirects the request to the Location specified URL, the redirection of the main problems is to reduce the user experience.

One of the most expensive resources, and can easily happen often neglected redirect URL's are Finally the lack of /, such as access / astrology will be redirected to / astrology /. At Apache, we can through the Alias, mod_rewrite or DirectorySlash such means to solve the problem.

Rule 12. Delete duplicate script file

At a page contains duplicate JS script file will affect the performance, that is, it will set up unnecessary HTTP requests and the implementation of extra JS.

Unnecessary HTTP requests happen at the next IE, and Firefox does not produce extra HTTP request. Extra JS implementation, whether at the next IE or Firefox, there will happen.

A script to avoid duplication of papers is to use the template system to set up a script management module. Apart from the script file to avoid duplication, the module can also check the implementation-dependent and increased version number to the script file name in order to achieve long time overdue.

Rule 13. ETags configuration

ETags are used to determine the elements in the browser cache with the Web server that matches the elements of the mechanism, it is than the last-modified date element of a more flexible authentication mechanisms. ETag are used to express elements of the only version of the string, it need to be included in quotation marks. Web server specified in the first response at ETag:

HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "<st1: chmetcnv w: st =" on "tcsc =" 0 "numbertype =" 1 "negative =" False "hasspace = "False" sourcevalue = "10" unitname = "C"> 10c </ st1: chmetcnv> 24bc-4ab-457e <st1: chmetcnv w: st = "on" tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "1" unitname = "C"> 1c </ st1: chmetcnv> <st1: chmetcnv w: st = "on" tcsc = "0" numbertype = "1" negative = " False "hasspace =" False "sourcevalue =" 1 "unitname =" F "> 1f </ st1: chmetcnv>" Content-Length: 12195 Later, the browser will need to verify if a certain element, which uses the If-None-Match header back Chuan ETag give Web server, if the ETag matches, the server return 304 code, thus saving download time:

GET / i / yahoo.gif HTTP/1.1 Host: If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "<st1: chmetcnv w: st =" on "tcsc =" 0 "numbertype =" 1 "negative =" False "hasspace =" False "sourcevalue =" 10 "unitname =" C "> 10c </ st1: chmetcnv> 24bc-4ab-457e <st1: chmetcnv w : st = "on" tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "1" unitname = "C"> 1c </ st1: chmetcnv> <st1: chmetcnv w: st = "on" tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "1" unitname = "F"> 1f </ st1: chmetcnv> "HTTP/1.1 304 Not Modified <o:p> </ o: p>

ETags the problem is that they are the only server-based structure of certain property, such as Apache1.3 and 2.x, its format is inode-size-timestamp, and in IIS5.0 and 6.0, its format is Filetimestamp: ChangeNumber. So the same elements in different web server, its ETag is not the same. This Web server in many circumstances, the browser requests a certain element from server1, server2 later to verify that the element, because different ETag, Cache Invalidation therefore need to re-download.

Therefore, if you do not use ETags system provides a flexible authentication mechanism, it is best to delete ETag. Delete ETag will reduce the http response and follow-up to the HTTP request header size. Microsoft support article describes how to delete ETags, and in Apache, so long as in the configuration file settings can FileETag none.

Rule 14. Cached Ajax

Performance Optimization same rules apply to web 2.0 applications. Ajax improve the performance of the most important way is to make its response can be cached, like "Rule 3 increase Expires Header" as discussed. The following rules apply equally to other Ajax, of course, rule 3 is the most effective way.

分类:AJAX 时间:2009-03-13 人气:483
blog comments powered by Disqus


  • Effective style for the value of page elements 2010-04-10

    Second, if an element is 100 pixels high, to get to his current height, if you want the style properties can be obtained from 100px such accurate results, but sometimes it does not. This is because using inline css style sheets or style information b

  • Can not import, specify the script file is not registered. Your Registry Editor can only carry registration documents into two 2010-08-23

    Can not import, specify the script file is not registered. Your Registry Editor can only carry registration documents into two Right on the registration documents as long as the editor in the beginning with Windows Registry Editor Version 5.00

  • javascript sum (f) the creation of page elements and the associated adjustment 2010-03-31

    Catalog (1) the framework (b) file organization and code organizations (c) JS interact with FLASH (4) ajax partial refresh and RPC (E) for setting and monitoring elements of the event elements of style (F) the creation of page elements and the associ

  • Use Javascript to obtain the location of page elements 2010-09-07

    Use Javascript to obtain the location of page elements Author: Ruan Yifeng Date: September 14, 2009 The process of making web pages, you sometimes need to know an element's exact location on the page. Javascript tutorial below summarizes the position

  • Flex-based components of multi-file upload with engineering documents __ 2008-09-19

    Today, with the Flex achieved a similar gmail file upload component. First, a brief idea of this component is based on javascript and flex's, javascript page elements responsible for the generation, delete, and upload process control; flex to achieve

  • XSL XML content according to set style sheets (Reprinted) 2010-08-17

    Use Extensible Stylesheet Language Conversion (Extensible Stylesheet Language Transformation (XSLT)) is usually the XML data from one form into another form of the most convenient way, because it allows you great flexibility, without having to change

  • Selenium on rails test positioning page elements 2010-09-20

    Part comes in seleinum test, click on or type the form, if in a given html element can not be used within the within webrat syntax, however, if, if conditions in the ajax page element positioning and recognition, you can One is the text can be seleni

  • Selenium on rails test the positioning of page elements 2010-09-20

    Speaking of the article in the seleinum test, click on or type the form, if in a given html element can not be used within webrat the syntax, however, if, if the conditions in the ajax page elements to locate and confirm, you can One is the text can

  • Internal CSS style sheets used in HTML comment characters 2009-12-27

    CSS web design we are doing when often use internal style sheets, CSS code to be written in the html page <head> </ head> tags between, but I wonder if you ever noticed that we use the Dreamweaver web editor designed CSS style sheets within th

  • div + css style sheets used id and class naming rules 2010-04-05

    With div + CSS style sheets to write the page for some time, initially to write div + css style sheet when the headache is not the most let me how to write style, but rather to div + css style named, how to play it better? If on a few lines or severa

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 黔ICP备15002463号-1

processed in 0.476 (s). 14 q(s)