頁面加載速度影響因素——前端性能

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

　　　　　　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

　　　　　　　　　 打包組建成符合文檔

【轉】前端性能優化