性能優化的題目也是面試常考的，這類題目有很大的擴展性，能夠擴展出來很多小細節，而且對個人的技術視野和業務能力有很大的挑戰。這部分筆者會重點講下常用的性能優化方案。 > 題目：總結前端性能優化的解決方案 ### 優化原則和方向 性能優化的原則是**以更好的用戶體驗為標準**，具體就是實現下面的目標： 1. 多使用內存、緩存或者其他方法 2. 減少 CPU 和GPU 計算，更快展現 優化的方向有兩個： * **減少頁面體積，提升網絡加載** * **優化頁面渲染** ### 減少頁面體積，提升網絡加載 * 靜態資源的壓縮合并（JS 代碼壓縮合并、CSS 代碼壓縮合并、雪碧圖） * 靜態資源緩存（資源名稱加 MD5 戳） * 使用 CDN 讓資源加載更快 ### 優化頁面渲染 * CSS 放前面，JS 放后面 * 懶加載（圖片懶加載、下拉加載更多） * 減少DOM 查詢，對 DOM 查詢做緩存 * 減少DOM 操作，多個操作盡量合并在一起執行（`DocumentFragment`） * 事件節流 * 盡早執行操作（`DOMContentLoaded`） * 使用 SSR 后端渲染，數據直接輸出到 HTML 中，減少瀏覽器使用 JS 模板渲染頁面 HTML 的時間 ### 詳細解釋 #### 靜態資源的壓縮合并 如果不合并，每個都會走一遍之前介紹的請求過程 ~~~ <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script> ~~~ 如果合并了，就只走一遍請求過程 ~~~ <script src="abc.js"></script> ~~~ #### 靜態資源緩存 通過鏈接名稱控制緩存 ~~~ <script src="abc_1.js"></script> ~~~ 只有內容改變的時候，鏈接名稱才會改變 ~~~ <script src="abc_2.js"></script> ~~~ 這個名稱不用手動改，可通過前端構建工具根據文件內容，為文件名稱添加 MD5 后綴。 #### 使用 CDN 讓資源加載更快 CDN 會提供專業的加載優化方案，靜態資源要盡量放在 CDN 上。例如： ~~~ <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script> ~~~ #### 使用 SSR 后端渲染 可一次性輸出 HTML 內容，不用在頁面渲染完成之后，再通過 Ajax 加載數據、再渲染。例如使用 smarty、Vue SSR 等。 #### CSS 放前面，JS 放后面 上文講述瀏覽器渲染過程時已經提過，不再贅述。 #### 懶加載 一開始先給為`src`賦值成一個通用的預覽圖，下拉時候再動態賦值成正式的圖片。如下，`preview.png`是預覽圖片，比較小，加載很快，而且很多圖片都共用這個`preview.png`，加載一次即可。待頁面下拉，圖片顯示出來時，再去替換`src`為`data-realsrc`的值。 ~~~ <img src="preview.png" data-realsrc="abc.png"/> ~~~ 另外，這里為何要用`data-`開頭的屬性值？—— 所有 HTML 中自定義的屬性，都應該用`data-`開頭，因為`data-`開頭的屬性瀏覽器渲染的時候會忽略掉，提高渲染性能。 #### DOM 查詢做緩存 兩段代碼做一下對比： ~~~ var pList = document.getElementsByTagName('p') // 只查詢一個 DOM ，緩存在 pList 中了 var i for (i = 0; i < pList.length; i++) { } ~~~ ~~~ var i for (i = 0; i < document.getElementsByTagName('p').length; i++) { // 每次循環，都會查詢 DOM ，耗費性能 } ~~~ 總結：DOM 操作，無論查詢還是修改，都是非常耗費性能的，應盡量減少。 #### 合并 DOM 插入 DOM 操作是非常耗費性能的，因此插入多個標簽時，先插入 Fragment 然后再統一插入 DOM。 ~~~ var listNode = document.getElementById('list') // 要插入 10 個 li 標簽 var frag = document.createDocumentFragment(); var x, li; for(x = 0; x < 10; x++) { li = document.createElement("li"); li.innerHTML = "List item " + x; frag.appendChild(li); // 先放在 frag 中，最后一次性插入到 DOM 結構中。 } listNode.appendChild(frag); ~~~ #### 事件節流 例如要在文字改變時觸發一個 change 事件，通過 keyup 來監聽。使用節流。 ~~~ var textarea = document.getElementById('text') var timeoutId textarea.addEventListener('keyup', function () { if (timeoutId) { clearTimeout(timeoutId) } timeoutId = setTimeout(function () { // 觸發 change 事件 }, 100) }) ~~~ #### 盡早執行操作 ~~~ window.addEventListener('load', function () { // 頁面的全部資源加載完才會執行，包括圖片、視頻等 }) document.addEventListener('DOMContentLoaded', function () { // DOM 渲染完即可執行，此時圖片、視頻還可能沒有加載完 }) ~~~ #### 性能優化怎么做 上面提到的都是性能優化的單個點，性能優化項目具體實施起來，應該按照下面步驟推進： 1. 建立性能數據收集平臺，摸底當前性能數據，通過性能打點，將上述整個頁面打開過程消耗時間記錄下來 2. 分析耗時較長時間段原因，尋找優化點，確定優化目標 3. 開始優化 4. 通過數據收集平臺記錄優化效果 5. 不斷調整優化點和預期目標，循環2~4步驟 性能優化是個長期的事情，不是一蹴而就的，應該本著先摸底、再分析、后優化的原則逐步來做。