對於我們前端來說，頁面的載入速度是直接影響到使用者的體驗度

使用者體驗度是能直接決定最終的銷售額的

每增加延遲一秒，頁面訪問量降低11%，轉化率降低7%

如何提高頁面的載入速度是前端工程師們必然要懂的

那麼我就來講解一下可以從哪些方面來提高頁面的載入速度：

頁面載入速度影響因素——前端效能

前端效能關鍵呈現路徑所涉及的步驟：

　　　　　　1 .  DOM：瀏覽器在解析HTML時，會以遞增的方式為HTML標記生成一種名為文件物件模型（DOM）的樹狀模型，

　　　　　　　　　　　該模型描述了網頁中包含的內容

　　　　　　2 . CSSOM：瀏覽器收到所有CSS後，會對其中包含的標記和類生成一種名為CSS物件模型的樹狀模型，並將樣式資訊附加在節點上。

　　　　　　　　　　　這個樹描述了網頁中所包含內容需要應用的樣式

　　　　　　3 . 呈現樹（Render Tree）：通過將DOM與CSSOM結合在一起，瀏覽器可以構造出呈現樹，

　　　　　　　　　　　其中包含了頁面內容以及所要應用的樣式資訊

　　　　　　4 . 佈局（Layout）：佈局這一步中需要計算網頁內容在螢幕上的實際位置和大小

　　　　　　5 . 繪製（Paint）：最後一步將使用佈局資訊在螢幕上繪製畫素

當然對此我們也是有辦法應付的

下面列出了各個方面處理效能的方法

　　（1）網頁內容 ——  減少HTTP請求次數

　　　　　　　　　　　 減少DNS查詢次數

　　　　　　　　　　　 避免頁面跳轉

　　　　　　　　　　　 緩衝ajax

　　　　　　　　　　　 延遲載入

　　　　　　　　　　　 提前載入

　　　　　　　　　　　 減少DOM元素數量

　　　　　　　　　　　 根據域名劃分內容

　　　　　　　　　　　 減少iframe數量

　　　　　　　　　　　 避免404

　　（2）伺服器 —— 使用CDN

　　　　　　　　　　新增Expires 或 Cache-Control 報文頭

　　　　　　　　　　Gzip 壓縮傳輸檔案

　　　　　　　　　　配置ETags

　　　　　　　　　　儘早flush輸出

　　　　　　　　　　使用GET Ajax請求

　　　　　　　　　　避免空的圖片src

　　　　　　　　　　Cookie

　　　　　　　　　　減少cookie大小

　　　　　　　　　　頁面內容使用無cookie域名

　　（3） CSS —— 將樣式表置頂

　　　　　　　　　 避免CSS表示式

　　　　　　　　　 用<link>代替@import

　　　　　　　　　 避免使用Filters

　　（4） JavaScript —— 將指令碼置底

　　　　　　　　　　　　使用外部Javascript 和 Css檔案

　　　　　　　　　　　　精簡Javescript和Css

　　　　　　　　　　　　去除重複指令碼

　　　　　　　　　　　　減少DOM訪問

　　　　　　　　　　　　使用智慧事件處理

　　（5） 圖片 —— 優化圖片

　　　　　　　　　 優化CSS Sprite

　　　　　　　　　 不要在HTML中縮放圖片

　　　　　　　　　 使用小且可快取的favicon.ico

　　　　　　　　　 移動客戶端

　　　　　　　　　 保持單個內容小於25KB

　　　　　　　　　 打包組建成符合文件

這就是從前端方面來提高頁面的載入速度

當然  影響頁面載入速度的並不只有前端效能

還會有網路效能

下次更新再來寫網路效能了