web性能優化之Waiting(TTFB)簡介

TTFB-首字節時間簡介

百度站長工具裏看到有一個“首字節時間”的建議,第一次聽說,還真不知道是什麼東東。百度站長工具裏面的解釋是:“瀏覽器開始收到服務器響應數據的時間=後臺處理時間+重定向時間,是反映服務端響應速度的重要指標”。

看到這個解釋,隱隱約約明白了什麼意思,下面就用自己的話說一下我的理解(如果有人有權威解釋,發現本解釋錯誤,還望指正)。

“首字節時間”顧名思義就是在瀏覽器輸入目標網站的網址並回車後(或者搜索頁面點擊打開新的目標頁面時)直到獲得首個字節的時間。再解釋一下,後臺處理時間(這應該是瀏覽器訪問目標網站網址時,發出請求,域名服務器的處理時間,將請求發送到目標網站所在服務器ip),重定向時間(這應該是域名服務器將請求發送到目標網站服務器後,如果服務器有重定向設置,就處理重定向的時間)。

“首字節時間”簡單的理解就是,訪問目標網站時,從發出請求到自己電腦獲得網站響應的首字節這段時間。

總而言之,言而總之,首字節時間當然是越短了越好。就像百度自己的解釋,這是反映服務端響應速度的重要指標。首字節時間越短,表明服務器端(域名DNS服務器和網站服務器)響應速度越快,反之越長,表明服務器端響應速度慢。當然是越快了對網站訪問體驗來說越好了!

===========================41DD1C~1===========================

TTFB-首字節時間,是指從客戶端開始和服務端交互到服務端開始向客戶端瀏覽器傳輸數據的時間(包括DNS、socket連接和請求響應時間),是能夠反映服務端響應速度的重要指標,獲取在接收到響應的首字節前花費的毫秒數。
lTime = Response.TTFB
返回值 lTime As Long:首字節響應時間(以毫秒爲單位)。

TTFB:httpwatch的timechart中的一列參數。

課外學習部分:

什麼是TTFB呢?
1.TTFB (Time To First Byte),是最初的網絡請求被髮起到從服務器接收到第一個字節這段時間,它包含了 TCP連接時間,發送HTTP請求時間和獲得響應消息第一個字節的時間。
注意:網頁重定向越多,TTFB越高,所以要減少重定向
TTFB優化的方法有:

1.減少DNS查詢

2.使用CDN

3.提早Flush

4.添加週期頭


什麼是TTSR呢?
2.TTSR(Time to Start Render)
TTSR-開始渲染時間,指某些非空元素開始在瀏覽器顯示時的時間,這也是一項重要指標,即TTSR越短,用戶越早瀏覽器中的內容,心理上的等待時間會越短。過多的CPU消耗會拖慢TTSR,所以網站中有大量圖片和腳本往往會造成不良用戶體驗。

注意
TTSR優化:
1.優化TTFB
2.降低客戶端CPU消耗,即頁面加載初期不要有大腳本運行,把JS腳本放到頁面下方
3.使用效率較高的CSS選擇器,避免使用CSS表達式
4.避免使用CSS濾鏡

前端TTSR測試腳本:

複製代碼

<head> 
        <script> 
            (function(){ 
                var timeStart = + new Date, 
                    limit = 1, 
                    timer = setInterval(function(){ 
                    if((document.body&&document.body.scrollHeight > 0) || (limit++ == 500)){ 
                        clearInterval(timer); 
                        console.info('TTSR:',+ new Date - timeStart,';duration:',limit); 
                    } 
                },10); 
            })() 
        </script> 
    </head>

複製代碼

在頁面端無法簡單測試出具體的TTSR,不過可以通過模擬腳本得到大概的時間,Firefox提供了一個MozAfterPaint事件,經測試,用於TTSR並不準確,如果有MozBeforePaint事件該有多好。

什麼是TTDC呢?
3.TTDC(Time to Document Complete)
TTDC-文檔完成時間,指頁面結束加載,可供用戶進行操作的時間,等價於瀏覽器的onload事件觸發點。TTDC是比較重要的性能優化對象,TTDC越低,頁面加載速度越快,用戶等待時間越短。
注意
TTDC的優化方法有:

1.優化TTFB

2.優化TTSR

3.優化首屏時間,將不必要的頁面加載放到onload事件之後

TTDC前端測試:
常見性能測試平臺大多使用IE瀏覽器的DocumentComplete事件來度量TTDC,DocumentComplete事件觸發時,頁面的狀態應是READYSTATE_COMPLETE,所以在頁面中我們可以用JS腳本判斷:

複製代碼

var win = window,doc = document; 
if(win.attachEvent || doc.hasOwnProperty('onreadystatechange')){ 
doc.onreadystatechange = function(){ 
 if(doc.readyState == 'complete'){ 
  /** 
  * test 
    do something... 
   */ 
  } 
} 
}else{ 
  win.addEventListener('load',function(){ 
 /** 
  * test 
   do something... 
  */ 
 },false); 
}

複製代碼

 

什麼是TTFL呢?
4.TTFL(Time to Fully Loaded)
TTFL-完全加載時間,指頁面在onload之前和onload事件之後額外加載的內容所花費的時間的總和,即頁面完完全全加載完畢消耗的總時間。
注意
TTFL的優化方法:

1.優化TTFB

2.優化TTSR

3.優化TTDC

4.延遲加載

5.異步加載

6.按需加載

 

如何優化網頁首字節時間
1:
看一下詳情分析頁面。
DNS解析:如果是 DNS 解析時間太長,那是你的域名解析服務器不好,請更換靠譜的 NS 服務器。
初始化連接:如果是初始化連接的時間太長,那是你機房的網絡不好,請更換更好的機房
如果上面兩個都不是。那就是你的代碼性能不好,代碼執行消耗的時間太長。請優化代碼,或者更換更好的機器。
2:
客戶端t1時刻發起對於某個url的請求,經過DNS解析獲取相應的IP地址後,發起對該IP地址的socket連接,在完成三次握手建立tcp連接後,客戶端發送http請求信息,服務端收到請求後返回響應的內容,當客戶端在t2時刻收到服務端返回內容的第一個字節,則第一字節時間=t2-t1。 第一字節的時間= DNS解析的時間+socket三次握手時間+http請求時間+第一字節返回的時間。 首字節的時間是0,說明很快呀。不需要做優化。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章