構建高性能ASP.NET站點之二優化HTTP請求(前端)

時間 2019-12-18

標籤構建高性能 asp.net asp 站點之二優化 http 請求前端欄目 ASP 简体版

原文原文鏈接

上一篇文章主要講述了請求一個頁面的過程,同時也提出了在這個過程當中的一些優化點,本篇就開始細化頁面的請求過程而且提出優化的方案.同時,在上篇文章中,很多朋友也提出了一些問題,在本篇中也對這些問題給出了回答!javascript

本篇的議題以下:html

HTTP請求的優化java

HTTP請求的優化瀏覽器

在一個網頁的請求過程當中,其實整個頁面的html結構(就是頁面的那些html骨架)請求的時間是很短的,通常是佔整個頁面的請求時間的10%-20%.在頁面加載的其他的時間實際上就是在加載頁面中的那些flash,圖片,腳本的資源. 一直到全部的資源載入以後,整個頁面才能完整的展示在咱們面前.服務器

下面,咱們就從一個頁面開始講述:
tcp

  
  
  
  
   
   
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
   
   <html xmlns="http://www.w3.org/1999/xhtml"> 
   
   
   
   <head> 
   
   
   
    <title>小洋,燕洋天</title> 
   
   
   
    <script type="text/javascript" src="../demo.js"> 
   
   
   
      </script> 
   
   
   
    </head> 
   
   
   
   <body> 
   
   
   
      <div> 
   
   
   
      <img src="../p_w_picpaths/1.gif" /> 
   
   
   
       <img src="../p_w_picpaths/2.gif" /> 
   
   
   
        <img src="http://yanyangtian.cnblogs.com/p_w_picpath/3.gif" /> 
   
   
   
       <img src="http://yanyangtian.cnblogs.com/p_w_picpath/4.gif" /> 
   
   
   
     <img src="http://yanyangtian.cnblogs.com/p_w_picpath/5.gif" /> 
   
   
   
      <img src="http://yanyangtian.cnblogs.com/p_w_picpath/6.gif" /> 
   
   
   
     <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" /> 
   
   
   
      <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" /> 
   
   
   
          <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" /> 
   
   
   
           <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" /> 
   
   
   
      </div> 
   
   
   
    </body> 
   
   
   
    </html>

若是咱們向服務器請求這個頁面,客戶端的瀏覽器首先請求到的數據就是html骨架,即:ide

  
  
  
  
   
   
   
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
   
    <html xmlns="http://www.w3.org/1999/xhtml"> 
   
   
   
    <head> 
   
   
   
        <title>小洋,燕洋天</title> 
   
   
   
      
   
   
   
       <script type="text/javascript" src="../demo.js"> 
   
   
   
        </script> 
   
   
   
      
   
   
   
    </head> 
   
   
   
   body> 
   
   
   
     <div> 
   
   
   
          <img src="../p_w_picpaths/1.gif" /> 
   
   
   
         <img src="../p_w_picpaths/2.gif" /> 
   
   
   
         <img src="http://yanyangtian.cnblogs.com/p_w_picpath/3.gif" /> 
   
   
   
        <img src="http://yanyangtian.cnblogs.com/p_w_picpath/4.gif" /> 
   
   
   
       <img src="http://yanyangtian.cnblogs.com/p_w_picpath/5.gif" /> 
   
   
   
        <img src="http://yanyangtian.cnblogs.com/p_w_picpath/6.gif" /> 
   
   
   
       <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" /> 
   
   
   
       <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" /> 
   
   
   
        <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" /> 
   
   
   
       <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" /> 
   
   
   
     </div> 
   
   
   
   </body> 
   
   
   
   </html>

在此以前,首先來普及一下頁面加載的小知識:性能

當頁面的html骨架載入了以後,瀏覽器就開始解析頁面中標籤,從上到下開始解析.優化

首先是head標籤的解析,若是發如今head中有要引用的js腳本,那麼瀏覽器此時就開始請求腳本,此時整個頁面的解析過程就停了下來,一直到js請求完畢.網站

以後頁面接着向下解析,如解析body標籤,若是在body中有img標籤,那麼瀏覽器就會請求img的src對應的資源,若是有多個img標籤,那麼瀏覽器就一個個的解析,解析不會像js那樣等待的,若是發現img的url地址是同一個地址,那麼瀏覽器就會充分的利用這個已經打開的tcp鏈接順序的去一個個的請求圖片,若是發現有的img的url地址不一樣,那麼瀏覽器就另開tcp鏈接,發送http請求.

注意以前請求js的區別:請求須要js,瀏覽器會一直等待,不在解析下面的html標籤

可是解析到img的時候,儘管此時須要加載圖片,可是頁面的解析過程仍是會繼續下去的,而後決定是否發送新的tcp鏈接加載資源.

你們可能以爲這個以前的代碼片斷同樣,確實代碼是同樣的,可是,在最開始的時候,發送到瀏覽器中的只是那些html的代碼,任何的js腳本和圖片尚未發送過來.

當html代碼到了瀏覽器中,那麼瀏覽器就開始一步步的解析這些代碼了,只要遇到了須要加載的資源,瀏覽器就向服務器發出http請求,請求所需的資源.

整個頁面的加載時間圖以下:

你們從圖中能夠看出:

第一條線中分爲一半×××和一半藍色,其實×××的部分就表明了打開一個tcp鏈接花的時間,然後面的藍色的部分就是請求整個html骨架文檔的時間.能夠看出,請求html骨架的時間是很短的.其他藍色的線就表示了圖片,腳本資源加載所花的時間.

很顯然,這樣頁面的整個加載時間就很長了.由於頁面的加載幾乎是順序的載入,時間就是全部資源加載時間的總和.

下面咱們把上面的頁面代碼代爲以下:

   
   
   
   
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    
    
    
    <head> 
    
    
    
        <title>小洋,燕洋天</title> 
    
    
    
     
    
    
    
        <script type="text/javascript" src="../demo.js"> 
    
    
    
        </script> 
    
    
    
     
    
    
    
    </head> 
    
    
    
    <body> 
    
    
    
        <div> 
    
    
    
            <img src="http://demo1.com/p_w_picpaths/1.gif" /> 
    
    
    
            <img src="http://demo1.com/p_w_picpaths/2.gif" /> 
    
    
    
            <img src="http://demo2.com/p_w_picpath/3.gif" /> 
    
    
    
            <img src="http://demo2.com/p_w_picpath/4.gif" /> 
    
    
    
            <img src="http://demo3.com/p_w_picpath/5.gif" /> 
    
    
    
            <img src="http://demo3/p_w_picpath/6.gif" /> 
    
    
    
            <img src="http://demo4.com/p_w_picpath/7.gif" /> 
    
    
    
            <img src="http://demo4.com/p_w_picpath/8.gif" /> 
    
    
    
            <img src="http://yanyangtian.cnblogs.com/p_w_picpath/7.gif" /> 
    
    
    
            <img src="http://yanyangtian.cnblogs.com/p_w_picpath/8.gif" /> 
    
    
    
        </div> 
    
    
    
    </body> 
    
    
    
    </html>