@些優化方案進行分類，這些方案最好能夠結合實際開發遇到的問題來表述。

優化的方案

一、減少操作量

1. 盡量減少 HTTP 請求

   1) 合併文件，比如把多個 CSS 文件合成一個；

   2) CSS Sprites 利用 CSS background 相關元素進行背景圖絕對定位；
2. 不要在 HTML 中使用縮放圖片縮放圖片並沒有減少圖片的容量，只是控制了圖片的大小。
3. Image壓縮使用工具對圖片進行壓縮，保證質量的同時減少了圖片的大小。
4. 減少對DOM的操作

   減少對DOM的操作，減少頁面的重繪。

二、提前做載入操作

1. 對域名進行預解析例如京東的做法<link rel="dns-prefetch" href="//misc.360buyimg.com" />
2. 預載入組件或延遲載入組件
3. 把 CSS 放到代碼頁上端

   CSS 放到最頂部，瀏覽器能夠有針對性的對 HTML 頁面從頂到下進行解析和渲染。

4. 使用 new Image對象，對圖片進行緩存

三、提升並行載入

切分組件到多個域 ，提升伺服器的響應能力

四、JavaScript和CSS優化

1. 從頁面中剝離 JavaScript 與 CSS剝離後，能夠有針對性的對其進行單獨的處理策略，比如壓縮或者緩存策略。
2. 精簡 JavaScript 與 CSS

   使用工具壓縮JavaScript和CSS文件

3. 腳本放到 HTML 代碼頁底部減少對頁面的阻塞。

五、非同步載入

使用Ajax實現非同步載入，例如，滾動頁面載入後面的內容，這種也比較常見。

推薦閱讀：

相關文章