性能優(yōu)化這個(gè)問題小公司要求不高猪半，大公司不需要教贝乎，因?yàn)橛泄ぞ弑ＷC啃匿。
62a28dad9fdf63ffc9588e9c20dcd6ec.png
回答這題的思路要從另一道面試題：從敲回車開始到頁(yè)面展現(xiàn)這個(gè)過程發(fā)生了什么 入手晃择。以下是主要過程以及相對(duì)的解決措施：
- DNS查詢消耗時(shí)間 ——》減少DNS請(qǐng)求數(shù)握童，即減少域名
- 建立TCP連接（涉及三次握手）比較耗時(shí) ——》盡量合并同一后綴名文件（如
.css\.js） - SSL加密（必要步驟）也耗費(fèi)時(shí)間
- 發(fā)起請(qǐng)求耗時(shí)相對(duì)較少
- 等待渲染時(shí)間較長(zhǎng)
- 下載資源時(shí)間較少
驗(yàn)證：使用開發(fā)者工具查看性能
66dcc113fb7565b0359eb6dfc40ebbcb.png
網(wǎng)頁(yè)性能優(yōu)化的目的是什么姆怪？
- 減少服務(wù)器壓力
- 增強(qiáng)用戶體驗(yàn)(主要講這個(gè),如何減少加載時(shí)間)
HTML層面優(yōu)化
- 發(fā)請(qǐng)求優(yōu)化：cookie
原因：每一次發(fā)起請(qǐng)求都需要帶上cookie，用cookie傳值不好 - 下載速度依賴用戶帶寬澡绩，提高速度方法是：把CSS內(nèi)容放在HTML里（參照Google/baidu）稽揭，瀏覽器會(huì)先讀取標(biāo)簽里的內(nèi)容，所以將CSS放在標(biāo)簽里從而實(shí)現(xiàn)優(yōu)先讀取肥卡。
多個(gè)連接優(yōu)化
問題：一個(gè)1M的JS文件溪掀，如何下載比較快？
- 整個(gè)文件一個(gè)JS
- 拆分成兩個(gè)500M的JS
3.拆分成4個(gè)250M的JS
理論上答案是3.這樣可以并行下載4個(gè)文件步鉴，減少了帶寬的占據(jù)揪胃，但是增加了3次TCP請(qǐng)求時(shí)間，在下載時(shí)間和TCP請(qǐng)求時(shí)間的取舍上唠叛，就要具體情況具體測(cè)試分析了只嚣。
如果是移動(dòng)端就選擇方案1，因?yàn)橐苿?dòng)端對(duì)多文件下載不友好（針對(duì)終端優(yōu)化）
如果選擇第3種方案艺沼，那么引生出另一個(gè)問題：為什么不分得更多册舞？
答：每個(gè)瀏覽器對(duì)并行下載有上限。每個(gè)域名限制最多同時(shí)進(jìn)行N個(gè)下載線程障般。
關(guān)于使用CDN（分散在世界的中轉(zhuǎn)服務(wù)器就叫CDN调鲸，它們每時(shí)每刻都在訪問主服務(wù)器并將資源傳輸給用戶，以降低下載時(shí)間）
大公司的方式
- CDN1 ：專門放圖片
- CDN2：專門放CSS
- CDN3：專門放JS
這樣雖然增加了CDN查詢次數(shù)挽荡，但是可以下載更多的文件藐石，繞過了瀏覽器限制
前端工程化問題：給每個(gè)資源文件加上版本號(hào)進(jìn)行版本控制
Gzip壓縮
為了節(jié)約下載時(shí)間，HTML在發(fā)布之前回打包成Gzip包定拟，下載到本地后瀏覽器會(huì)幫你解壓于微，雖然增加了解壓時(shí)間，但是減少的時(shí)間會(huì)是解壓時(shí)間10倍以上。
優(yōu)化CSS和JS順序
CSS放在JS前株依，否則會(huì)增加瀏覽器渲染時(shí)間
代碼層面優(yōu)優(yōu)化——頁(yè)面加載優(yōu)化
- 懶加載
- 所見即所下
- 好處：節(jié)省CDN費(fèi)用驱证，降低服務(wù)器壓力
- 預(yù)加載
- 先下載用戶將要看到的
- 好處：增加用戶體驗(yàn)
- 缺點(diǎn)：多花錢
- 把頁(yè)面不同內(nèi)容實(shí)現(xiàn)動(dòng)態(tài)加載，將第一屏做到最小
- 實(shí)現(xiàn)思路：當(dāng)頁(yè)面下載完成恋腕，再請(qǐng)求下一個(gè)頁(yè)面的數(shù)據(jù)
額外
- 新版的HTTP連接可以復(fù)用抹锄，不需要做同域名連接優(yōu)化（不再需要合并文件）
- 最好的下載優(yōu)化是增加緩存，入口文件做最小化荠藤。
