摘要：性能統(tǒng)計(jì)有助于幫我們檢測(cè)網(wǎng)站的用戶體驗(yàn)。這樣，我們就輕輕松松的統(tǒng)計(jì)到了首屏?xí)r間。下一章，我們將繼續(xù)聊聊百度移動(dòng)版首頁(yè)那些事。

歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：

https://segmentfault.com/blog/frontenddriver

上一篇文章我們討論了，如何進(jìn)行前端日志打點(diǎn)統(tǒng)計(jì)：

https://segmentfault.com/a/1190000005861012

這一篇我們來(lái)看看如何進(jìn)行速度統(tǒng)計(jì)

網(wǎng)站的速度影響了用戶訪問(wèn)網(wǎng)站最初的體驗(yàn)。試想，如果一個(gè)用戶，在等待了若干秒后，還是停留在白屏的狀態(tài)，那么他的選擇將是離開(kāi)這個(gè)網(wǎng)站。性能統(tǒng)計(jì)有助于幫我們檢測(cè)網(wǎng)站的用戶體驗(yàn)。

這里引用百度百科中的一句話 ----?通常一個(gè)網(wǎng)站，如果首屏?xí)r間在2秒以內(nèi)是比較優(yōu)秀的，5秒以內(nèi)是可以接受的，5秒以上就不可容忍了。用戶會(huì)選擇刷新頁(yè)面或立刻離開(kāi)。

這里，有些數(shù)據(jù)需要與大家分享一下(來(lái)自FEX的統(tǒng)計(jì))：

可以看到，速度，對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)，重要性可見(jiàn)一斑。

這個(gè)指標(biāo)對(duì)于大多數(shù)網(wǎng)站來(lái)說(shuō)，非常重要。那么何為首屏?xí)r間呢？引用百度百科里的一句話，就是:

網(wǎng)站用戶體驗(yàn)的一個(gè)重要指標(biāo)?！≈敢粋€(gè)網(wǎng)站被瀏覽器如IE窗口上部800*600的區(qū)域被充滿所需時(shí)間。

其實(shí)就是你的網(wǎng)頁(yè)剛進(jìn)入時(shí)，渲染完整個(gè)瀏覽器屏幕的時(shí)間。

關(guān)于是否包含首屏所有的圖片下載完成。這個(gè)網(wǎng)上有些爭(zhēng)議，有的同學(xué)說(shuō)不包含圖片，只要DOM+樣式 都渲染完了，就算完成了。

筆者認(rèn)為，既然是首屏，那么首屏上所有的東西都加載完成，讓用戶感受不到還有沒(méi)完成的部分，就算完成了。

所以，綜合一下，咱們的首屏?xí)r間，包括首屏的DOM元素的渲染，展現(xiàn)在用戶第一屏幕的所有圖片都完成。

其實(shí)Chrome提供開(kāi)發(fā)著檢查網(wǎng)站整個(gè)渲染過(guò)程的小公舉，哦不，是小工具（如圖1.1.1所示）在F12開(kāi)發(fā)者工具的Network面板里面：

圖1.1.1

這個(gè)是屏幕捕獲的工具，可以看到整個(gè)網(wǎng)頁(yè)的渲染過(guò)程。我們接著來(lái)深究一下上述哪個(gè)時(shí)間點(diǎn)是首屏?xí)r間點(diǎn)。

我們來(lái)一起看看百度首頁(yè)的首屏情況，由于百度首頁(yè)加載比較快，所以這里咱們模擬一下3G網(wǎng)的延遲（如圖1.1.2）：

圖1.1.2

我們看到，雖然在240ms的時(shí)候，網(wǎng)頁(yè)算是被渲染出來(lái)了，但是還是有很多空白的地方。

279MS的時(shí)候，雖然框架都被渲染完成了，DOM與樣式也都渲染完成了，但是我們看到圖片還不完整，所以，當(dāng)然也不算首屏完成了。

有的同學(xué)會(huì)說(shuō)，318ms的時(shí)候，總算完成了吧，nonono，我們向后觀察，就會(huì)發(fā)現(xiàn)還有一些元素會(huì)再被渲染出來(lái)。也就是說(shuō)知道穩(wěn)定之前，我們都不能算首屏完成了。

知道487 ms的時(shí)候，頁(yè)面才算加載完成了。并且之后不會(huì)再發(fā)生頁(yè)面的抖動(dòng)了。

看完這些，相信聰明的你心里已經(jīng)有數(shù)了，什么是首屏?xí)r間。

? ? 這個(gè)其實(shí)不多說(shuō)，讀者也明白，就是頁(yè)面處于空白的時(shí)間。頁(yè)面空白，用戶就會(huì)焦躁，并且變得不耐心。影響白屏?xí)r間的多數(shù)是：DNS解析耗時(shí)+服務(wù)端耗時(shí)+網(wǎng)絡(luò)傳輸耗時(shí)。

? ? 顧名思義，這項(xiàng)指標(biāo)值得是，我們的網(wǎng)頁(yè)用戶可以使用的時(shí)間。一般來(lái)講 domready時(shí)間，便是我們的用戶可操作時(shí)間了。

? ? 通常指，頁(yè)面總體的下載時(shí)間，所有的頁(yè)面資源都下載完成。

? ? 由于業(yè)務(wù)不同，站長(zhǎng)們所關(guān)心的時(shí)間必然也不同了。比如你可能是一個(gè)電商網(wǎng)站的站長(zhǎng)，你關(guān)心你的第一屏商品到底展示的有多快( 通常這會(huì)帶來(lái)更多的收入)，所以，你需要監(jiān)控你的商品展現(xiàn)的時(shí)間。

如果并不想要花費(fèi)精力在這些統(tǒng)計(jì)上，只是要小小的關(guān)注一下的話，當(dāng)然可以自己打開(kāi)控制臺(tái)，在頁(yè)面的各個(gè)階段，將時(shí)間打印出來(lái)，亦或者是使用html5新增的接口：performance來(lái)評(píng)估一下自己的網(wǎng)站到底差在哪里(如圖2.0.1)。

圖2.0.1

但是，你的測(cè)試并不能代表所有的用戶的情況。而且，你需要一個(gè)監(jiān)控程序，去時(shí)刻提醒著你，現(xiàn)在你的網(wǎng)站的速度處于什么狀況。

????所以，對(duì)于有追求一些的站長(zhǎng)而言，筆者在這里更建議采用用戶日志，即，在自己網(wǎng)站的代碼中，增加統(tǒng)計(jì)，并把統(tǒng)計(jì)結(jié)果發(fā)送到服務(wù)器。在服務(wù)器采集這些日志，并產(chǎn)生一個(gè)監(jiān)控的網(wǎng)站。其實(shí)大可不必使用一些付費(fèi)的服務(wù)，我們自己就可以輕輕松松的做一個(gè)簡(jiǎn)答的速度監(jiān)控服務(wù)。

? ? 在本文的第三節(jié)，我們將會(huì)一起做一個(gè)小的速度監(jiān)控服務(wù)的例子。很多站長(zhǎng)甚至可以拿過(guò)來(lái)直接使用。接下來(lái)，我們還是針對(duì)之前我們提到過(guò)的幾個(gè)指標(biāo)，注意講解統(tǒng)計(jì)方法：

? ??其實(shí)，對(duì)于網(wǎng)頁(yè)高度小于屏幕的網(wǎng)站來(lái)說(shuō)，統(tǒng)計(jì)首屏?xí)r間非常的簡(jiǎn)單，只要在頁(yè)面底部加上腳本打印當(dāng)前時(shí)間即可，或者對(duì)于網(wǎng)頁(yè)高度大于一屏的網(wǎng)頁(yè)來(lái)說(shuō)，只要在估算接近于一屏幕的元素的位置后，打印一下當(dāng)前時(shí)間即可。

? ? 比如，現(xiàn)在你有一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)（如圖2.1.1所示）：

    
        
        
    
    
        
這是第一屏，這是第一屏
        
        
        
        
        
第一屏結(jié)尾，第一屏結(jié)尾
        
        
    

圖2.1.1

我們需要統(tǒng)計(jì)首屏?xí)r間的話，則需要定義一個(gè)基準(zhǔn)，就是--什么時(shí)候用戶點(diǎn)開(kāi)的當(dāng)前網(wǎng)頁(yè)，HTML5的performance接口提供了這個(gè)時(shí)間：performance.timing.navigationStart，這個(gè)就是用戶訪問(wèn)我們網(wǎng)頁(yè)最開(kāi)始的跳轉(zhuǎn)時(shí)間了。

我們?cè)陧?yè)面開(kāi)頭處，將基準(zhǔn)記下。

接下來(lái)，在大約的首屏處加上我們的統(tǒng)計(jì)：

第一屏結(jié)尾，第一屏結(jié)尾

我們?cè)賮?lái)看看我們的頁(yè)面(如圖2.1.2所示)：

圖2.1.2

便有了首屏?xí)r間。

霸特，霸特。同學(xué)們不要激動(dòng)的太早。我們這個(gè)首屏?xí)r間，并不沒(méi)有算上圖片。所以，我們得把首屏中所有圖片的加載時(shí)間也算上。

    
        
        
        
    
    
        
這是第一屏，這是第一屏
        
        
        
        
        
第一屏結(jié)尾，第一屏結(jié)尾
        
        
        
    

以上封裝的首屏?xí)r間函數(shù)，無(wú)依賴比較小巧，同學(xué)們可以直接使用于自己的項(xiàng)目中。這樣，我們就輕輕松松的統(tǒng)計(jì)到了首屏?xí)r間。

????可以在頁(yè)面的head底部添加的JS代碼來(lái)統(tǒng)計(jì)白屏?xí)r間，雖然這樣做可能并不十分精準(zhǔn)，但是也可以基本代表了首屏?xí)r間，如圖2.2.1所示。

圖2.2.1

????前面提到過(guò)document.ready其實(shí)就可以算作我們的用戶可操作時(shí)間啦。我們不妨直接試試，如圖2.3.1所示：

document
.addEventListener(
    "DOMContentLoaded",
    function (event) {
        window.logInfo.readyTime = +new Date() - window.logInfo.openTime;
        console.log("用戶可操作時(shí)間：", window.logInfo.readyTime);
    }
);

圖2.3.1

????頁(yè)面總體下載時(shí)間，使用window.onload即可，這可以幫助我們看看我們所有的資源是否拖慢網(wǎng)頁(yè)，如圖2.4.1所示：

window.onload = function () {
    window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;
    console.log("總下載時(shí)間：", window.logInfo.allloadTime + "ms");
};

圖2.4.1

? ? 我們將上述的統(tǒng)計(jì)合并，一個(gè)完整的統(tǒng)計(jì)就出來(lái)了，如圖2.5.1所示：

    
        
        
        
    
    
        
這是第一屏，這是第一屏
        
        
        
        
        
第一屏結(jié)尾，第一屏結(jié)尾
        
        
        
    

圖2.5.1

按照上一節(jié)( https://segmentfault.com/a/1190000005861012 )所說(shuō)，我們將這個(gè)日志發(fā)送到服務(wù)端去。

var logStr = "";
for (var i in timname) {
    logStr += "&" + i + "=" + window.logInfo[i];
}
(new Image()).src = "http://localhost:8091/?action=speedlog" + logStr;

開(kāi)啟我們的nginx監(jiān)聽(tīng)，并在服務(wù)端接收這條日志如圖2.5.2，圖2.5.3所示：

圖2.5.2

圖2.5.3

我們看看日志里面是不是已經(jīng)多了一條了呢？

要是再加以定時(shí)任務(wù)，日志采集等功能的輔助，我們就能實(shí)時(shí)掌握自己網(wǎng)站的性能啦。

https://segmentfault.com/a/1190000005882953

后續(xù)，我們也會(huì)一起來(lái)聊聊，如何優(yōu)化我們的這些速度，以提高我們的網(wǎng)站性能。

原創(chuàng)文章,版權(quán)所有,轉(zhuǎn)載請(qǐng)注明出處