Web Program Performance optimization

Frequently asked questions about front-end performance optimization This piece of the question, a personal understanding

First: Reduce the number of HTTP requests

80% 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 maps combines multiple images into a single image. 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 Sprites is a better approach. It combines the pictures in the page into a single file, and uses the Background-image and Background-position properties of the CSS to achieve the desired portion of the picture. 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.

Article two: Using the 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 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.

Article three: Reduce the number of DNS queries

DNS 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 is 30 minutes, and the 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.

Fourth: Style drop header, script bottom

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.

As 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 delayed, but not necessarily the long delay required. On the other hand, if the foot instinct is delayed, it can be placed at the bottom.

Fifth: Separating scripts from styles

Many 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.

Sixth: 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:tex t/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 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.

Seventh: Code optimization

　　1. Avoid CSS expressions　

CSS 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.

2. Function throttling

Function throttling is used to throttle functions to optimize performance to some extent. For example, DOM operations require more memory and CPU time than non-dom interactions. Successive attempts to do too many DOM-related operations may cause the browser to hang, and sometimes even crash. Especially when using the OnResize event handler in IE, this event is triggered continuously when the browser size is resized. Inside the OnResize event handler, if you try to do DOM operations, its high-frequency changes may cause the browser to crash. For example, one of our common search features is that we typically bind KeyUp events and search every time the keyboard is pressed. But our main goal is to search for it once for each entry. To solve these problems, you can use a timer to throttle the function.

3. Reduce access to DOM

When the structure of the DOM tree changes, such as the increase or decrease of the nodes, moving, etc., will also trigger the rearrangement. The process of browser engine layout, similar to a tree's pre-order traversal, is a process from top to bottom from left to right. Usually in this process, the current element no longer affects elements that have been traversed before. Therefore, inserting an element in front of the body causes the entire document to be re-rendered. Since there is no way to avoid it, reduce access (width, offsetTop, left ...). Can be less, can be cached, on the cache).

4. Minimizing code

Minimizing JavaScript, CSS, and HTML removes unnecessary characters from your code, reducing download time. Common tools are Gulp and Webpack. 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. Minimization is a safe, straightforward process, and confusion is more complex and prone to problems. From the survey of large websites, by minimizing, files can be reduced by 21%, while confusion can be reduced by 25%. 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.

This article mainly draws on the Yahoo military and the personal understanding

Web Program Performance optimization