來，聊一聊性能優化

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

無論是應付前端面試仍是改進產品體驗，性能優化都是躲不開的話題。這裏咱們就簡單聊一聊性能優化。

傳輸快 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

1. 服務器響應要及時

   1. 接口響應速度要快(數據庫優化、查詢優化、算法優化)
   2. cpu、內存、硬盤讀寫不要成爲瓶頸；多加幾臺機器
   3. 重要頁面(首頁)靜態化。服務端提早渲染後首頁生成靜態頁面，用戶訪問首頁直接返回靜態頁面，不須要像其餘頁面那樣還需加載 css、js 再獲取數據渲染展現

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

   1. 服務器設置合適的靜態資源緩存時間
   2. 前端文件打包時作合理的分塊，讓公共的資源緩存後能被多個頁面複用

3. 暫時不須要的資源先不要

   1. 圖片懶加載
   2. 功能、模塊、組件按需加載

4. 未來須要的資源抽空先拿到

   1. DNS 預解析 <link rel="dns-prefetch" href="//jirengu.com">
   2. 預鏈接 <link rel="preconnect" href="//jirengu.com">
   3. 預獲取 <link rel="prefetch" href="image.png">
   4. 預渲染 <link rel="prerender" href="//xiedaimala.com">

體驗快

所謂的體驗快就是讓用戶以爲網站的交互是「流暢的」、「溫馨的」。好比

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點半免費直播】《校招算法面試通關祕籍》，講師簡介：亞馬遜工程師，北郵本碩