A detailed introduction to the Web performance optimization scenario

Chapter I. Open website Slow status analysis

The company access is deployed in The VIP website of IDC room will feel very slow. What is the cause of this? In order to shorten the response time of the page and improve our user experience, we need to know what time the user spends waiting for something.

You can track our login page as shown in

from what we can analyze, HTML documents only account for the total response time of the 20%, other 80% response time is used to download JS,CSS, pictures and other components. Therefore , the Web front-end has a great space for optimization, we will be from the front-end optimization of the web, back-end optimization of the two aspects of a comprehensive consideration of the Web performance optimization scheme.

Chapter II WEB Optimization Rules for the foreground

One, minimizing HTTP requests

There are several common methods that can actually reduce Request:

1, merge scripts with style files, such as can be multiple CSS files to synthesize one, multiple JS files to synthesize one.

2, css Sprites use CSS background related elements for the absolute positioning of the background map , A number of images to synthesize a picture.

Second, use the browser cache

when users browse different pages of a site, many of the content is duplicated, such as the same JS,CSS, pictures and so on. If we can suggest even forcing the browser to cache these files locally, it will greatly reduce the amount of traffic generated by the page, thus reducing page loading time.

depending on the server-side response header, a file has several different cache statuses for the browser.

1, the server side tells the browser not to cache this file, each time to update the file on the server.

2, the server does not give any instructions to the browser.

3, in the last transmission, the server sent last-modified or Etag data to the browser, the browser will submit the data to the server again, verify that the local version is up-to-date, and if the latest server returns 304 Code, tell the browser to use the local version directly, otherwise download the new version. In general, there are only static files, and the server side will give the data.

4, the server forces the browser to cache files, and set the expiration time. Before the cache expires, the browser will use the local cache file directly and will not generate any communication with the server side.

What we have to do is try to force the browser to the fourth state, especially for JS,CSS, pictures and other less changes in the file.

Iii. Use of compression components

IE and Firefox browser support client gzip, before transmission, using gzip compression and then pass to the client, after the client received by the browser decompression, which is slightly occupied by some server and client CPU, but in exchange for higher bandwidth utilization. For plain text, the compression rate is considerable. If each user saves 50% bandwidth, the leased bandwidth can serve more customers and shorten the data transfer time.

Iv. Pre-loading of images andJS

The simplest way to pre-load images is to JavaScript instantiates a new image () object, and then passes in the URL of the image that needs to be loaded as a parameter.

function preloadimg (URL) {var img = new Image (); img.src = URL;}

can pre-load on the login page JS and Pictures

Five, put the script at the bottom

The problem that the script puts on the top,

1. When using scripts, gradual rendering will be blocked for content that is below the script

2. Parallel downloads are blocked when downloading scripts

placed at the bottom may appear JS error problem, when the script is not loaded, the user triggers the script event.

To consider the situation comprehensively.

VI. Place style files at the top of the page

If the stylesheet is loaded, building the rendering tree is a waste, and there are two possible scenarios where the style file is placed at the bottom of the page:

1, white screen

2. flicker without style content

Vii. use of external JS and CSS

Associate the inline JS and css made external js,css. Reduce the duplication of download inline JS and CSS.

Eight, cut a group to multiple domains

The main purpose is to improve the parallel download capability of the page component. But don't cross too many domain names, it is recommended to use 2 subdomains .

Nine, Streamline JS

Can do two levels

1 , thin: Remove unnecessary characters from your code to reduce their size,

2 , confusion: While streamlining, the code is rewritten, functions, variable names are converted to shorter strings

10. Thin CSS

Remove unnecessary characters from your code to reduce their size.

11. Streamline images,Flash

for large pictures,Flash , make a balance between effect and size.

Chapter III optimization of the program

Fourth Chapter optimization of the database

Appendix A page Request Analysis

from the input URL- to-page rendering requires the following 5 steps

1. enter a URL address or click a link to a URL

　2. Browser According to the URL address, combined with DNS, resolves the URL corresponding IP address

　3. send HTTP request

　4. Start connecting the requested server and request the relevant content

　5. the browser parses the content returned from the server and shows the page

Above is basically a page from the request to the implementation of the basic process, below we will analyze the process.

when the inputURLafter that, the browser will know thisURLcorresponding to theIPWhat is it, only to knowIPaddress, the browser is ready to send the request to the specified server's specificIPand the port number above. Browser'sDNSThe parser is responsible forURLresolves to the correctIPaddress. This parsing work takes time, and during this parsing period, the browser is not able to download anything from the server. The browser and the control system provideDNSparsing cache support. when you get theIPaddress, then the browser sends the serverHTTPrequest, the process is as follows:

1. The browser asks the server to open the connection by sending a TCP packet

2. The server also sends a packet to answer the client's browser, telling the browser to connect.

3. The browser sends a GET request for HTTP, which contains a lot of things, such as our common cookies and other head header information.

In this way, a request is made.

After the request is sent, then it is the server thing, the server side of the program to send the final results to the client.

In fact, the first to reach the browser is the HTML of those documents, so-called HTML documents, is purely HTML code, does not contain any pictures, scripts,CSS and so on. That is, the HTML structure of the page . This is because the HTML structure of the page is returned . This HTML document is sent to the browser time is very short, generally accounted for the entire response time 10% around.

after that, then the basic skeleton of the page is in the browser, the next step is the browser parsing the page process, that is, step by step from top to bottom parsing The skeleton of the HTML .

If at this time in html http request to this img response Url address to get the picture and then render it. If you are in html There are a lot of pictures in the document, flash url Tcp connect and so on. Opening a connection also consumes resources, as we do with database access, as much as we can with fewer database connections and more connections in the connection pool. The same goes for the tcp The connection can also be reused. http1.1 made a persistent connection ( persistent connection ", meaning the same HTTP Connect, can process multiple requests at the same time, reduce tcp Connect.

When the HTML skeleton of the page is loaded , the browser begins parsing the tabs in the page , starting from top to bottom.

first , the head tag parsing, if found in the head to reference the JS script, then the browser began to request the script at this time, the entire page parsing process stopped, until JS The request is complete. After the page is then parsed down, such as parsing the body tag, if there is an img tag in the body, then the browser will request img src corresponding resources, If there are multiple img tags, then the browser will parse, parsing will not wait like JS , will be concurrent download.