[Original] build a high-performance ASP. Net Site to analyze the page processing process (front-end)

Build high performanceASP. NETOne site Analyze the page processing process (front-end)

InASP. NETWhen optimizing websitesASP. NETThat's enough. In the process of optimization, we usually first find out where the problem may exist, and then prove that the problem is to be solved. After confirmation, we will take some measures. SeriesArticleThe structure is as follows: first introduce the front-end optimization, and I will mark it after the title of the article."Front end"In the backgroundCodeI will mark the title"Backend"If it is the optimization of the database design, I will mark it on the title"Database".

 

 

Links to articles:

Build high performanceASP. NETSite Opening

Build high performanceASP. NETOne site Analyze the page processing process (front-end)

Build high-performance ASP. Net Site 2 optimize HTTP requests (front-end)

Building a high-performance ASP. Net site depends on the three details

Building a high-performance ASP. Net Site Chapter 5-Performance Tuning Overview (previous)

Design of large-scale high-performance ASP. NET System Architecture

Building a high-performance ASP. Net Site Chapter 5-Performance Tuning Overview (Part 1)

Building a high-performance ASP. Net Site Chapter 5-Performance Tuning Overview (Part II)

Building a high-performance ASP. Net Site Chapter 6-performance bottleneck diagnosis and preliminary optimization (Part 1)-identifying performance bottlenecks

Build a high-performance ASP. Net Site Chapter 6-performance bottleneck diagnosis and preliminary optimization (next article)-simple Optimization Measures

Building a high-performance ASP. Net Site Chapter 6-performance bottleneck diagnosis and preliminary optimization (next article)-reducing unnecessary requests

Building a high-performance ASP. Net Site Chapter 7 how to solve memory problems (previous article)-Managed Resource Optimization-in-depth analysis of the garbage collection mechanism

Building a high-performance ASP. Net Site Chapter 7 how to solve memory problems (previous article)-Managed Resource Optimization-monitor CLR Performance

 

 

 

 

This article mainly analyzes the process and gives you a comprehensive understanding. The next article will start step-by-step analysis.

 

The topics in this article are as follows:

Analyze the page parsing process

Analyze possible optimization points

 

Analyze the page parsing process

The page parsing process is not what we often say hereASP. NETPage lifecycle, and the browser requests a page, and then the browser displays the page process.

 

In this article, I will first describe the page parsing process, display the overall description, and then propose optimization methods at each point. Overall, partial.

 

When the browser requestsWebThe page is fromURL. The process is described as follows:

1.InputURLAddress or clickURLA link

2.AccordingURLAddress, combinedDNS, ParseURLCorrespondingIPAddress

3.SendHTTPRequest

4.Start to connect to the server of the request and request-related content (as for how the request is processed, we will not discuss it here, but will discuss it in the following articles)

5.The browser parses the content returned from the server, displays the page, and continues with other requests.

 

The above is basically the process of a page being requested to reality. Next we will start to analyze this process.

 

When you enterURLThen, the browser needs to know thisURLCorrespondingIPWhat is it?IPAddress, the browser can prepare to send the request to the specific serverIPAnd port number.

 

BrowserDNSThe parser is responsibleURLResolved to correctIPAddress. This resolution takes time, and the browser cannot download anything from the server during the parsing period. However, this parsing process can be optimized. Imagine if each browser requests oneURLResolution is required, so each request consumes a little time. This may be a short time, but the performance is improved by a little bit. IfURLAndIPWhen the address is cachedURLThe browser does not need to parse, but directly reads the cache, which is bound to be faster.

 

In fact, browsers and operating systems provide such support.

 

WhenIPAfter the address, the browser will send it to the serverHTTPNext, let's take a look at how the request is sent:

1.The browser sendsTCPRequires the server to open the connection

2.The server also sends a packet to respond to the browser of the client and tells the browser that the connection is enabled.

3.The browser sendsHTTPOfGetThis request contains a lot of things, such as the commonCookieAnd otherHeadHeader information.

 

In this way, a request is sent.

 

After the request is sent, it is about the server.ProgramFor example, a clear file in the browser isASP. NETThen the server passes the requestIISToASP. NETWhen running, after a series of activities are finally carried out, the final result, of course, is generallyHtmlTo the client.

 

In fact, the first thing that comes to the browser isHtmlAnd the so-calledHtmlIs purelyHtmlCode, does not contain any images, scripts,CSS. That is, the pageHtmlStructure. Because onlyHtmlStructure. ThisHtmlThe time for sending documents to the browser is very short, which usually takes up the entire response time.10%Left and right.

 

In this way, the basic skeleton of the page will be in the browser. The next step is the process of parsing the page by the browser, that is, parsing the page step by step from top to bottom.Html.

 

IfHtmlIn this documentIMGTag, then the browser will sendHTTPRequest to thisIMGResponseURLAddress to get the image and then present it. IfHtmlThere are many images in the document,FlashThen the browser will send requests one by one and then present them.

 

At this point, we may feel that this method is a little slow. Indeed, the request for this image and other resource files can be optimized. Not to mention anything else. If each image requires a request, perform the steps mentioned earlier: ParsingURL, OpenTCPConnection. Opening a connection also consumes resources. Just like accessing a database, we try to open as few database connections as possible and use connections in the connection pool as much as possible. The same principle,TCPConnections can also be reused. But there is also a problem with reuse: If two images haveURLThe address is as follows:

 

 

Code

< IMG SRC = "Q1.gif" Height = "16" Width = "16"   />

<IMGSRC= "Q2.gif"Height= "16"Width= "16" />

<IMGSRC= "Q3.gif"Height= "16"Width= "16" />

<IMGSRC= "Q4.gif"Height= "16"Width= "16" />

<IMGSRC= "Q5.gif"Height= "16"Width= "16" />

<IMGSRC= "Q6.gif"Height= "16"Width= "16" />

<IMGSRC= "Q7.gif"Height= "16"Width= "16" />

<IMGSRC= "Q8.gif"Height= "16"Width= "16" />

<IMGSRC= "Q9.gif"Height= "16"Width= "16" />

<IMGSRC= "Q10.gif"Height= "16"Width= "16" />

 

 

The time consumed to request these images is as follows:

 

 

 

First, you can see the top yellow line. This yellow line indicates that the browser opens the connection. The second half of the yellow line is blue, indicating that the browser has requestedHtml.

 

The first blue line indicates that the first image has been requested.TCP.

 

When you see the third line, the first part is yellow, indicating that another image is opened when you request the second image.TCPThe second half of the line is blue, indicating that the image has been requested.

 

The remaining images to be requested use the previous one.TCPConnection.

 

Indeed,TCPThe connection is fully used, but the image download speed is indeed slow. We can see that the images are downloaded sequentially. The response time of the entire page can be imagined.

 

If you use the following method, for example:

 

 

 

It can be seen that there are more connections, but almost all images are downloaded in parallel, which is much faster.

 

 

In fact, this is a trade-off.

 

In fact, the browser also has built-in optimization methods, such as cache images and scripts. Or, when we talk about parallel download, we can see that it will consume more connection resources. 

 

Today, we have made a preliminary analysis of the page process. We have a general understanding of the process. We will gradually optimize the process in the next article. Please pay attention to it and hope you will give more comments and feedback. Thank you! :)

 

 

Copyright:XiaoyangAnd blog park all, you are welcome to reprint, reprint please indicate the source to the author.

Http://www.cnblogs.com/yanyangtian