三分鍾淺談TT貓的前端優化

首先看一張訪問TT貓首頁的截圖：

測試環境為穀歌瀏覽器，暫且不討論其它瀏覽器，截圖下方我們可以觀察到以下參數：

DOMContentLoaded：1.42s | Load：2.31s

以上參數是在CTRL+F5下測試的，也就是說不存在瀏覽器本地緩存一說，DOM渲染時間為1.42s，整個頁麵load時間為2.31s。

在互聯網世界中有一個八秒原則就體現了這網站打開速度的重要性。網絡用戶在訪問網站的時候，如果時間太長則會放棄對該網站的繼續訪問；反之，如果網站頁麵打開時間短，那麼你的網站將會獲得用戶的喜歡。天貓打開的速度為1-2s左右，這樣的速度都是被用戶認可的理想速度；如果在3~5秒，那麼這個時間就是不是太理想了；如果高於8秒那麼用戶就會直接關閉網頁，不再訪問。

如何優化

HTTP1.0時代，合並靜態文件(JS、CSS)，常見的手段比如Nginx的第三方模塊nginx-http-concat，減少請求加速訪問。盡管TT貓使用了CDN並且開啟了HTTP2.0，如果你仔細觀察TT貓的Elements，會發現一些靜態請求還是使用了合並請求。
靜態請求文件(JS、CSS)，在沒有CDN的情況下建議使用單獨的域名請求訪問。因為在同一時間針對同一域名下的請求有一定數量限製，超過限製數目的請求會被阻塞。多個域名會加大請求的並發量。因為貓大量使用了CDN，這裏就不能夠展示了，具體可以F12查看博客園的CSS、JS以及圖片的引用。
異步加載JS，使用HTML 5 屬性 async，當頁麵繼續進行解析時，腳本將被執行，async 屬性僅適用於外部腳本（隻有在使用 src 屬性時）。
使用CSS控製背景圖的方式，比如我們把常見的圖標放置在一張圖片上，CSS控製顯示，減少請求數量。
壓縮靜態文件(JS、CSS)，減少網絡傳輸，本地壓縮方式如UglifyJS 、YUI compressor以及JsMin，服務端壓縮手段如Nginx的GIZP。
圖片延時加載，對於首頁滿屏的圖片TT貓應該是采用滾動加載，使用延遲加載在可提高網頁下載速度。在某些情況下，它也能幫助減輕服務器負載。
盡量少的使用cookie存儲大量數據，建議使用本地存儲代替，減少不必要的數據請求。
JS引入方式，建議非預加載的JS在網頁底部引入，瀏覽器渲染網頁是從上往下，頁麵是用戶能看到的也能直觀感受到的，而js代碼是用戶看不到的，屬於“幕後”的東西，把“幕後”的東西放到最下麵。
CDN加速，其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。更有打不死CDN ，無攻擊時使用加速節點，有攻擊時自動切換高防節點，加速與防護同時享有。
開啟HTTPS安全訪問，按理說應該會影響訪問速度，但是HTTP2.0時代這個事情不存在了，新特性多路複用、壓縮頭信息以及二進製格式傳輸數據帶給飛一樣的感覺。
最後說一下帶寬，再牛逼的優化沒有基礎保障也是白扯，帶寬的作用也就不言而喻了。就好比六車道和單車道的公路，單位時間內的車流量就能很好的襯托出老司機此時此刻的心情。
當然說到車，首先你得有個好車，即使公路再寬，車不中也不行，就好比2017年了你安裝的還是128KB的帶寬，即使TT貓25G的全係帶寬也救不了你。

知識補充

部分同學可能會好奇，DOMContentLoaded和load到底有什麼區別，首先我們先看下DOM文檔加載的步驟

解析HTML結構。
加載外部腳本和樣式表文件。
解析並執行腳本代碼。
DOM樹構建完成。
加載圖片等外部文件。
頁麵加載完畢。

DOMContentLoaded是在DOM樹構建完成之後觸發的，而load是在頁麵加載完畢觸發的，所有load的時間要比DOMContentLoaded的時間稍微長一些。

//DOMContentLoaded 事件，不需要等待圖片等其他資源加載完成
$(document).ready(function() {
    // ...代碼...
});

//load-頁麵上所有的資源（圖片，音頻，視頻等）被加載以後才會觸發load事件
$(document).load(function() {
    // ...代碼...
});

所以一般情況下，我們初始化JS的時候沒有特殊要求使用ready即可。

如果大家打開瀏覽器F12自己測試，截圖中的前兩個參數是一直在變化的，其實TT貓在後台自己默默的加載了許多資源文件，隻是用戶察覺不到罷了。

三分鍾淺談TT貓的前端優化

如何優化

知識補充

推薦閱讀

上一篇：雲棲大會現場——除了達摩院這件大事，你知道VISLAB嗎？

下一篇：你看，那個人好像一條狗哎

相關內容

熱門內容

最新內容

三分鍾淺談TT貓的前端優化

如何優化

知識補充

推薦閱讀

上一篇： 雲棲大會現場——除了達摩院這件大事，你知道VISLAB嗎？

下一篇： 你看，那個人好像一條狗哎

相關內容

熱門內容

最新內容

上一篇：雲棲大會現場——除了達摩院這件大事，你知道VISLAB嗎？

下一篇：你看，那個人好像一條狗哎