前端性能分析優化

我們并不僅僅關注頁面資源的解析和展示響應時間，而是要關注總時間；我們進行web前端性能測試的目的是計算出包含頁面渲染、網絡傳輸以及伺服器端解析等綜合因素在内的加載時間等名額，對該頁面性能進行評估分析，找出影響性能的主要因素和瓶頸，并在此結果的基礎上，給出一定的優化建議和解決方案，進而提升使用者體驗。

根據雅虎團隊經驗：網站頁面性能優化的34條黃金守則，我們逐條分析。

性能黃金法則

隻有10%-20%的最終使用者響應時間花在接收請求的html文檔上，剩下的80%-90%時間花在html文檔所引用的所有元件(圖檔，script，css，flash等等)進行的http請求上。

盡量減少http請求次數

合并檔案.

<code>例如将項目中用的資源檔案合并。所有的css檔案都放入一個樣式表中.或者将js檔案合并壓縮</code>

<code>利用gulp,grunt,webpack等建構工具将項目資源檔案整合</code>

利用css sprites 減少圖像請求.

<code>通過使用合并圖檔，通過指定css的backgroud-image和backgroud-position來顯示元素。</code>

啟用浏覽器緩存

要利用浏覽器緩存存儲可緩存的資源

<code>在http标頭中為靜态資源設定有效期或最長存在時間，可訓示浏覽器從本地磁盤中加載以前下載下傳的資源而不是從網絡中加載。</code>

減少dns查找

dns緩存

<code>當用戶端的dns緩存為空時，dns查找的數量與web頁面中唯一主機名的數量相等。減少唯一主機名的數量就可以減少dns查找的數量。</code>

使用内容分發網絡

頁面靜态化,取決于釋出系統

<code>按頁面内容劃分域名，在合适的資源伺服器上存放檔案</code>

避免404錯誤

避免内部無效的連結

避免重定向

壓縮元件

精簡javascript和css

盡量縮減頁面大小

頁面必須小于150k(不含圖檔）

a) 靜态檔案是否gzip

b) 圖檔是否壓縮優化過

預處理

浏覽器空閑時請求将來可能會用到的頁面内容

<code>無條件加載：觸發onload事件時，直接加載額外的頁面内容</code>

<code>有預期的加載：載入重新設計過的頁面時使用預加載。</code>

移除重複腳本

使iframe的數量最小

異步加載

js 開發規範

代碼邏輯分層

避免全局變量

便于多人協作開發

各部分代碼子產品化，可以按需加載 利用requirejs和seajs等子產品化工具加載

保持全局變量的清潔

可進行單元測試

最新内容請見作者的github頁：http://qaseven.github.io/