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. Rule 1. Reduce the number of HTTP requests80% of End-user response time is spent on front-end programs, and most of the time is spent on downloads of various page elements, such as stylesheets, scripts, and Flash. Reducing the page element will reduce the 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 Mapscombine multiple pictures into a single picture. The total file size does not change much, but it reduces the number of HTTP requests and speeds up page display. This method is only suitable for continuous picture, and the definition of coordinates is a tedious and error-prone job. CSS Spritesis the better way. It combines the pictures in the page into a single file, and uses the CSS's Background-image and Background-position properties to make a realistic picture of the desired part. inline images uses 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 a way to reduce HTTP requests and increase the size of your HTML files. Combined files reduces the number of HTTP requests by combining multiple script files into a single file. Style sheets can also be handled in a similar way. This method is simple, but it is not used on a large scale. The 10 largest U.S. websites have an average of 7 script files and 2 style sheets per page. When scripts and style sheets vary greatly between pages, this approach can be challenging, but if you do, you will be able to speed up response times. reducing the number of HTTP requests is the starting point for performance tuning. This is an important factor in maximizing the efficiency of first-time visits. According to Tenni Theurer's article browser the Cache usage-exposed! described, the daily visit of the biennial is the first visit, so speed up page access for first time visitors is the key to the user experience.
Our applications are:Foreign trade: The first page of the dozens of small icons merged into one, through the CSS control their display, reduce the number of HTTP requests.rule 2. Using CDN (Content Delivery Network, contents 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 a first step towards content geographic distribution, do not attempt to refactor the Web application to accommodate the distributed schema. Changing the schema will result in multiple recurring tasks, such as synchronizing session state and replicating 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 using CDN service providers such as Akamai Technologies, Mirror Image Internet, or Limelight networks will be a cost-effective service. 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.
Our applications are:At present, it is useless, but according to customers, Guangdong, Shandong and other network situation is poor, if you can occupy the main bandwidth of static resources through the CDN release, I believe that can greatly alleviate the current website access speed problems.Rule 3. Add expires HeaderWeb 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 the Expires header, you can cache these elements on the client. This avoids unnecessary HTTP requests in subsequent accesses. The Expires header is most commonly used in image files, but it should also be used for script files, stylesheets, and Flash. browsers (and proxies) use caching to reduce the number and size of HTTP requests, causing the page to load faster. Web server tells the client the length of time that an element can be cached through the expires header. if the server is Apache, you can use ExpiresDefault to set an expiration date based on the current date, such as:ExpiresDefault "Access plus years" sets the expiration time to 10 years from the request time. Keep in mind that if you use an extremely long expiration time, you must modify the file name when the content changes. At Yahoo! We often take the name change as a step of release: The version number is embedded in the file name, such as Yahoo_2.0.6.js.
Our applications are:Foreign trade: in Apache configured Js,css,image cache, if the static resources need to be updated, the use of modified file version number of the scheme to ensure that the client to obtain the latest version; e net hit: E Network hit the probe rule (JS) is based on customer settings generated, However, there is essentially no change over a long period of time, so add a expires response header while generating the rule, minimizing the number of client requests and probe rule generation.rule 4. Compress page ElementsReduce page response time by compressing HTTP response content. Starting with http/1.1, the Web client uses the Accept-encoding header in the HTTP request to indicate the supported compression types, such as:Accept-encoding:gzip, deflate.if the Web server checks to the accept-encoding header, it compresses the HTTP response using a method supported by the client and sets the content-encoding header, 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. With gzip, content can generally be reduced by 70%. In the case of Apache, the Mod_gzip module will be used under version 1.3, and in the 2.x version, you will need to use mod_deflate. Web Server determines whether or not to compress according to the file type. Most Web sites compress HTML files. However, it is worthwhile to compress script files and style sheets. 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 the CPU, but also increases the size of the file. Therefore, compressing as many file types as possible is a convenient way to reduce page size and improve the user experience.
Our applications are:Foreign trade, e Network dozen, K plan: More than 600 K ext2 package, is people will think to compress it, the effect of compression is good, only more than 150 K. In addition, JS, CSS, HTML also try to compress, to know that many of our customers are still using 1M ADSL.Rule 5. Put the style sheet on the headwe 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. HTML SpecificationIt is explicitly required that the stylesheet 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.
Our applications are:Don't you have a situation where you put the stylesheet behind a document?rule 6. Place the script file at the bottomAs with style files, we need to be aware of the location of the script files. 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 put the style sheet 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. The http/1.1 specification recommends that the browser do not have more than 2 concurrent downloads per host. So if you distribute the image files across multiple machines, you can reach more than 2 concurrent downloads. However, when the script file is downloaded, the browser does not start other parallel downloads, or even downloads from other hosts. in some cases, it is not easy to move the script to the bottom. For example, the script uses the Document.Write method to insert the page content. There may also be problems with the domain. In many cases, however, there are some ways to do it. An alternative approach is to use deferred scripting (deferred script). The Defer property indicates that the script does not contain document.write, indicating that the browser engraving continues to display. Unfortunately, Firefox does not support the defer property. In 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.
Our applications are:We may not have realized this before, but we have implemented this rule in our Xcube xui, believing that we can further improve the page's access performance.Rule 7: Avoid CSS expressionsCSS expressions are powerful (and dangerous) ways to dynamically set CSS properties. IE, starting from version 5, supports CSS expressions 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.
Our applications are:At present, the maintenance of CSS is mainly by the UI staff, they have tried to avoid this situation.Rule 8. Put JavaScript and CSS in an external fileMany of these performance optimization rules are optimized based on external files. Now, we have to ask a question: should JavaScript and CSS 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 will reduce the number of HTTP requests, but increase the size of the page. On the other hand, using an external file 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 the inline style is more effective for the home page, such as Yahoo! and my yahoo! are inline. In general, in a session, the home page access is less, so the inline mode can achieve faster user response time.
Our applications are:Foreign trade, e-net hit, K plan: Ext2 code has been very good guidance, the front-end developers are very attention to the package of client modules, reuse, as far as possible to improve the use of external JS code reuse, of course, should also be careful not to introduce excessive external resources, because this violates the law 1.
CSS packaging is also good, but mainly for the IE series of solutions, you can consider introducing Yaml, blueprint and other CSS framework, easy to solve the browser compatibility issues.Rule 9. Reduce the number of DNS queriesDNS is used to map host names and IP addresses, typically requiring 20~120 milliseconds for one parse. To achieve higher performance, DNS resolution is usually cached by multiple levels, such as the caching server maintained by the ISP or LAN, the cache of the local machine operating system (such as the DNS Client Service on Windows), the browser. The default DNS cache time for IE is 30 minutes, and the default buffer time for Firefox is 1 minutes. reducing the host name reduces 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.
Our applications are:Foreign trade: In order to circumvent the browser limit on the number of download threads, we have a static resource enabled multi-domain, but this violates the law. However, for Windows IE, the caching of DNS can alleviate the problem.rule 10. Minimize JavaScript codeminimizing JavaScript code means removing unnecessary characters in the JS code, reducing download time. Two popular tools are #jsmin and Yui Compressor. Confusion 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. According to the survey of the 10 major U.S. websites, the document can be reduced by 21% and the confusion reduced by 25% by minimizing it. in addition to minimizing external script files, embedded script code should also be minimized. Even if the script is compressed according to rule 4, the minimized script engraving reduces the file size by 5% or higher.
Our applications are:We do not use JS compression directly, but many of the components we use, such as ext2, jquery, etc., are already practicing the law for us.rule 11. Avoid redirectionRedirection is done through the two HTTP status codes of 301 and 302, such as:
http/1.1 301 Moved Permanently
Location:http://example.com/newuri
Content-type:text/html
The main problem with redirection is that the user experience is reduced when the browser automatically redirects the request to the URL specified by location. one of the most resource-intensive, frequently occurring, and easily overlooked redirects is the last missing of the 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 alias,mod_rewrite or Directoryslash.
Our applications are:Experienced SA has considered this issue for us, interested students can look at the online environment of the Apache configuration file: httpd.conf.rule 12. Delete duplicate script filesincluding 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.
Our applications are:The old version of the Xplatform in the problem is more serious, but believe that the new version of Xcube will not repeat.Rule 13. Configure EtagsEtags is a mechanism for determining whether elements in the browser cache match elements in a Web server, which is a more flexible element validation mechanism than Last-modified date. The ETag is a string that uniquely represents the version of the element, which needs to be included in the quotation marks. Web Server first specifies the ETag in response:
http/1.1 OK
Last-modified:tue, Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
content-length:12195
later, if the browser needs to validate an element, it uses the If-none-match header to return the ETag to the Web server, and if the ETag matches, the server returns 304 code, saving the download time:
Get/i/yahoo.gif http/1.1
Host:us.yimg.com
If-modified-since:tue, Dec 2006 03:03:59 GMT
If-none-match: "10c24bc-4ab-457e1c1f"
http/1.1 304 Not Modified
the problem with etags 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 IIS5.0 and 6.0, the format is Filetimestamp: ChangeNumber. So the same element on a different Web server, its etag is not the same. In this way, in a multi-Web server environment, the browser first requests an element from Server1, and later validates the element to Server2, because the etag is different, 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.
Our applications are:E-Network: Custom ETag generation strategy to minimize the number of probe rule generation. The problem does not exist because the server default etag is not used. Other product lines: Pay attention to this, we have not paid attention to it, quickly check the configuration in Apache.rule 14. Caching Ajaxthe 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 "Rule 3 adds expires Header". The following other laws apply to Ajax as well, and of course Rule 3 is the most effective way:rule 4. Compress page ElementsRule 9. Reduce the number of DNS queriesrule 10. Minimizing script filesrule 11. Avoid redirectionRule 13. Configure Etags.
Our applications are:In more cases, we don't want the AJAX request to be cached, and a timestamp is attached to each AJAX request URL.
Yahoo 14: web site front page optimization of the 14 principles
