前面的我寫的《【技術貼】如何提高網頁打開速度|優化網站》的文章里在優化方面里提到了什么是首字節。
下面我就來告訴大家什么是首字節吧,首字節到底有什么用。
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.按需加載
明天我們講《如何設置靜態內容緩存時間》,更多網站技術方面的優化請關注-天津網站建設-天津文率科技有限公司 網址m.codepolly.com
韓文博的新浪博客會同時更新,http://blog.sina.com.cn/u/1783136603,請大家多多關注