如何打造亞秒級加載的網頁1——前端性能

對於咱們前端來講，頁面的加載速度是直接影響到用戶的體驗度

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

每增長延遲一秒，頁面訪問量下降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

　　　　　　　　　 打包組建成符合文檔

 

 

 

這就是從前端方面來提升頁面的加載速度

固然  影響頁面加載速度的並不僅有前端性能

還會有網絡性能

下次更新再來寫網絡性能了