前端重構實踐（一） —— 性能優化

• 前言：

最近一直在作性能優化和模塊化改造的工做，並完成了一次前端重構。在這裏總結出一些經驗和得失來幫助你們思考。共兩篇文章，第一篇討論性能優化，第二篇討論模塊化框架。而之因此把這兩個話題放到一塊兒，是由於這兩項工做都涉及到對前端代碼進行不一樣程度的重構，並且模塊化改造實際上是咱們在對性能優化作到必定程度以後發現必需要作的一件事情。本篇是性能優化的部分，下面我把咱們的產品簡稱爲N頁面。

• 應用場景分析：

N頁面做爲一個入口頁面，對頁面加載速度有着極高的要求。同時，N頁面內部卻又有着很是複雜的功能與交互。N頁面的初版上線時，頁面引用的js文件有3個，一共40-50k（壓縮&Gzip以後）。頁面onload時間在1.3秒。

1.3秒的load時間，相比較絕大多數網站來講都是一個不錯的數值。但老闆一句話「怎麼這個頁面打開這麼慢」，馬上像是給咱們的後背安了一枚×××。性能優化成了N頁面下一步工做的重中之重。

老闆重視頁面速度，對於Web前端開發人員來講實際上是件幸事，這代表你將有更豐富的時間和資源去實踐Web性能優化這一課題，不用被翻來覆去的產品升級需求所打擾。那麼對於N頁面，咱們作了哪些實踐：

 

常規優化手段包括：

CSS置頂，JS置底。

靜態資源外聯、合併、壓縮。

圖片優化。（Png使用pngcrush；Gif使用gifsicle；Jpeg使用jpegtran）

圖片延遲加載。（主要針對首屏外的圖片。）

使用CSS Sprite，首屏圖片所有合到一張圖上。

靜態文件上CDN。（靜態文件的下載能提速20%左右。）

靜態文件設置強緩存。（命中強緩存82.4%；命中若緩存3.4%；未命中緩存14.2%。）

HTML壓縮。（Gzip後減小%5。）

加強型手段：

基礎庫定製。（用代碼分析代碼，自動打包被使用到的方法做爲基礎庫，使基礎庫從原來的壓縮後25K減少爲9.8K,減少了61%）

頁面數據存儲優化。（從原來的直接寫json形式的script，變爲將json隱藏在textarea中，初始化或用到的時候纔去提取並進行解析。）

首屏CSS檢測。（對首屏用到的CSS進行檢測，將不屬於首屏的CSS代碼單獨打包並移到首屏以外進行延遲加載）

js按需加載。（在後面作重點介紹）

• 監控& 測量

性能優化最重要的工做不是優化而是監控。這個道理很簡單：沒有監控體系就沒辦法衡量性能優化的效果，那麼你所作的任何工做都是盲目的。

咱們對性能的監控是從多個維度展開的，包括平均時間、時段分佈、瀏覽器分佈、省份、運營商等。便於發現和定位任何一個細節的問題。

而在平均時間這一維度，咱們又分爲四個級別：

Head時間– head標籤加載完成的時間

TTi時間– 頁面可交互時間（即首屏第一次渲染出來的時間）

Dom時間– Dom Ready的時間

Load 時間– 頁面徹底加載完成的時間

這樣劃分的好處是，頁面加載每一個環節的耗時一目瞭然：

Head ：CSS加載時間

TTI ：總體HTML加載和渲染時間

DOM 減TTI ： js文件網絡傳輸時間和在瀏覽器進行解析的時間

Load 減Dom : js初始化+ 圖片加載的時間

並且，咱們經過移動tti時間點的位置，發現了一個有趣的現象，以下圖

能夠看出，頁面加載的性能瓶頸就在script的下載和解析時間。

爲了進一步定位性能瓶頸，咱們在頁面內對用戶網速進行了測試，結果很震驚：有2%的用戶網速小於2k/s，5%的用戶網速小於10k/s。（國內的網絡情況真是慘不忍睹啊）

那麼，優化方案就很明顯了：最大限度地減少js文件大小，以減少網絡傳輸時間，提高頁面性能。

經過後來的優化工做咱們發現：js代碼壓縮、Gzip後每減少1k，頁面加載時間就能減少10ms左右。

• 按需加載：

這是除了js壓縮外，你能想到的最有效減少js文件大小的辦法了。

按需加載，顧名思義，就是在頁面首次加載的時候只提供最須要的js給用戶，而剩餘的js等用戶使用到了相關的功能再去加載。

按需加載適合哪一種類型的網站：若是80%的用戶來到你的頁面只使用20%的功能，那麼就有必要把這20%的js做爲首屏加載，而剩餘的js作按需加載。

從這個角度來說，幾乎全部網站均可以作按需加載，由於總有一些功能是用戶不多會用到的。

那麼，如何作按需加載：

按需加載須要有一套js模塊加載的框架。這個框架的做用是：保障在所需的js加載完成後纔去執行回調方法。

按需加載還須要有一套觸發條件。在咱們的頁面中，對鼠標移動和鼠標點擊都進行了監聽，以保障在用戶想使用某個功能以前或進行了相應操做時，觸發js加載。

除此以外，咱們還對js基礎庫進行了進一步拆分，分爲首屏用到的基礎方法，和延遲加載的js所需的基礎方法。以最大限度地保證首屏js量的最小化。

經過按需加載的拆分，咱們將首屏的js代碼從原來的gzip以後40-50k減少到了只有24k。

同時，咱們對CSS的加載也進行拆分，首屏不須要的CSS代碼也隨JS進行延遲加載。

• 效果 & 總結

性能優化是一個很是繁瑣的工做，頁面性能受不少因素的制約，不過相信一點：方法總比問題多。咱們經過優化，最終將頁面加載時間降到了650ms，僅爲優化前的一半。全部優化工做中，效果最明顯的就是js按需加載了。

不過按需加載也爲咱們的代碼結構帶來了很大的衝擊，極大地改變了咱們寫代碼的方式，也製造了不少問題，我會在下一篇《前端重構——模塊化框架實踐》中進行詳細介紹。

by lizhouquan