HTML5在網(wǎng)站性能監(jiān)控方面帶來的新特性

時間：2022-05-29 17:21:01 | 來源：網(wǎng)絡營銷

時間：2022-05-29 17:21:01 來源：網(wǎng)絡營銷

HTML5本身是由W3C推薦出來的，它的開發(fā)是通過谷歌、蘋果，諾基亞、中國移動等幾百家公司一起醞釀的技術(shù)，這個技術(shù)最大的好處在于它是一個公開的技術(shù)。換句話說，每一個公開的標準都可以根據(jù)W3C的資料庫找尋根源。

另一方面，W3C通過的HTML5標準也就意味著每一個瀏覽器或每一個平臺都會去實現(xiàn)多設備、跨平臺，用HTML5的優(yōu)點主要在于這個技術(shù)可以進行跨平臺的使用。比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺、Opera的游戲中心、Facebook應用平臺，甚至可以通過封裝的技術(shù)發(fā)放到AppStore或GooglePlay上，所以它的跨平臺非常強大，也是大多數(shù)人對HTML5有興趣的主要原因。

HTML5技術(shù)給Web帶來很多新的元素，不僅使網(wǎng)站變得越來越美觀，交互體驗越來越接近完美，更使得很多曾經(jīng)不可能完成的功能都可以實現(xiàn)。

本文針對HTML5在網(wǎng)站性能監(jiān)控方面帶來的新特性，與大家分享一下實踐經(jīng)驗。

1、網(wǎng)站性能監(jiān)控的現(xiàn)狀

網(wǎng)站性能越來越被大眾所關(guān)注，因為它直接影響用戶體驗。大多數(shù)互聯(lián)網(wǎng)公司在網(wǎng)站性能監(jiān)控方面僅做到服務器性能監(jiān)控和網(wǎng)絡I/O監(jiān)控，這樣的背景催生了一些第三方做網(wǎng)站性能監(jiān)控的公司，如基調(diào)、監(jiān)控寶、GA等。

它們都有一個共同點——基本在全國主要城市鋪設了監(jiān)控點，定時主動訪問頁面來獲取性能數(shù)據(jù)。然后定時對數(shù)據(jù)進行匯總，生成報表后提供給最終用戶。

2、第三方監(jiān)控的優(yōu)勢與劣勢

首先，我們先來看下第三方監(jiān)控的優(yōu)勢與劣勢，簡單的來說，有如下一些優(yōu)勢與劣勢：

（1）、優(yōu)勢

①、無需改動現(xiàn)有程序代碼。第三方監(jiān)控由于采用主動訪問并采集的機制，只需要在用戶管理界面配置相關(guān)頁面的URL，就可以模擬用戶訪問的過程，因而完全不需要開發(fā)人員介入。

②、能采集到豐富的數(shù)據(jù)。因為模擬訪問使用的瀏覽器由供應商部署，所以可以在客戶端加入自定義插件或集成其他性能工具，能通過編程實現(xiàn)各類性能數(shù)據(jù)的采集。

③、數(shù)據(jù)量不大，匯總方便。這取決于供應商的監(jiān)測點部署，但限于成本考慮，一般供應商只會在一二線城市部署，這樣數(shù)據(jù)量匯總相對容易，分析復雜度較低。

④、出現(xiàn)問題時可重現(xiàn)和驗證。因為能有豐富的數(shù)據(jù)，并且發(fā)生問題的監(jiān)測點可控，我們就能很容易重現(xiàn)，方便排錯。

（2）、劣勢

①、一次性投入大。監(jiān)測點的部署需要大量設備支持，如果只是為一家公司提供服務，性價比不高，需要大量的資金。

②、難以完成不同瀏覽器下的測試。監(jiān)測點無法顧及到所有用戶使用的瀏覽器，對于不同的業(yè)務，客戶群體不一致，瀏覽器的權(quán)重也不同，故監(jiān)測點一般以IE和WebKit核心的瀏覽器為主。

③、響應有時間間隔。一般來說，監(jiān)控頁面不可能只有一個，會有很多，測試時為保證不互相干擾，特別是性能測試，會依次按隊列方式進行，這會使得一個循環(huán)的時間很長，且需要等到所有監(jiān)測點均完成測試后方可獲得最終報告，不能及時反映當前的狀態(tài)。

④、對于強依賴流程進入的頁面難以監(jiān)控。例如預訂流程，需要POST大量信息，且有時效性，對于監(jiān)測點來說具有一定的挑戰(zhàn)?，F(xiàn)在有些運營商可以提供一些簡單的腳本功能，但對于日益復雜的業(yè)務需求，已無法滿足。

⑤、監(jiān)控點有限，不能覆蓋整體用戶群。監(jiān)控點可以增加，但總是無法覆蓋所有的網(wǎng)絡環(huán)境，因此數(shù)據(jù)只能用于參考，并不能代表真實用戶感受。

3、HTML5給我們帶來了什么？

HTML5中新加入的performance標準在IE9、最新的Firefox和Chrome中都已實現(xiàn)，精確度也達到了毫秒級別，通過詳細時間點，我們能獲得很多關(guān)鍵的指標項。


HTML5性能指標

在此，我們簡單看一下一些可用的指標（如上圖所示）。其中有很多能幫助我們了解客戶端性能和客戶感受，例如：服務器端處理時間 + 網(wǎng)絡傳輸時間（較短）=responseStart–requestStart，客戶端白屏時間=domInteractive– navigationStart或responseStart等。

對此，我們最主要監(jiān)控的指標有下面幾種：

①、Total總時長：從頁面跳轉(zhuǎn)開始至頁面onLoad；

②、DNS域名解析時長：從發(fā)起頁面域名解析至解析完成；

③、Connect建立與服務器TCP連接時長：從發(fā)起TCP連接至三次握手完成；

④、Request請求時長：從發(fā)起頁面請求至服務器端返回第一個字節(jié)；

⑤、Response響應時長：從接收服務器發(fā)回的第一字節(jié)至主頁面下載完成；

⑥、DomReady頁面Dom樹解析：從頁面跳轉(zhuǎn)至頁面Dom元素穩(wěn)定。

接下來我們看看客戶端數(shù)據(jù)采集的優(yōu)勢與劣勢：

（1）、優(yōu)勢

①、真實的客戶訪問性能數(shù)據(jù)?？蛻粼谠L問網(wǎng)站的同時，可能還在做很多其他操作，并且可能還有很多其他的網(wǎng)絡應用占用帶寬，真實的用戶數(shù)據(jù)對于了解客人感受具有代表性。

②、能區(qū)分瀏覽器、操作系統(tǒng)平臺。時下，用戶使用著各種各樣的外殼瀏覽器和自定義瀏覽器，而普通的測試無法覆蓋到如此復雜的網(wǎng)站瀏覽環(huán)境，因此這部分數(shù)據(jù)尤其珍貴（具體可查看億企邦《各大瀏覽器在Mac和Windows平臺對CSS3和HTML5兼容情況查詢表》的相關(guān)介紹）。

③、覆蓋范圍廣，且地域分布較均衡。相比第三方，我們能依靠JavaScript收集到各個地域的數(shù)據(jù)，甚至是海外，規(guī)模越大的網(wǎng)站，越有意義，能反映用戶當?shù)氐木W(wǎng)絡狀況，獲知CDN加速效果等。

④、瀏覽器原生支持，精度高。毫秒級的精度對于網(wǎng)絡DNS、Connect時間，以及瀏覽器初始化事件執(zhí)行時間有很大的意義。

（2）、劣勢

①、對于舊版本瀏覽器無能為力。性能數(shù)據(jù)采集需要HTML5的支持，對于IE6、IE7、IE8，不支持這一標準是其最大硬傷，不過得益于HTML5的推進速度，隨著高版本瀏覽器的發(fā)布，這個問題會逐漸淡化，并不需要我們操心（具體可查看億企邦《如何解決IE6/IE7/IE8瀏覽器不兼容HTML5新標簽的問題》的相關(guān)介紹）。

②、需要部署少量JavaScript代碼。類似于Google Analyze的代碼加載機制，需要在每個頁面的底部嵌入代碼，工作量取決于網(wǎng)站架構(gòu)，如果有統(tǒng)一的頁腳，工作量其實很小。

③、無法重現(xiàn)。由于數(shù)據(jù)來自客戶，當時的狀態(tài)無法保留，很難模擬客戶的環(huán)境，會對于排錯有一定的影響。

4、最佳實踐

在數(shù)據(jù)采集方面已累積了一定經(jīng)驗，主要實現(xiàn)思路與環(huán)境搭建如圖所示：


圖 主要的實現(xiàn)思路與環(huán)境搭建

（1）、JavaScript 采集 / 數(shù)據(jù)回發(fā)

當頁面加載完成后，部署在頁面中的JavaScript代碼會從performance.timing對象中獲取性能信息，然后把這些數(shù)據(jù)拼裝成URL參 數(shù)，模擬發(fā)送一個圖片請求到Collector服務器。模擬圖片請求的方式和Google Analyze等相似，即new Image().src=。這種方式應用廣泛，具有跨域、兼容性好等優(yōu)點。

這種回傳方式也有不足。眾所周知，GET請求的參數(shù)長度是有限制的，這意味著我們必需小心處理回發(fā)數(shù)據(jù)的長度，對于超長的信息進行截斷。如若不然，過長的信息有可能會被直接丟掉，不利于后續(xù)的處理與分析。

（2）、Nginx 接收 / 記錄Log

Collector 服務是由性能卓越的Nginx集群來擔任的。為了最大程度降低客戶端回傳數(shù)據(jù)時的資源占用，Nginx采取只記日志，不做任何處理的辦法。這樣客戶端回傳數(shù)據(jù)可以快速完成并關(guān)閉連接，使之對用戶體驗的影響降至最小。而Nginx（包括Apache等）的常用訪問日志格式中都含有GET請求的完整URL，我 們回傳的性能數(shù)據(jù)就記錄在URL的參數(shù)中。

為了優(yōu)化Collector集群的負載能力，我們需要對Linux、Nginx等做相應的調(diào)優(yōu)。

Linux方面，最大打開文件數(shù)是最關(guān)鍵的一個參數(shù)。由于常規(guī)Web服務器往往運行著PHP、JavaScript等動態(tài)腳本，每個請求還涉及數(shù)據(jù)庫操作，它們的并發(fā)能力到1000就不錯了。Linux服務器默認配置通常足以滿足這個級別的并發(fā)數(shù)。但我們的場景比較特殊：我們幾乎不需要做處理，只記下訪問日志即可。

Nginx服務器以并發(fā)性能強著稱，官方數(shù)據(jù)表示可以支持10萬并發(fā)。在Linux系統(tǒng)中，每一個連接，對應的就有一個Socket文件，因此最大并發(fā)數(shù) 受制于系統(tǒng)對最大打開文件數(shù)的限制。除此之外，還有一些網(wǎng)絡相關(guān)的內(nèi)核參數(shù)也根據(jù)應用場景進行了優(yōu)化。

Nginx方面，去除了不需要的功能，保留了HttpEmptyGifModule。這個模塊對到來的請求僅返回一個1×1像素的GIF圖片。由于圖片數(shù)據(jù)只有幾個字節(jié)，直接保持在內(nèi)存中，所以它可以以極快的速度對客戶端請求做出響應。

（3）、讀取 Log / 發(fā)送至隊列

一個專門負責日志傳送的Agent會通過類似tail的機制跟蹤日志內(nèi)容，實時地將新增日志條目發(fā)送至消息隊列，以備后續(xù)處理。這部分的意義在于：

第一，它將集群中分散的日志統(tǒng)一發(fā)送到了一處，是一個日志的聚合過程。

第二，將分析程序與Nginx服務器解耦開來，最大化保障Nginx集群的高可用性，也最大化保障了RAW Data的可用性。

（4）、從隊列中取出 / Storm集群實時分析

后端數(shù)據(jù)分析程序采用了分布式實時流數(shù)據(jù)處理框架Storm?；谠摽蚣苓M行處理，一來面對搜集到的海量數(shù)據(jù)，可以橫向擴展處理能力，二來實時流式的運算延遲很小，可以實時獲取頁面性能信息，使及時的預警成為可能。

Storm把數(shù)據(jù)處理抽象成由一個個邏輯單元組成的拓撲結(jié)構(gòu)（如下圖）。每個邏輯單元由運算和輸入輸出組成，按照Storm的術(shù)語，這些邏輯單元有兩大類：Spout和Bolt，其中Spout是數(shù)據(jù)的源頭。


圖 Storm運算拓撲結(jié)構(gòu)示意圖

這些拓撲結(jié)構(gòu)，將被分散到集群中的各個物理節(jié)點上，從而進行分布式的高效運算，可以迅速處理大量數(shù)據(jù)。

我們在Storm集群上所做的事情，包括瀏覽器、操作系統(tǒng)、地理位置等的分析，分析后的數(shù)據(jù)，直接支持按地區(qū)、運營商、系統(tǒng)平臺、瀏覽器類型，以及指定具體的頁面等條件任意查詢和報表。

（5）、產(chǎn)生實時報表 / 預警郵件 / 預警短信

借助于Storm框架的強大實時處理能力，對日志的分析可以迅速產(chǎn)生實時報表。此外通過與歷史數(shù)據(jù)的參照對比，還可以就性能數(shù)據(jù)中的異常信息給予預警，包括發(fā)送預警郵件和預警短信等。

實時報表直接在內(nèi)存中處理，借助Storm的DRPC（Distributed Remote Procedure Call）（如下圖），也即分布式遠過程調(diào)用，可以把緩存在各個運算節(jié)點中的最近數(shù)據(jù)直接聚合起來生成報表。


圖 Storm Distributed RPC示意圖

通過一些規(guī)則判斷，我們對實時數(shù)據(jù)流進行一些預警操作。預警事件觸發(fā)后，相關(guān)信息作為一個事件發(fā)往報警系統(tǒng)。報警系統(tǒng)根據(jù)配置，向相關(guān)人員發(fā)送預警郵件或短信。

（6）、日周季年匯總

在Storm輸出數(shù)據(jù)的基礎上，定時按日、周、季、年進行匯總，對于匯總數(shù)據(jù)可以方便地進行歷史數(shù)據(jù)查詢，為實時預警、長期性能評估等提供參考。同時以不同粒度進行舊數(shù)據(jù)的匯總，可以逐步丟棄過時的龐大明細數(shù)據(jù)，減輕數(shù)據(jù)庫的壓力。

5、還有什么我們可以做的？

整個環(huán)境搭建需要不少的人力物力，很多人可能會對其價值懷疑。在這里，我想告訴大家，客戶端的數(shù)據(jù)收集是非常值得投入的。

除了以上提到的頁面訪問的時間點數(shù)據(jù)采集外，其實我們還有很多地方可以復用。

例如客戶端的JavaScript錯誤采集，使用try catch和onerror的組合，收集客戶端的錯誤信息，我們也把這類數(shù)據(jù)歸為網(wǎng)站的性能數(shù)據(jù)，JavaScript錯誤會直接影響用戶對網(wǎng)站的印象，同時會影響用戶在網(wǎng)站的消費，直接關(guān)系到利潤，不可忽視。

又例如，通過用戶行為數(shù)據(jù)采集，可以獲得頁面的基本訪問信息。用戶訪問流、用戶在頁面上的所有操作，都可以幫助改進現(xiàn)有產(chǎn)品，如果條件允許，配合A/B測試，對于新產(chǎn)品的研發(fā)也能提供很多有價值的參考。

因此，大家可以憑借想象力，擴展思路，獲得更多有意義的信息，完成更多有意義的研究。

億企邦點評：

對于Web端而言，HTML5將是一個完整的操作系統(tǒng)，它在不同的底層系統(tǒng)之上，借助于瀏覽器的實現(xiàn)，封裝了統(tǒng)一標準的API允許開發(fā)的程序跨設備（PC、Mac、SmartPhone），跨平臺（Windows、MacOS、iOS、Android、whatsoever）的運行，最大的好處，就是一處開發(fā)，多處使用。

Web端的開發(fā)而言，你可以盡情的享受HTML5這種統(tǒng)一封裝帶來的好處，唯一要等待的就是瀏覽器對其支持的完善，但這種完善的到來，無疑是確定的。