摘要：一般來說頁面訪問的時間有一條著名的“2-5-8原則”。當(dāng)用戶訪問一個頁面：
- 在2秒內(nèi)得到響應(yīng)時挽荡，會感覺系統(tǒng)響應(yīng)很快藐石；
- 在2-5秒之間得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)速度還可以定拟；
- 在5-8秒以內(nèi)得到響應(yīng)時于微，會感覺系統(tǒng)的響應(yīng)速度很慢，但可以接受青自；
而超過8秒后仍然無法得到響應(yīng)時株依，用戶會感覺系統(tǒng)糟透了，進(jìn)而選擇離開這個站點(diǎn)延窜，或者發(fā)起第二次請求恋腕。對于一個網(wǎng)站如果希望抓住用戶，網(wǎng)站的速度以及穩(wěn)定性是非常重要的逆瑞。
一荠藤、為什么要做性能優(yōu)化伙单？
從上面可以看出，網(wǎng)站前端的用戶體驗決定了用戶是否想要去使用網(wǎng)站的功能哈肖，而網(wǎng)站的功能決定了用戶是否會一票否決前端體驗吻育。 不僅僅如此，如果前端優(yōu)化得好淤井，他不僅可以為企業(yè)節(jié)約成本布疼，他還能給用戶帶來更多的用戶，因為增強(qiáng)的用戶體驗币狠《谐總結(jié)成三點(diǎn)就是：
1、加快頁面展示和運(yùn)行速度
2总寻、節(jié)約服務(wù)器帶寬流量
3、減少服務(wù)器壓力
二梢为、什么時候做性能優(yōu)化最合適渐行？
一般來說，遵循避免過早優(yōu)化的原則铸董，因為網(wǎng)站再發(fā)過程中的成本相對來說還是比較高的祟印，web開發(fā)工程師、ui粟害、產(chǎn)品蕴忆、運(yùn)維、后臺服務(wù)等等悲幅，所以第一我們要保證基本功能完成套鹅，再考慮優(yōu)化。第二在沒有找到性能瓶頸之前汰具，不要優(yōu)化
三卓鹿、哪方面需要做性能優(yōu)化？
在這之前留荔，我們先分析一個頁面從發(fā)起請求到展示到用戶大概流程
1吟孙、DNS 查詢
2、發(fā)送 HTTP 請求
3聚蝶、等待服務(wù)器響應(yīng)
4杰妓、下載服務(wù)器響應(yīng)內(nèi)容
5、解析 HTML碘勉、CSS巷挥、JS
6、渲染 HTML恰聘、CSS句各、JS 和圖片
7吸占、響應(yīng)用戶事件
了解了這幾個過程，大家應(yīng)該知道如何優(yōu)化了吧凿宾，對矾屯，就是對癥下藥：
1、針對 DNS 查詢優(yōu)化
減少網(wǎng)站所用的域名個數(shù)（現(xiàn)代瀏覽器基本都具備并行下載能）初厚，減少 DNS 查詢時間建議一個網(wǎng)站使用至少 2 個域件蚕，但不多于 4 個域來提供資源
2、針對發(fā)送方面的請求優(yōu)化
localStorage（本地存儲）
靜態(tài)資源打包产禾，開啟 Gzip 壓縮（節(jié)省響應(yīng)流量）
Cookie 隔離（節(jié)省請求流量）
使用 CDN 加速（訪問最近服務(wù)器）
3排作、針對等待服務(wù)器響應(yīng)方面的優(yōu)化
合理設(shè)置 HTTP 緩存：Etag 與 Cache-control
啟用 HTTP/2（多路復(fù)用，并行加載）
優(yōu)化數(shù)據(jù)庫查詢
部署負(fù)載均衡
4亚情、針對下載服務(wù)器響應(yīng)內(nèi)容優(yōu)化
用 CSS3 實(shí)現(xiàn)圖片妄痪，對小圖標(biāo)進(jìn)行 base64（降低請求數(shù)）
延遲(defer)加載/異步(async)加載依賴
針對解析 HTML、CSS楞件、JS優(yōu)化
去掉無用的 HTML衫生、CSS 和 JS
優(yōu)化首屏?xí)r間：腳本后位置、圖片壓縮土浸、懶加載
5罪针、針對渲染 HTML、CSS黄伊、JS 和圖片優(yōu)化
最小化重繪(repaint)和回流(reflow)：批量修改元素樣式泪酱、避免 table 布局等
針對響應(yīng)用戶事件優(yōu)化
盡量不在前端做復(fù)雜的運(yùn)算
關(guān)注公眾號【愛前端】，免費(fèi)領(lǐng)取精品全棧大前端試聽課程拓轻，課程好不好岂津，聽了就知道！
專注全棧大前端悦即，愛前端整理了一批最新WEB前端教學(xué)視頻吮成，不論是零基礎(chǔ)學(xué)習(xí)還是在職提升，這些資料都會給你帶來幫助辜梳，愛前端幫助所有想要學(xué)好前端的同學(xué)粱甫，學(xué)習(xí)規(guī)劃、學(xué)習(xí)路線作瞄、學(xué)習(xí)資料茶宵、問題解答。全棧大前端技術(shù)交流群：137503198 宗挥！
