網絡加載類
減小 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() {
// ...
}
});
減小 Cookie 的大小並進行 Cookie 隔離
- 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);
}