桌面端前端效能優化策略

laixiangran發表於2018-07-15
前端優化

網路載入類

減少 HTTP 資源請求次數

  • 合併靜態資源圖片、JavaScript 或 CSS 程式碼，減少頁面請求數和資源請求消耗
  • 避免重複的資源，防止增加多餘請求

減小 HTTP 請求大小

  • 減少沒必要的圖片、JavaScript、CSS 及 HTML 程式碼
  • 對檔案進行壓縮優化
  • 使用 gzip 等方式壓縮傳輸檔案

將 CSS 或 JavaScript 放到外部檔案中，避免使用 <style> 或 <script> 標籤直接引入

  • 在 HTML 檔案中引用外部資源可以有效利用瀏覽器的靜態資源快取

避免頁面中空的 href 和 src

  • 當 <link> 標籤的 href 屬性為空，或 <script>、<img>、<iframe> 標籤的 src 屬性為空時，瀏覽器在渲染的過程中仍會將 href 屬性或 src 屬性中的空內容進行載入，直至載入失敗，這樣就阻塞了頁面中其他資源的下載程式，而且最終載入到的內容是無效的，因此要儘量避免
// 不推薦
<img src="" alt="photo">
<a href="">點選連結</a>

為 HTML 指定 Cache-Control 或 Expires

  • 為 HTMl 內容設定 CaChe-Control 或 Expires 可以將 HTML 內容快取起來，避免頻繁向伺服器端傳送請求。
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2016 23:00:00 GMT" />

合理設定 Etag 和 Last-Modified

  • 合理設定 Etag 和 Last-Modified 使用瀏覽器快取，對於未修改的檔案，靜態資源伺服器會向瀏覽器端返回304，讓瀏覽器從快取中讀取檔案，減少 Web 資源下載的頻寬消耗並降低伺服器負載
<meta http-equiv="last-modified" content="Mon, 03 Oct 2016 17:45:57 GMT" />

減少頁面重定向

  • 頁面每次重定向都會延長頁面內容返回的等待延時，一次重定向大約需要600毫秒的時間開銷，為了保證使用者儘快看到頁面內容，要儘量避免頁面重定向

使用靜態資源分域存放來增加下載並行數

  • 瀏覽器在同一時刻向同一個域名請求檔案的並行下載數是有限的，因此可以利用多個域名的主機來存放不同的靜態資源，增大頁面載入時資源的並行下載數，縮短頁面資源載入的時間

使用靜態資源 CDN 來儲存檔案

  • 如果條件允許，可以使用 CDN 網路加快同一個地理區域內重複靜態資原始檔的響應下載速度，縮短資源請求時間

使用 CDN Combo 下載傳輸內容

  • CDN Combo 是在 CDN 伺服器端將多個檔案請求打包成一個檔案的形式來返回的技術，這樣可以實現 HTTP 連線傳輸的一次性複用，減少瀏覽器的 HTTP 請求數，加快資源下載速度

例如同一個域名 CDN 伺服器上的 a.js，b.js，c.js 就可以按如下方式在一個請求中下載：

<script src="//cdn.domain.com/path/a.js,b.js,c.js"></script>

使用可快取的 AJAX

  • 可以返回內容相同的請求，沒必要每次都直接從伺服器端拉取，合理使用 AJAX 快取能加快 AJAX 響應速度來減輕伺服器壓力
$.ajax({
   url: url,
   type: `get`,
   cache: true, // 推薦使用快取
   data: {},
   success() {
       // ....
   },
   error() {
       // ...
   }
});

使用 GET 來完成 AJAX 請求

  • 使用 XMLHttpRequest 時，瀏覽器中的 POST 方法傳送請求首先傳送檔案頭，然後傳送 HTTP 正文資料，而使用 GET 時只傳送頭部，所以在拉取服務端資料時使用 GET 請求效率更高
$.ajax({
   url: url,
   type: `get`, // 推薦使用 get 完成請求
   data: {},
   success() {
       // ....
   },
   error() {
       // ...
   }
});
  • HTTP 請求通常預設帶上瀏覽器的 Cookie 一起傳送給伺服器，所以在非必要的情況下，要儘量減少 Cookie 來減小 HTTP 請求的大小
  • 對應靜態資源，儘量使用不同的域名來存放，因為 Cookie 預設不能跨域的，這樣就做到了不同域名下靜態資源請求的 Cookie 隔離

縮小 favicon.ico 並快取

  • 有利於 favicon.ico 的重複載入，因為一般一個 Web 應用的 favicon.ico 是很少改變的

推薦使用非同步 JavaScript 資源

  • 非同步的 JavaScript 資源不會阻塞文件解析，所以允許在瀏覽器中優先渲染頁面，延後載入指令碼執行。

例如：

<script src="main.js" defer></script>
<script src="main.js" async></script>

使用 async 時，載入和渲染後續文件元素的過程和 main.js 的載入與執行是並行的。使用 defer 時，載入後續文件元素的過程和 main.js 的載入是並行的，但是 main.js 的執行要在頁面所有元素解析完成之後才開始執行。

消除阻塞渲染的 CSS 及 JavaScript

  • 對於頁面中載入時間過長的 CSS 或 JavaScript 檔案，需要進行合理拆分或延後載入，保證關鍵路徑的資源能快速載入完成

避免使用 CSS import 引用載入 CSS

  • CSS 中的 @import 可以從另一個樣式檔案引入樣式，但應該避免這種用法，因為這樣會增加 CSS 資源載入的關鍵路徑長度，帶有 @import 的 CSS 樣式需要在 CSS 檔案序列解析到 @import 時才會載入另外的 CSS 檔案，大大延後 CSS 渲染完成的時間

頁面渲染類

把 CSS 資源引用放到 HTML 檔案頂部

  • 一般推薦將所有 CSS 資源儘早指定在 HTML 文件 中，這樣瀏覽器可以優先下載 CSS 並儘早完成頁面渲染

JavaScript 資源引用放到 HTML 檔案底部

  • JavaScript 資源放到 HTML 文件底部可以防止 JavaScript 的載入和解析執行對頁面渲染造成阻塞，這是因為 JavaScript 資源預設是解析阻塞的，除非被標記為非同步或者通過其他的非同步方式載入

不要在 HTML 中直接縮放圖片

  • 在 HTML 中直接縮放圖片會導致頁面的重排重繪，此時可能會使頁面中的其他操作產生卡頓，因此要儘量減少在頁面中直接進行圖片縮放

減少 DOM 元素數量和深度

  • HTML 中標籤元素越多，標籤的層級越深，瀏覽器解析 DOM 並繪製到瀏覽器中所花的時間就越長，所以儘可能保持 DOM 元素簡潔和層級較少

儘量避免使用 <table>、<iframe> 等慢元素

  • <table>內容的渲染是將 table 的 DOM 渲染樹全部生成完成並一次性繪製到頁面上的，所以在長表格渲染時很耗效能，應該儘量避免使用它，可以考慮使用列表元素 <ul> 代替
  • 儘量使用非同步的方式動態新增 iframe，因為 iframe 內資源的下載程式會阻塞父頁面靜態資源的下載與 CSS 及 HTML DOM 的解析

避免執行耗時的 JavaScript

  • 長時間執行的 JavaScript 會阻塞瀏覽器構建 DOM 樹、DOM 渲染樹、渲染頁面。所以，任何與頁面初次渲染無關的邏輯功能都應該延遲載入執行，這和 JavaScript 資源的非同步載入思路是一致的

避免使用 CSS 表示式或 CSS 濾鏡

  • CSS 表示式或 CSS 濾鏡的解析渲染速度是比較慢的，在有其他解決方案的情況下應該儘量避免使用
// 不推薦
.opacity {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

相關文章