前端性能優(yōu)化：主要分為兩大類肌索，文件獲取優(yōu)化和代碼執(zhí)行優(yōu)化五辽。
文件獲取優(yōu)化
- 加載文件 css js
- http協(xié)議的細(xì)節(jié)
- 從輸入url到頁面渲染完成
- 怎么上線前端代碼
代碼執(zhí)行優(yōu)化
- 節(jié)流 防抖
- 重繪 回流
- vue react 服務(wù)器端渲染(ssr)
- 瀏覽器是如何渲染頁面的
從輸入url到頁面渲染完成
- 用戶輸入網(wǎng)址，比如baidu.com
- 瀏覽器通過域名解析服務(wù)(DNS)蹋岩，把url解析成IP
DNS域名解析過程.png
- 和IP地址建立TCP鏈接赖草，發(fā)送HTTP請(qǐng)求
- 服務(wù)器接收請(qǐng)求，查庫剪个，讀文件秧骑，并拼接好返回的HTTP響應(yīng)
- 瀏覽器收到數(shù)據(jù)，開始渲染
- 瀏覽器解析html為dom樹扣囊，解析css為css-tree
- dom + css生成render-tree乎折，根據(jù)render樹繪圖(GUI)
- 加載 script 的js文件，執(zhí)行js
瀏覽器渲染過程.png
考慮前端優(yōu)化侵歇，基本從以上步驟壓縮執(zhí)行時(shí)間骂澄。
如何少加載文件
- 合理利用瀏覽器的文件緩存(強(qiáng)緩存和協(xié)商緩存)
首次加載，發(fā)送http請(qǐng)求惕虑，server正常返回坟冲，需在返回響應(yīng)頭加上強(qiáng)緩存說明(Expires: Sat, 18 Apr 2020 07:50:03 GMT過期時(shí)間<http1.0> cache-control：max-age=315360000時(shí)間戳士修，優(yōu)先級(jí)高<http1.1>)，如果時(shí)間過了樱衷，再次請(qǐng)求這個(gè)文件棋嘲，強(qiáng)緩存失效，此時(shí)使用協(xié)商緩存矩桂，瀏覽器不會(huì)直接發(fā)出請(qǐng)求沸移，而是在請(qǐng)求頭上帶上if-modified-since(日期)詢問后端有沒有修改過，如沒有侄榴，就用緩存(響應(yīng)碼304)雹锣。優(yōu)先級(jí)更高的etag(請(qǐng)求頭帶上if-none-match)。如果修改過癞蚕，只能重新加載蕊爵。
http緩存過程.png
結(jié)語
本文從前端性能優(yōu)化的角度出發(fā)，整理一些常見的前端優(yōu)化手段桦山。前端小白經(jīng)驗(yàn)不足攒射，如有錯(cuò)誤的地方，歡迎大家斧正恒水！未完待續(xù)~~~
