Read high-performance website building Guide (I)

The xuanyan section describes why to optimize the Web Front-end performance and the simple knowledge of HTTP protocol. Why is the Web Front-end performance optimized? The author proposes a prime rule for front-end performance: Generally, 10% ~ 20% is used to download HTML documents, and about 80% of the current front-end components (images, JS, CSS), so processing the front-end components will have a great impact on Web performance. In addition, from the perspective of overall system optimization, front-end performance optimization requires less work (compared with the background design and architecture adjustment), and the effect is more obvious. For HTTP, The Introduction focuses on HTTP headers, including content-encoding and conditional GET requests (if-modified-since and last-modified), cache (expired), persistent connection (CONNECT: Keep-live ).

Next we will introduce the first optimization rule: reducing HTTP requests, which has a great impact on the performance of the web page requested for the first time (because there is no cache ). This rule focuses on how to reduce images. 1. Merge the image to an image, and use css to position it in a large image. 2.css sprites is also used to merge the image into a large image. Then, use the CSS background to dynamically set the position where the image is displayed. 3. inline images are directly included in Web pages, but ie support is problematic. 4. merge scripts and CSS to merge multiple JS and CSS files into one file, which can be combined with compression. There are many applications for the 4th rules. Currently, online services and third-party frameworks are supported. The well-known Yui compressor also has Eclipse plug-ins.

Article 2: When Using Content Delivery Network (CDN), the general idea is to publish Web components to a third-party server. Of course, the third-party web requests directly affect the performance of web pages.

Article 3: add the Expires header. The general idea has been introduced in the introduction, specifically using max-age and expires, which are supported under http1.1 and http1.0 respectively.In addition, the book also describes how to use the file name modification method to download modified files, because we cannot tell the user that "you should use Ctrl + F5 to request a new page", the specific implementation steps have not been tried yet, and should be supplemented later.Expirefilter has been added to Tomcat 7 to implement different caching methods for different types of front-end components through configuration.

Article 4: The idea of compressing a component is to reduce the file size and increase the transmission rate. This document describes a common compression method: gzip. Mainstream servers and browsers support this method. Tomcat only needs to add configuration in server ctor of server. XML, as shown below:

[HTML]View plaincopy

 

1. Compression = "on"
2. Compressionminsize = "50"
3. Compressablemimetype = "text/html, text/CSS, text/JavaScript"

The book also introduces how to deal with the complex situations that do not support gzip in combination with browsers, caches, and proxy servers. It is considerate. Currently, many systems have a lot of JS Code and adopt modular management methods. Therefore, there are two Processing Methods for compression: Single File compression and logical compression. A single file is compressed with a small amount of work, which is silly. However, when there are small changes to the file, the cache will become invalid. Logical compression will increase the complexity of the front-end logic and increase the workload. However, a third-party framework has made efforts in this regard, such as require. js.

 

Article 5: place the style sheet on the top. The page display is displayed after the HTML document is downloaded and CSS is downloaded, after rendering through the browser. Developers want the HTML document to be displayed first, then, use CSS to re-paint the style. When CSS is pulled back, the HTML file display will be blocked, resulting in a reduction in overall performance.

Rule 6: place the script at the bottom. The browser has the parallel download feature, while JS blocks parallel downloads. Therefore, you need to place JavaScript back as far as possible to make full use of parallel downloads.