前端性能優(yōu)化問題是每個前端需要掌握的技術(shù)漩怎。這篇文章從渲染優(yōu)化怪得、代碼優(yōu)化蚕断、資源優(yōu)化葛假、構(gòu)建優(yōu)化带斑、傳輸加載優(yōu)化挂滓、更多流行優(yōu)化技術(shù)6大角度講解前端性能優(yōu)化亲怠。再講之前，我們先了解一下性能優(yōu)化指標(biāo)和一些測量工具。
一、性能優(yōu)化的指標(biāo)和工具
1.1性能指標(biāo)和優(yōu)化目標(biāo)
RAIL測量模型
R -> response 響應(yīng)：處理事件應(yīng)在50ms以內(nèi)完成。Click事件等
A -> animation 動畫：每10ms產(chǎn)生一幀。
I -> Idle 空閑：盡可能添加空閑時間狼讨。
L-> load 加載：5s內(nèi)完成內(nèi)容加載并可以交互犬耻。
1.2性能測量工具
1.2.1WebPageTest多測試地點(diǎn)排苍、全面性能報(bào)告
網(wǎng)址 https://webpagetest.org/
測量結(jié)果（不同的瀏覽器測試結(jié)果項(xiàng)可能不同）
測量結(jié)果中有首次和第二次訪問各項(xiàng)數(shù)據(jù)侈离，這里介紹我們比較關(guān)心的幾項(xiàng)
First Byte 發(fā)出的第一個請求得到響應(yīng)的時間宾濒，反應(yīng)了后臺處理能力和網(wǎng)絡(luò)回路的情況榄棵。
Start Render 首屏渲染時間
First Contentful Paint 首次有內(nèi)容頁面渲染時間
Speed Index 速度指數(shù) 4s合格
Total Blocking Time 頁面被阻塞時間綜合腺怯，不可交互的時間 綠色表示達(dá)標(biāo)
第一輪測量結(jié)果細(xì)節(jié)
瀑布圖
測量結(jié)果各項(xiàng)數(shù)據(jù)很多遂跟，有興趣的同事，可以深入的學(xué)習(xí)啃沪。
1.2.2 Lighthouse網(wǎng)站整體質(zhì)量評估戒良。Chrome開源的一個項(xiàng)目
npm install lighthouse -g 安裝
lighthouse https://www.taobao.com/ 使用 自動打開瀏覽器默認(rèn)是移動端測量薄霜。測試完成后汉矿，會生成測試報(bào)告html文件男翰。
打開測試報(bào)告
Performance 性能
Accessibility 可訪問性
Best Practices 網(wǎng)絡(luò)實(shí)踐
SEO 網(wǎng)站優(yōu)化
Progressive Web App 漸進(jìn)式應(yīng)用
我們只關(guān)注 Performance 測量結(jié)果
First Contentful Paint 第一次有意義內(nèi)容渲染時間
Speed Index 速度指數(shù)
Largest Contentful Paint 最大資源渲染時間
Time to Interactive 可交互時間
Opportunities 優(yōu)化建議为严，羅列出問題，告訴我們怎么去處理稚矿，會優(yōu)化多少時間
Diagnostics 診斷程序性能一些問題跪楞。
1.2.3 Chrome DevTools開發(fā)調(diào)試栅贴、性能評測斟湃。
Chrome DevTools Newwork 網(wǎng)絡(luò)加載分析
Chrome DevTools Performance 性能分析
Timings 頁面加載時間節(jié)點(diǎn)
Main 主線程
Performance 各項(xiàng)性能分析，可以讓我們分析出檐薯，頁面各個節(jié)點(diǎn)時間凝赛，及主線程任務(wù)狀態(tài)，性能問題坛缕。
分析項(xiàng)很多墓猎，這里不做太細(xì)節(jié)的分析，感興趣的同事赚楚，可以深入學(xué)習(xí)毙沾。
1.3 常用的性能測量APIs
performance 對象
performance.timing 對象包含很多時間時間節(jié)點(diǎn)，可以計(jì)算出任務(wù)耗時
重定向耗時 = redirectEnd - redirectStart;
DNS查詢耗時 = domainLookupEnd - domainLookupStart;
TCP鏈接耗時 = connectEnd - connectStart;
HTTP請求耗時 = responseEnd - responseStart;
解析dom樹耗時 = domComplete - domInteractive;
白屏?xí)r間 = responseStart - navigationStart;
DOMready時間 = domContentLoadedEventEnd - navigationStart;
onload時間 = loadEventEnd - navigationStart;
