桌面端前端性能優化策略

網絡加載類

減小 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 就能夠按以下方式在一個請求中下載:javascript

<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 資源不會阻塞文檔解析,因此容許在瀏覽器中優先渲染頁面,延後加載腳本執行。

例如:css

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

使用 async 時,加載和渲染後續文檔元素的過程和 main.js 的加載與執行是並行的。使用 defer 時,加載後續文檔元素的過程和 main.js 的加載是並行的,可是 main.js 的執行要在頁面全部元素解析完成以後纔開始執行。html

消除阻塞渲染的 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);
}
相關文章
相關標籤/搜索