網路載入類 減少 HTTP 資源請求次數 合併靜態資源圖片、JavaScript 或 CSS 代碼，減少頁面請求數和資源請求消耗 避免重覆的資源，防止增加多餘請求 減小 HTTP 請求大小 減少沒必要的圖片、JavaScript、CSS 及 HTML 代碼 對文件進行壓縮優化 使用 gzip 等方式 ...
網路載入類
減少 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() {
// ...
}
});減少 Cookie 的大小併進行 Cookie 隔離
- 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);
}
