前面的我寫(xiě)的《【技術(shù)貼】如何提高網(wǎng)頁(yè)打開(kāi)速度|優(yōu)化網(wǎng)站》的文章里在優(yōu)化方面里提到了什么是首字節(jié)。
下面我就來(lái)告訴大家什么是首字節(jié)吧，首字節(jié)到底有什么用。
TTFB-首字節(jié)時(shí)間，是指從客戶(hù)端開(kāi)始和服務(wù)端交互到服務(wù)端開(kāi)始向客戶(hù)端瀏覽器傳輸數(shù)據(jù)的時(shí)間（包括DNS、socket連接和請(qǐng)求響應(yīng)時(shí)間），是能夠反映服務(wù)端響應(yīng)速度的重要指標(biāo)，獲取在接收到響應(yīng)的首字節(jié)前花費(fèi)的毫秒數(shù)。
lTime = Response.TTFB
返回值 lTime As Long：首字節(jié)響應(yīng)時(shí)間（以毫秒為單位）。
TTFB:httpwatch的timechart中的一列參數(shù)。
什么是TTFB呢？
1.TTFB (Time To First Byte)，是最初的網(wǎng)絡(luò)請(qǐng)求被發(fā)起到從服務(wù)器接收到⑴個(gè)字節(jié)這段時(shí)間，它包含了 TCP連接時(shí)間，發(fā)送HTTP請(qǐng)求時(shí)間和獲得響應(yīng)消息⑴個(gè)字節(jié)的時(shí)間。
注意：網(wǎng)頁(yè)重定向越多，TTFB越高，所以要減少重定向
TTFB優(yōu)化的方法有：
1.減少DNS查詢(xún)
2.使用CDN
3.提早Flush
4.添加周期頭
什么是TTSR呢？
2.TTSR(Time to Start Render)
TTSR-開(kāi)始渲染時(shí)間，指某些非空元素開(kāi)始在瀏覽器顯示時(shí)的時(shí)間，這也是一項(xiàng)重要指標(biāo)，即TTSR越短，用戶(hù)越早瀏覽器中的內(nèi)容，心理上的等待時(shí)間會(huì)越短。過(guò)多的CPU消耗會(huì)拖慢TTSR，所以網(wǎng)站中有大量圖片和腳本往往會(huì)造成不良用戶(hù)體驗(yàn)。
注意
TTSR優(yōu)化：
1.優(yōu)化TTFB
2.降低客戶(hù)端CPU消耗，即頁(yè)面加載初期不要有大腳本運(yùn)行，把JS腳本放到頁(yè)面下方
3.使用效率較高的CSS選擇器，避免使用CSS表達(dá)式
4.避免使用CSS濾鏡
前端TTSR測(cè)試腳本：
<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>
在頁(yè)面端無(wú)法簡(jiǎn)單測(cè)試出具體的TTSR，不過(guò)可以通過(guò)模擬腳本得到大概的時(shí)間，F(xiàn)irefox提供了一個(gè)MozAfterPaint事件，經(jīng)測(cè)試，用于TTSR并不準(zhǔn)確，如果有MozBeforePaint事件該有多好。
什么是TTDC呢？
3.TTDC(Time to Document Complete)
TTDC-文檔完成時(shí)間，指頁(yè)面結(jié)束加載，可供用戶(hù)進(jìn)行操作的時(shí)間，等價(jià)于瀏覽器的onload事件觸發(fā)點(diǎn)。TTDC是比較重要的性能優(yōu)化對(duì)象，TTDC越低，頁(yè)面加載速度越快，用戶(hù)等待時(shí)間越短。
注意
TTDC的優(yōu)化方法有：
1.優(yōu)化TTFB
2.優(yōu)化TTSR
3.優(yōu)化首屏?xí)r間，將不必要的頁(yè)面加載放到onload事件之后
TTDC前端測(cè)試：
常見(jiàn)性能測(cè)試平臺(tái)大多使用IE瀏覽器的DocumentComplete事件來(lái)度量TTDC，DocumentComplete事件觸發(fā)時(shí)，頁(yè)面的狀態(tài)應(yīng)是READYSTATE_COMPLETE，所以在頁(yè)面中我們可以用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-完全加載時(shí)間，指頁(yè)面在onload之前和onload事件之后額外加載的內(nèi)容所花費(fèi)的時(shí)間的總和，即頁(yè)面完完全全加載完畢消耗的總時(shí)間。
注意
TTFL的優(yōu)化方法：
1.優(yōu)化TTFB
2.優(yōu)化TTSR
3.優(yōu)化TTDC
4.延遲加載
5.異步加載
6.按需加載
明天我們講《如何設(shè)置靜態(tài)內(nèi)容緩存時(shí)間》，更多網(wǎng)站技術(shù)方面的優(yōu)化請(qǐng)關(guān)注-天津網(wǎng)站建設(shè)-天津文率科技有限公司 網(wǎng)址www.srczuche.com
韓文博的新浪博客會(huì)同時(shí)更新，http://blog.sina.com.cn/u/1783136603，請(qǐng)大家多多關(guān)注
