三分鐘淺談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貓在後台自己默默的載入了許多資源文件，只是用戶察覺不到罷了。

（轉自博客園）

2017中公教育特別推出勤工儉學計劃：http://www.ujiuye.com/zt/qgjx/?wt.bd=bgz

還有500萬的就業基金等著你：http://www.ujiuye.com/zt/jycj/?wt.bd=bgz

什麼？海量IT學習資料白給你都不要？別想了，加群搶：584539956

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！