性能優(yōu)化知識點大全

性能優(yōu)化

查詢緩存 -> 發(fā)送請求 -> 等待響應(yīng) -> 頁面解析 -> 下載并處理各類靜態(tài)資源 -> 運(yùn)行時 -> 預(yù)加載

一、緩存

本地數(shù)據(jù)存儲
localStorage邦鲫、sessionStorage、indexedDB
內(nèi)存緩存
Cache API
http緩存
Push Cache： HTTP/2 的 Push 功能所帶來的

二、發(fā)送請求

避免多余重定向
DNS 預(yù)解析
預(yù)先建立連接
使用 CDN
DNS 解析會將 CDN 資源的域名解析到 CDN

服務(wù)的負(fù)載均衡器上，負(fù)載均衡器可以通過請求的信息獲取用戶對應(yīng)的地理區(qū)域于颖，從而通過負(fù)載均衡算法，在背后的諸多服務(wù)器中嚷兔，綜合選擇一臺地理位置近森渐、負(fù)載低的機(jī)器來提供服務(wù)。例如為北京聯(lián)通用戶解析北京的服務(wù)器 IP谴垫。這樣章母，用戶在之后訪問 CDN 資源時都是訪問北京服務(wù)器母蛛，距離近翩剪，速度快。

三彩郊、服務(wù)端響應(yīng)

四前弯、頁面解析與處理

注意資源在頁面文檔中的位置
使用 defer 和 async
頁面文檔壓縮

五蚪缀、頁面靜態(tài)資源

1.思路

減少不必要的請求
減少包體大小
- 使用適合當(dāng)前資源的壓縮技術(shù)；
- 避免再響應(yīng)包體里“塞入”一些不需要的內(nèi)容
降低應(yīng)用資源時的消耗
利用緩存

2.針對各類資源的性能優(yōu)化

2.1 JavaScript 優(yōu)化

減少不必要的請求
- 代碼拆分（code split）與按需加載(webpack恕出、路由询枚、 AMD 模塊加載器)
- 代碼合并
減少包體積大小
- 代碼壓縮
- Tree Shaking：本質(zhì)是通過檢測源碼中不會被使用到的部分，將其刪除浙巫，從而減小代碼的體積
- 優(yōu)化 polyfill 的使用
- 優(yōu)化 polyfill 的使用
解析與執(zhí)行
- JavaScript 的解析耗時
- 避免 Long Task
- 是否真的需要框架
- 針對代碼的優(yōu)化
緩存
- 發(fā)布與部署：https://www.zhihu.com/question/20790576/answer/32602154
- 將基礎(chǔ)庫代碼打包合并：https://juejin.im/post/6844903602134188046
- 減少 webpack 編譯不當(dāng)帶來的緩存失效
webpack 會使用自增 ID金蜀。這就可能導(dǎo)致一個問題：一些模塊雖然它們的代碼沒有變化，但由于增/刪了新的其他模塊的畴，導(dǎo)致后續(xù)所有的模塊 ID 都變更了渊抄，文件 MD5 也就變化了。另一個問題在于丧裁，webpack 的入口文件除了包含它的 runtime护桦、業(yè)務(wù)模塊代碼，同時還有一個用于異步加載的小型 manifest煎娇，任何一個模塊的變化二庵，最后必然會傳導(dǎo)到入口文件。這些都會使得網(wǎng)站發(fā)布后缓呛，沒有改動源碼的資源也會緩存失效

   1.使用 Hash 來替代自增 ID: HashedModuleIdsPlugin 插件
   2.將 runtime chunk 單獨拆分出來
   3.使用 records

2.2 CSS 優(yōu)化

關(guān)鍵 CSS:經(jīng)典的骨架屏
優(yōu)化資源請求
- 按需加載
- 合并文件
- 請求的優(yōu)先級排序
- 慎用 @import: 這個是串行催享，可以改成并行
- 謹(jǐn)慎對待 JavaScript 腳本的位置
減少包體大小
- 壓縮
- 選擇合適的兼容性
解析與渲染樹構(gòu)建
- 簡化選擇器
- 避免使用昂貴的屬性
- 使用先進(jìn)的布局方式
利用緩存

2.3 圖片

優(yōu)化請求數(shù)
- 雪碧圖
- 懶加載
- CSS 中的圖片懶加載
- 內(nèi)聯(lián) base64
減小圖片大小
- 使用合適的圖片格式
  - 使用 WebP：
  - 使用 SVG 應(yīng)對矢量圖場景
  - 使用 video 替代 GIF
  - 漸進(jìn)式 JPEG：
- 圖片質(zhì)量的權(quán)衡：有損無損
- 使用合適的大小和分辨率
- 刪除冗余的圖片信息
- SVG 壓縮
緩存

2.4 字體

font-display

@font-face 中設(shè)置 font-display: swap，他可以讓 FOIT 的默認(rèn)行為變?yōu)?FOUT (Flash of Unstyled Text)哟绊，即先會使用默認(rèn)字體樣式展示文本睡陪，字體加載完畢后再將文本的字體樣式進(jìn)行替換。

內(nèi)聯(lián)字體
使用 CSS Font Loading API
FOFT

2.5 視頻優(yōu)化

使用合適的視頻格式
視頻壓縮
移除不必要的音軌信息
使用“流”
移除不必要的視頻

六匿情、運(yùn)行時

1.注意強(qiáng)制同步布局

嘗試使用 RAF 避免強(qiáng)制同步布局
批量化你的操作

2.長列表優(yōu)化

實現(xiàn) Virtual List
原生的 Virtual Scroller

3.避免 JavaScript 運(yùn)行時間過長

任務(wù)分解
延遲執(zhí)行
并行計算

性能優(yōu)化知識點大全

性能優(yōu)化知識點大全

性能優(yōu)化

一、緩存

二、發(fā)送請求

三彩郊、服務(wù)端響應(yīng)

四前弯、頁面解析與處理

五蚪缀、頁面靜態(tài)資源

1.思路

2.針對各類資源的性能優(yōu)化

2.1 JavaScript 優(yōu)化

2.2 CSS 優(yōu)化

2.3 圖片

2.4 字體

2.5 視頻優(yōu)化

六匿情、運(yùn)行時

1.注意強(qiáng)制同步布局

2.長列表優(yōu)化

3.避免 JavaScript 運(yùn)行時間過長

4.善用 Composite：https://fed.taobao.org/blog/2016/04/26/performance-composite/

5.滾動事件的性能優(yōu)化：防抖兰迫，節(jié)流

6.Passive event listeners ？

七炬称、預(yù)加載

1.預(yù)加載技術(shù)

2.視頻預(yù)加載

3.預(yù)加載的策略