DOCX

Build high performance ASP

By Lester Hughes,2015-12-20 00:05
14 views 0
Build high performance ASP

    Build high performance ASP.NET site optimization of

    HTTP requests

    This began to refine page request process and optimization scheme is put forward. At the same time, in the last article, many friends also puts forward some problems, in this paper also gives the answer to these questions!

    This issue is as follows:

    The optimization of the HTTP request

    The optimization of the HTTP request

    In the process of a web page request, in fact, the entire page HTML structure (that is, those HTML skeleton) of the page request time is very short, typically account for 10% of the whole page request time to 20% in the page loads the rest of the time is actually in the flash loading the page, images, and the resources of the script. Until after all of the resource loading, the entire page to complete the show in front of us.

    Below, we from one page began.

    1

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

    2 < html xmlns ="http://www.w3.org/1999/xhtml" >

    3 < head >

    4 < title > little, YanYang day < / title >

    5

    6 < script type ="text/javascript" src ="../demo.js" >

    7

    8

    9

    10 < body >

    11 < div >

    12 < img src ="../images/1.gif" />

    13 < img src ="../images/2.gif" />

    14 < img src ="http://yanyangtian.cnblogs.com/image/3.gif" />

    15 < img src ="http://yanyangtian.cnblogs.com/image/4.gif" />

    16 < img src ="http://yanyangtian.cnblogs.com/image/5.gif" />

    17 < img src ="http://yanyangtian.cnblogs.com/image/6.gif" />

    18 < img src ="http://yanyangtian.cnblogs.com/image/7.gif" />

    19 < img src ="http://yanyangtian.cnblogs.com/image/8.gif" />

    20 < img src ="http://yanyangtian.cnblogs.com/image/7.gif" /> 21 < img src ="http://yanyangtian.cnblogs.com/image/8.gif" /> 22

    23

    24

    25

    If we request this page to the server, the client browser requests to the data is first

    HTML skeleton, namely:

    1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 2 < html xmlns ="http://www.w3.org/1999/xhtml" >

    3 < head >

    4 < title > little, YanYang day < / title >

    5

    6 < script type ="text/javascript" src ="../demo.js" > 7

    8

    9

    10 < body >

    11 < div >

    12 < img src ="../images/1.gif" />

    13 < img src ="../images/2.gif" />

    14 < img src ="http://yanyangtian.cnblogs.com/image/3.gif" /> 15 < img src ="http://yanyangtian.cnblogs.com/image/4.gif" /> 16 < img src ="http://yanyangtian.cnblogs.com/image/5.gif" /> 17 < img src ="http://yanyangtian.cnblogs.com/image/6.gif" /> 18 < img src ="http://yanyangtian.cnblogs.com/image/7.gif" /> 19 < img src ="http://yanyangtian.cnblogs.com/image/8.gif" /> 20 < img src ="http://yanyangtian.cnblogs.com/image/7.gif" /> 21 < img src ="http://yanyangtian.cnblogs.com/image/8.gif" /> 22

    23

    24

    25

    Before this, first of all, to popularize the page load small knowledge:

    After loaded when the page HTML skeleton, the browser willstart parsing the page TAB,start from top to bottom.

    First is the resolution of the head tags, if found in the head with reference to the js script,started at this time the browser requests the script, the parsing process of the whole page is stopped, all the way to the js request is completed.

    After page and then parse down, such as analytical body tag, if img tags in the body, the browser will request img SRC corresponding resources, if there are multiple img tags, then the browser will one by one analysis, parsing won't wait like js, if found that img url address is the same, the browser will fully take advantage of this is on the order of the TCP connection to the request of the pictures one by one, if you find some img url address is different, so the browser another open a TCP connection, sending HTTP requests.

    Pay attention to the difference before request js: request need js, the browser will have been waiting for, not parse HTML tags below

    But resolve to img, despite the images need to be loaded at this time, but the page of the parsing process will continue, and then decide whether to send a new TCP connection to load resources.

    You may think of this before the code snippet, does the code is the same, but in the beginning, sent to the browser is the HTML code, any js scripts and images has not been sent.

    When the HTML code to the browser, the browser willstart parsing the code step by step, as long as meet the resources need to be loaded, the browser issue HTTP requests to the server, request the resources needed.

    The whole page load time chart is as follows:

    Everyone can be seen from the graph:

    The first line is divided into half yellow and blue, yellow part is actually reflect the open

    a TCP connection time, and the blue part is requests the whole skeleton HTML document. It

    can be seen that the request HTML skeleton and the time is very short. The rest of the blue

    line represents the images, script resource loading time spent.

    Obviously, so the whole page load time is very long. Because of the page load is almost

    the loading of order, time is the sum total of all resource loading time.

    The following pages we put the above code to the following:

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" >

    < head >

    The < title > little, YanYang day < / title >

< script type ="text/javascript" src ="../demo.js" >

    

    < body >

    < div >

    < img src ="http://demo1.com/images/1.gif" />

    < img src ="http://demo1.com/images/2.gif" />

    < img src ="http://demo2.com/image/3.gif" />

    < img src ="http://demo2.com/image/4.gif" />

    < img src ="http://demo3.com/image/5.gif" />

    < img src ="http://demo3/image/6.gif" />

    < img src ="http://demo4.com/image/7.gif" />

    < img src ="http://demo4.com/image/8.gif" />

    < img src ="http://yanyangtian.cnblogs.com/image/7.gif" /> < img src ="http://yanyangtian.cnblogs.com/image/8.gif" />

    

    

    We take a look at page load time

    This is called "parallel" load.

    Compare the two different code: in fact in the img SRC attribute above:

    The first paragraph of the page code: img SRC attribute are pointing to a domain name.

    The second paragraph of page code: img SRC attribute points to a different domain name

    What is the result?

    Please pay attention to the different comparison of img SRC.

    Explained before,start with a little common sense (also mentioned in the previous article) :

    When the page request to the server resources, if the browser already before the client and the server opens a TCP connection, and the requested resource is in the connection on the server, then resources after the request will be sufficient to use this link to get resources. This is the first time figure.

    If the request images in different server site, or the request of the server site has more than one domain name, because the browser will open for each domain name to a TCP connection, sending HTTP requests, in this way, the result is opened multiple TCP connections at the same time, this is the second time chart.

    Parallel load, although a lot of really makes the page load faster, but not every images or other resources to find a different domain name, like a second before the example of parallel load images, also is to let the two images using a TCP connection. If each image to open a connection, so opened a connection, the browser also takes the resource, and the browser may also "zombie". And sometimes serious impact performance.

    So, this is the need to weigh.

    In addition to the above optimization way, is there any other way of optimization of loading. Is mainly by reducing HTTP requests to optimize

    Web site a menu of the menu is known to all, some of the menu is to use pictures to. Such as

    If the above picture a load, certainly will affect the speed, if open and request more, a bit not worth the cost. And pictures also is not very big, then the whole menu need images as a whole image, a load, and then through the way of the map, click on the image control position to achieve the effect of navigation.

    The question is: to calculate the coordinates of the picture, can't click on the "home page" pictures, then jumped to "help" page.

    This is about here, next about the optimization of other resource files, hope a lot of Suggestions, to write this series!

Report this document

For any questions or suggestions please email
cust-service@docsford.com