來，聊一聊效能優化

本文為飢人谷原創文章，首發於 前端學習指南。

不管是應付前端面試還是改進產品體驗，效能優化都是躲不開的話題。這裡我們就簡單聊一聊效能優化。

傳輸快 vs 體驗快

優化的目的是讓使用者有“快”的感受，那如何讓使用者感受到快呢？

1. 載入速度真的很快，使用者開啟輸入網址按下回車立即看到了頁面
2. 載入速度並沒有變快，但使用者感覺你的網站很快

傳輸快

所謂的真快就是網站資源以最快的速度到達使用者瀏覽器，那如何去做呢？我們先粗略定一些原則：

• 傳輸的內容體積要小
• 傳輸的內容數量要少
• 網速要足夠快
• 伺服器響應要及時
• 能重複利用的資源要利用好
• 暫時不需要的資源先不要
• 將來需要的資源抽空要

下面就能順藤摸瓜，做個細化

1. 傳輸的內容體積要小

   1. 圖片要壓縮
   2. 圖片根據支援情況選擇體積更小的格式(如 webp)
   3. css、js 內容壓縮
   4. 服務端開啟 Gzip，在傳輸資料之前再次壓縮

2. 傳輸的內容數量要少

   1. 圖片圖示合併（css sprite）、svg 圖示合併（svg sprite）
   2. css、js 檔案打包合併

3. 網速要足夠快

   1. 伺服器出口頻寬要夠
   2. 考慮到南北差異、運營商差異，在不同地區部署伺服器 3.靜態資源放 CDN

4. 伺服器響應要及時

   1. 介面響應速度要快(資料庫優化、查詢優化、演算法優化)
   2. cpu、記憶體、硬碟讀寫不要成為瓶頸；多加幾臺機器
   3. 重要頁面(首頁)靜態化。服務端提前渲染後首頁生成靜態頁面，使用者訪問首頁直接返回靜態頁面，不需要像其他頁面那樣還需載入 css、js 再獲取資料渲染展示

5. 能重複利用的資源要利用好

   1. 伺服器設定合適的靜態資源快取時間
   2. 前端檔案打包時做合理的分塊，讓公共的資源快取後能被多個頁面複用

6. 暫時不需要的資源先不要

   1. 圖片懶載入
   2. 功能、模組、元件按需載入

7. 將來需要的資源抽空先拿到

   1. DNS 預解析
   2. 預連線
   3. 預獲取
   4. 預渲染

體驗快

所謂的體驗快就是讓使用者覺得網站的互動是“流暢的”、“舒適的”。比如

1. 滾動頁面不要有遲滯感 1.對於短時連續大量觸發的操作要做節流
2. 一些常見操作不要感覺拖泥帶水
   1. DOM 的操作不要過於頻繁
   2. 不要出現記憶體洩露
   3. 優化複雜運算
3. 動畫不要卡頓
   1. 多用 CSS 動畫，少用 JS 動畫
   2. 開啟硬體加速
   3. 不要用 setTimeout/setInterval 去模擬動畫
   4. 動畫或者過渡的執行時間不要太久

效能優化的建議

臆想的優化不是優化，無明顯成效的優化不是優化。瀏覽器的效能已經足夠快，不要因為“過渡優化”犧牲程式碼的可讀性

先做簡單見效快的優化，再做複雜見效慢的優化。一張未壓縮的大圖片可能抵消辛辛苦苦做的全部其他技術優化

本文作者：若愚，本週若愚老師新班正式開班了，目前還剩不到10個名額，想報名的速度~

加飢人谷官方微訊號:hungervalley， 可進群面基、吐槽老闆、關注新機會，當然很多免費課奉上，近期免費好課：

合格的前端必會知識點3小時速成 若愚老師的js 免費課(視訊已經上傳)

校招專場經驗分享(上)-拿到bilibili、美團、百度校招 offer 的飢人谷校友分享應屆生如何準備校招(視訊已經上傳)

【本週日(12月24)晚上8點免費直播】校招專場經驗分享(下) 拿到趣店、51信用卡校招 offer 的飢人谷校友分享前端面試題和如何寫簡歷

【本週五(12月22)晚上8點半免費直播】《校招演算法面試通關祕籍》，講師簡介：亞馬遜工程師，北郵本碩