Web Front End Performance analysis--principle

Transfer from http://blog.csdn.net/five3/article/details/7686715

Web front-end performance:

That is, the total amount of time a Web user spends accessing a page. That is, a fully-meaningful user response time that includes more content and impact factors than the server's response time. Then the complete request for a Web page includes what part of the time sum is the basic knowledge needed to understand the Web front-section performance analysis and optimization, and first understand the whole process of users accessing a URL from a browser to fully displaying everything on the page.

The request process for the page:

1. URL Request for browser
2, recursive search DNS server
3. Connect the target IP and establish a TCP connection
4. Sending HTTP requests to the target server
5. The Web server receives the request after processing
6. The Web server returns the corresponding result "invalid, redirect, correct page, etc."

7. The browser receives the HTTP content returned

================================ front-end analytic split line ===========================================

8, start parsing the HTML file, of course, is the top-down, first head, after the body

9, when parsing to the head of the CSS external link, sync to download, if you encounter external JS link is also download "but JS link is not recommended to put in the head, because the delay page first show time"

10, then parse the body part, edge parsing edge began to generate the corresponding DOM tree, while waiting for the CSS file download

11, once the CSS file has been downloaded, then synchronize with the generated DOM node +CSS to generate the render tree

12. Once the rendering tree has a structural model, it will then synchronize to calculate the layout location of the render tree node

13, once calculated the coordinates of the rendering, and then synchronized to start rendering

14, 10-13 step in the process if you encounter a picture jumps past render the following content, waiting for the picture to be downloaded successfully will be returned to render the original picture location

15, the same as 14 steps, if the rendering process occurs when the JS code to adjust the DOM tree structure of the situation, will again again, starting from the modification of the DOM step

16, eventually all nodes and resources will be rendered complete

========================================= analysis End Split Line ==============================================

17. The OnLoad event that starts page after rendering is complete
18, the entire page load complete

There will be a lot of separate requests throughout the process, so there will be a lot of TCP connections, and each one will be shut down by itself, unless the keep-live type can be requested multiple times.

Sum up:
A page request equals one or more URL requests, so the number of external requests contained in a page can affect the overall performance of the page
"One more CPU usage per request, one TCP connection at a time"
Requests for each URL also include the process of addressing, connecting, requesting transmission, returning transmission, and disconnection, so that the external environment at each stage can also affect overall performance
"The DNS server's addressing time, requesting and returning content when the network environment"
In addition to the number of URL requests, the content size of each request is also a major factor affecting performance
"The larger the file consumption, the longer it takes in transit."
Request the same number of resources, the parallel request and the serial request rate is not the same, so the requested resources to support synchronization requests as far as possible
"Synchronize requests for different resources, that is, requests are sent to different resource servers."
According to the browser loading and rendering mechanism, choose the appropriate HTML content layout method
"Reduce the number of times an object instance is repeatedly created and the caching mechanism is fully utilized"
Load user-focused content first
"CSS loading is better than JS content, the first screen content is better than non-first screen content"

After you have followed the process of the HTTP request, focus on a few points of interest throughout the request and determine the time period in which the performance will be affected by determining the point in time, that is, determining the factors that affect performance. Based on the above, the main points of time can be divided into the overall point of time of the page, as well as the point in time of a single URL request process. "Indicators based on Httpanalyzer tools "

Primary point in time for a single URL request:
1. Cache read: The buffer reads time, or 304 error processing time
2, Block: Request wait time, depending on the cache check, network connection wait
3, DNS Lookup:dns server lookup time, depending on the number of DNS services, DNS registered domain
4, the total time of connect:tcp connection, depending on the connection type, ssh,keepalive will be longer than HTTP
5, send first to the last: the time to send the request content, depending on the size of the request content, and uplink transmission speed
6. Wait: The time to wait for a response, depending on the response of the network environment, the processing time of the Web server
7, receive first to last: Receive response content time, depending on the response content, downlink transmission speed, but also to consider the bandwidth of the server
8, time to first byte: from the request until the total number of times it was received, equals 1+2+3+4+5+6
9, Network: NET consumption time, equals 3+4
10. Begin to end: Total time for the entire request, equal to 1+2+3+4+5+6+7


Primary point-in-time for a single page:
1, DOM ready time:dom time to complete, from receiving HTML to fully converted to DOM tree time required
2. DOM ready to page load: loading and rendering time of page elements, including html,css,img and other content
3, page Load time:page page onload event time, the actual time is equal to the total time-(DOM ready + element rendering time)
4, URL requests Begin to end:url all the time consumed by the request, from sending the request to receiving the last byte break
5. Network time: Hours spent on the net, that is, TCP connection time
6. Begin to end: All time consumed, including render time after request ends


Ps:
How the browser works

http://blog.csdn.net/zzzaquarius/article/details/6532299

English Original:

Http://taligarsiel.com/Projects/howbrowserswork1.htm

Web Front End Performance analysis--principle