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