轉 web前端性能分析--分析篇

經過具體實施後就能夠得到第一手的web前端性能的數據了，而後每次新版本都跑，這就會得到大量的數據，爲性能分析提供了基礎的輸入，同時應該還要綜合使用多種工具去從不一樣的方向收集數據；好比showslow同時還支持yslow，pagespeed，webpagetest等測試工具傳上去的數據，所以在具體的分析以前要從縱向、橫向來收集數據，這樣統計分析出來的結果纔能有實際的參考價值。固然若是你還發現其它工具也能夠提供一些性能數據，也能夠收集起來，好比：httpanalyzer，httpwatcher都支持程序調用接口，很方便就能夠收集http訪問過程當中的數據。還有像firebug，ie開發者工具都是能夠提供性能調用功能的。


「工欲善其事，必先利其器」，工具備了，生產資料也有了--數據，那麼後面的工做是靠咱們本身的勞動力來產生價值了。性能調優的前提是分析出問題，分析問題是須要必定的準則的，不能盲人摸象人家說性能很差就很差，人家說已經調到最優了就是最優的狀態了，只能這些標準仍是須要結合實際狀況來考慮不能一味的應用。好比：全部的最佳實踐都會建議少加圖片的展現，搜索網站是能夠這樣，可是若是是電子商務網站不多是這樣，不然網站就沒有必要作了；而性能調優正是在這些現有的情況下、保證現有業務功能的前提下去找出具體能夠優化的細節，幫助提升總體性能，而不是以犧牲業務功能爲代價。好比：電子商務的網站雖然不能減小，可是能夠把圖片轉換成優化格式的文件，png比bmp確定好，png8比gif要好等等。


那麼接下來就是以前N多性能評測工具的最佳實踐，學習並瞭解這些最佳實踐是入門的第一步，至少你能夠有一個容易的入口來開始進行你的工做了。具體的連接見下：
yslow
page speed
dynatrace
其實大概瞭解就能夠了，由於使用工具測試後都會提示你哪些不知足，具體有哪些地方沒有知足，很是的清晰方面。


而工具每每是死的，並且一般不少時候這些評測工具給出了高分可是前端性能仍是會很慢的，因此規則只是保證web具有良好性能的基本要素之一，但並非惟一或者最重要的。因此在評測工具以後咱們還要看具體的載入完成時間長短，固然不一樣的網頁載入時間是不同的，搜索的主要就幾百k，而電子商務首頁都得十幾M甚至更多，因此它們的頁面載入的所有時間確定是不同的。不過沒有關係，由於咱們沒有必要等全部內容都下載了再呈現內容給客戶，因此仍是能夠投機來「矇騙」過用戶，好比：優先顯示首屏的內容，這樣用戶就會從感受上認同這個頁面的高性能了。而頁面的完整加載時間也是有價值的，能夠內部制定一個性能標準，根據不一樣的頁面屬性來肯定一個具體的網頁徹底加載時間應該在一個什麼樣的範圍內；同時還能夠做爲下次版本再測試時的基準數據。

到這裏2個重要的標準出來了，一個是用戶有第一感受時的時間，一個是徹底加載所用的時間；調優的目的就是下降這2個時間，想要具體調優以前咱們必須瞭解這些時間分別都由哪些時間判斷組成的，這樣就能夠爲達到最佳性能而提供最優秀的頁面展示方案了。

 

第一用戶感受時間：
即瀏覽器開始渲染時的時間，而瀏覽器開始渲染以前是要解析html，解析css文件，而後生成DOM樹，再轉換成渲染樹，再給渲染樹中的節點進行佈局計算【具體座標】，而後纔開始一層層樹開始渲染，因此每個步驟均可能影響到第一用戶感受時間。好比：
單個html文件過大則解析時間就會比較長
CSS格式單獨放在外部就比內嵌式的效率高，由於一次性所有加載和應用，並且引用css時應該在頁面的頭部，由於如今的瀏覽器通常不會等到所有解析完DOM纔去解析CSS或作其它事情，因此提早加載css文件能夠加速提早達到能夠渲染的時間點。
DOM樹生成是從html開始的，正常的html應該解析一遍就能夠完成了，可是若是html中有js調用，那麼在解析時就會反覆從新調整DOM樹的結構，這樣就會影響DOM生成的時間。
渲染樹 = DOM + CSS渲染說明；因此這塊的轉換速度取決於具體內容，渲染的層次越多天然越長
渲染樹的佈局計算時間，取決去渲染樹的節點數目，也就是DOM樹的節點數目
最後開始渲染並展示咱們看到的頁面內容


第一用戶感受時間---到---最終完成載入：
用戶有了第一感受並無結束，並且可能第一感受只是頁面上有內容，卻並非首屏的內容所有展示出來了；所以要保證良好的第一用戶感受，還得保障首屏的其餘內容也是第一和時間被下載並展示出來。因此首屏用到的外部資源要優先下載，而且使用性能較好的資源服務器，資源要分佈在不一樣的服務器【這樣就能夠並行下載了】，並且把較大的圖片等能夠切成多個小圖片，而後分別下載，這樣即便是一個較大的圖片也是能夠很快就能展示出來的。
頁面全部資源下載完成後纔會去加載onload事件，即頁面展示完成後要自動去作的一些事情，好比某些網站的彈窗、跳頁等；這些操做都是js去作的，而若是作js運行的時間太長，那麼即便頁面資源加載完成了，用戶的使用還不是很友好，因此js的運行時間也是前端性能的一部分，不只在加載時的js，整個頁面上其它地方的js性能也是要考慮的，好比單個ajax請求的過程，某個前端操做js的使用時間；而JS除了時間性能之外還會有cpu、內存佔用的性能考慮，這些dynatrace工具是能夠提供的。
另外在整個外部資源下載過程當中，還要儘可能避免各種請求錯誤。

固然，除了這些還會有其它因素會影響web前端性能，好比：網速，DNS服務器配置等；如何抓住性能的瓶頸點是最重要的，通常最簡單的就是看用時最長的段，而後再根據實際的狀況和環境肯定是否是正常的數值，進而肯定是否有可調優的可能性及對應的手段等。

轉自：http://blog.csdn.net/five3/article/details/7691365