前端性能優(yōu)化【進階篇】
關(guān)注 前端瓶子君，回復“交流”
加入我們一起學習，天天進步
作者：前端學苑 公號 / 前端小賈 （本文來自作者投稿）
衡量網(wǎng)頁的性能是一個比較瑣碎的事情，因為沒有某一個指標或數(shù)字可以直接告訴我們網(wǎng)頁的性能怎樣。優(yōu)化的目的在于讓頁面加載的更快，對用戶操作響應更及時，為用戶帶來更好的用戶體驗，對于開發(fā)者來說優(yōu)化能夠減少頁面請求數(shù)，能夠節(jié)省資源。
簡短的概括：
1?前端性能優(yōu)化
2?前端性能監(jiān)控
3?框架性能優(yōu)化
一、前端性能優(yōu)化
1、從輸入url到頁面展現(xiàn)發(fā)生了什么？（萬能面試題）
2、網(wǎng)絡優(yōu)化
3、瀏覽器優(yōu)化
詳細如下：
從輸入url到頁面展現(xiàn)發(fā)生了什么？
（萬能面試題）
1）瀏覽器的地址欄輸入URL并按下回車；
2）DNS 解析：將域名解析成 IP 地址；
3）TCP 連接：TCP 三次握手；
4）發(fā)送 HTTP 請求；
5）服務器處理請求并返回 HTTP 報文；
6）瀏覽器解析渲染頁面；
7）斷開連接：TCP 四次揮手
說完整個過程的幾個關(guān)鍵點后我們再來展開的說一下。
1、URL
我們常見的URL是這樣的:http://www.baidu.com,這個域名由三部分組成：協(xié)議名、域名、端口號，這里端口是默認所以隱藏。最常見的的協(xié)議是HTTP協(xié)議，除此之外還有加密的HTTPS協(xié)議、FTP協(xié)議、FILe協(xié)議等等。如HTTP默認端口80，HTTPS默認端口443。說到這里可能有的面試官會問你同源策略，以及更深層次的跨域的問題。
2、DNS 解析 （ * 網(wǎng)絡優(yōu)化 ）
在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過域名解析，因為瀏覽器并不能直接通過域名找到對應的服務器，而是要通過 IP 地址。
1) IP 地址
IP 地址是指互聯(lián)網(wǎng)協(xié)議地址，是 IP Address 的縮寫。IP 地址是 IP 協(xié)議提供的一種統(tǒng)一的地址格式。
2) 域名解析定義
DNS 協(xié)議提供通過域名查找 IP 地址，或逆向從 IP 地址反查域名的服務。DNS 是一個網(wǎng)絡服務器，我們的域名解析簡單來說就是在 DNS 上記錄一條信息記錄。
3) 瀏覽器如何通過域名去查詢 URL 對應的 IP 呢？
DNS域名解析分為遞歸查詢和迭代查詢兩種方式，現(xiàn)一般為迭代查詢。
DNS 應用
1) CDN (Content Delivery Network) 就是利用DNS的重定向技術(shù)，DNS服務器會返回一個跟 用戶最接近的點的IP地址給用戶，CDN節(jié)點的服務器負責響應用戶的請求，提供所需的內(nèi)容。
2) dns-prefetch 是一種 DNS 預解析技術(shù)。當你瀏覽網(wǎng)頁時，瀏覽器會在加載網(wǎng)頁時對網(wǎng)頁中的域名進行解析緩存，這樣在你單擊當前網(wǎng)頁中的連接時就無需進行 DNS 的解析，減少用戶等待時間，提高用戶體驗。
OSI參考模型與TCP/IP四層模型
3、TCP 連接
客戶端和服務端建立TCP連接需要三次握手。過程如下：
1) 客戶端發(fā)送一個帶 SYN=1，Seq=X 的數(shù)據(jù)包到服務器端口（第一次握手，由瀏覽器發(fā)起，告訴服務器我要發(fā)送請求了）
2) 服務器發(fā)回一個帶 SYN=1， ACK=X+1， Seq=Y 的響應包以示傳達確認信息（第二次握手，由服務器發(fā)起，告訴瀏覽器我準備接受了，你趕緊發(fā)送吧）
3) 客戶端再回傳一個帶 ACK=Y+1， Seq=Z 的數(shù)據(jù)包，代表“握手結(jié)束”（第三次握手，由瀏覽器發(fā)送，告訴服務器，我馬上就發(fā)了，準備接受吧）
說明：
ACK：確認標識，用于表示對數(shù)據(jù)包的成功接收。
SYN：同步標識，表示TCP連接已初始化。
三次握手的目的：為了防止已經(jīng)失效的連接請求報文段突然又傳送到了服務器端，從而產(chǎn)生錯誤。
4、發(fā)送HTTP請求 （ * 網(wǎng)絡優(yōu)化 ）
請求報文由請求行、請求頭和請求體三部分組成。
1）請求行包含請求方法、url和協(xié)議版本。
2）請求頭包含請求的附加信息，由鍵值對組成。如Host:github.com、User-Agent：""、Connection:keep-alive以及Cookie。
3）請求體主要是請求參數(shù)（Query String Parameters）。
注意：在發(fā)送HTTP請求的過程中，要先考慮瀏覽器緩存情況。緩存又分為強制緩存和協(xié)商緩存。
詳細資料：一文讀懂，關(guān)于 “ HTTP ” 那些事
5、服務器處理請求并返回 HTTP 報文
每臺服務器上都會安裝處理請求的應用——Web server。常見的web server產(chǎn)品有apache、nginx、IIS、Lighttpd等。
6、瀏覽器解析渲染頁面 （ * 瀏覽器優(yōu)化 ）
瀏覽器渲染過程
1）HTML解析，處理HTML標記并構(gòu)建DOM樹。
2）CSS解析，處理CSS標記并構(gòu)建CSSOM樹。
3）將DOM樹和CSSOM合并稱render tree(渲染樹)。將每條css規(guī)則按照【從右至左】的方式在dom樹上進行逆向匹配，然后生成具有樣式規(guī)則描述的渲染樹。
4）渲染樹布局，計算每個節(jié)點的集合信息。包括repaint和reflow。
5）渲染樹繪制，將每個節(jié)點繪制到屏幕上。
重繪與重排（重排 又叫 回流）
1）重排 (html改變) 一般是位置，大小，節(jié)點變化引起文檔空間變化時發(fā)生的。
引起重排：
添加或刪除可見的DOM元素
元素的位置發(fā)生變化
元素的尺寸發(fā)生變化（包括外邊距、內(nèi)邊框、邊框大小、高度和寬度等）
內(nèi)容發(fā)生變化，比如文本變化或圖片被另一個不同尺寸的圖片所替代。
頁面一開始渲染的時候（這肯定避免不了）
瀏覽器的窗口尺寸變化（因為回流是根據(jù)視口的大小來計算元素的位置和大小的）
2）重繪（css改變）一般是顏色等不引起文檔結(jié)構(gòu)變化時發(fā)生的。
注：重繪不一定導致重排，但重排一定會導致重繪。
7、斷開連接：TCP 四次揮手
當數(shù)據(jù)傳送完畢，需要斷開 tcp 連接，此時發(fā)起 tcp 四次揮手。
1) 發(fā)起方向被動方發(fā)送報文，F(xiàn)in、Ack、Seq，表示已經(jīng)沒有數(shù)據(jù)傳輸了。并進入 FIN_WAIT_1 狀態(tài)。(第一次揮手：由瀏覽器發(fā)起的，發(fā)送給服務器，我請求報文發(fā)送完了，你準備關(guān)閉吧)
2) 被動方發(fā)送報文，Ack、Seq，表示同意關(guān)閉請求。此時主機發(fā)起方進入 FIN_WAIT_2 狀態(tài)。(第二次揮手：由服務器發(fā)起的，告訴瀏覽器，我請求報文接受完了，我準備關(guān)閉了，你也準備吧)
3) 被動方向發(fā)起方發(fā)送報文段，F(xiàn)in、Ack、Seq，請求關(guān)閉連接。并進入 LAST_ACK 狀態(tài)。(第三次揮手：由服務器發(fā)起，告訴瀏覽器，我響應報文發(fā)送完了，你準備關(guān)閉吧)
4) 發(fā)起方向被動方發(fā)送報文段，Ack、Seq。然后進入等待 TIME_WAIT 狀態(tài)。被動方收到發(fā)起方的報文段以后關(guān)閉連接。發(fā)起方等待一定時間未收到回復，則正常關(guān)閉。(第四次揮手：由瀏覽器發(fā)起，告訴服務器，我響應報文接受完了，我準備關(guān)閉了，你也準備吧)
TCP與UDP區(qū)別總結(jié)：
相同點：TCP和UDP都是網(wǎng)絡層之上的，傳輸層協(xié)議，都能都能保護網(wǎng)絡層的傳輸，雙方的通信都需要開放端口，TCP和UDP中都存在復用和分用技術(shù)。
不同點：TCP是可靠傳輸?shù)模琔DP是不可靠傳輸?shù)摹?/span>
TCP VS UDP 對比：
簡單粗暴的優(yōu)化策略
1、?件加載的更少
1) 緩存，CDN （詳細資料：解析Web緩存及其最佳實踐）
2) 圖?優(yōu)化
3) 靜態(tài)?件優(yōu)化
4) 瀏覽器優(yōu)化
5) ?件合并壓縮等雅?軍規(guī)常規(guī)操作
2、代碼執(zhí)?的更少
1）節(jié)流防抖 （詳細資料：徹底弄懂 “ 防抖 和 節(jié)流 ”）
2）按需執(zhí)?
3）回流重繪
4）框架優(yōu)化（?如vue3的靜態(tài)標記）
5）html、css、javascript
二、前端性能監(jiān)控
1、前端性能指標分析
2、關(guān)鍵性能指標統(tǒng)計
3、性能分析工具
詳細如下：
前端性能指標分析
以 https://www.google.com.hk 為例，下圖是使用Lighthouse（一個性能測評工具）捕獲出的測評結(jié)果報告。
下圖是使用Chrome瀏覽器的DevTools捕獲出的加載性能結(jié)果報告。
從上面這兩張性能測評報告中，我們會發(fā)現(xiàn)報告通常會給出很多個 “關(guān)鍵時間點” 來表示性能數(shù)據(jù)，單獨的某個“時間點”無法體現(xiàn)出網(wǎng)頁的性能，只有將它們與自身的產(chǎn)品類型相結(jié)合，綜合評估，才能判斷出網(wǎng)頁的性能到底怎樣。而我們要做的，就是讀懂報告中的各種專業(yè)術(shù)語，并分辨出哪些因素影響了網(wǎng)頁的加載性能。
關(guān)鍵性能指標統(tǒng)計
FP、FCP、FMP與TTI
從前面的評測報告中，我們會看到FP、FCP、FMP與TTI這幾個字母很接近的術(shù)語，實際上他們的意思也非常接近，都表示瀏覽器在屏幕上渲染像素的時間點。
1）FP（全稱“First Paint”，翻譯為“首次繪制”） 是時間線上的第一個“時間點”，它代表瀏覽器第一次向屏幕傳輸像素的時間，也就是頁面在屏幕上首次發(fā)生視覺變化的時間。
注意：FP不包含默認背景繪制，但包含非默認的背景繪制。
2）FCP（全稱“First Contentful Paint”，翻譯為“首次內(nèi)容繪制”），顧名思義，它代表瀏覽器第一次向屏幕繪制 “內(nèi)容”。
注意：只有首次繪制文本、圖片（包含背景圖）、非白色的canvas或SVG時才被算作FCP。
FP與FCP這兩個指標之間的主要區(qū)別是：
FP是當瀏覽器開始繪制內(nèi)容到屏幕上的時候，只要在視覺上開始發(fā)生變化，無論是什么內(nèi)容觸發(fā)的視覺變化，在這一刻，這個時間點，叫做FP。
FCP指的是瀏覽器首次繪制來自DOM的內(nèi)容。例如：文本，圖片，SVG，canvas元素等，這個時間點叫FCP。
3）FMP（全稱“First Meaningful Paint”，翻譯為“首次有效繪制”） 表示頁面的“主要內(nèi)容”開始出現(xiàn)在屏幕上的時間點。它是我們測量用戶加載體驗的主要指標。
注意：FMP本質(zhì)上是通過一個算法來猜測某個時間點可能是FMP，所以有時候不準。
說明：
FMP 實現(xiàn)的三種方式：（需要擴展）
1?固定好dom的id，統(tǒng)計高度變化時間。
2?統(tǒng)計首屏dom的面積，計算占比 總結(jié)FMP。
3?dom變化趨勢，來統(tǒng)計FMP。
計算占比 的思路 （需要擴展）
元素權(quán)重：寬*?*權(quán)重(img,video要?普通dom?）；
進???開始記錄，啟?mutationobserver；
遍歷domtree，根據(jù)可視區(qū)域?積，計算得分；
遍歷?元素修正得分（?元素和?元素之和的最?值）；
平均值，過濾出?標元素；
是否img(video,canvas等；
合集求出FMP
4）TTI（全稱“Time to Interactive”，翻譯為“可交互時間”） 表示網(wǎng)頁第一次 完全達到可交互狀態(tài) 的時間點。可交互狀態(tài)指的是頁面上的UI組件是可以交互的（可以響應按鈕的點擊或在文本框輸入文字等），不僅如此，此時主線程已經(jīng)達到“流暢”的程度，主線程的任務均不超過50毫秒。TTI很重要，因為TTI可以讓我們了解我們的產(chǎn)品需要多久可以真正達到“可用”的狀態(tài)。
圖3給出了FP、FCP、FMP、TTI之間的比較。
W3C發(fā)布導航計時（Navigation Timing 2）的標準工作草案，該規(guī)范定義了一個統(tǒng)一的接口，存儲和獲取與網(wǎng)頁導航和頁面加載相關(guān)的高解析度的性能度量數(shù)據(jù)。
地址：https://www.w3.org/TR/navigation-timing-2/
如圖：
性能分析工具
1）谷歌開發(fā)者工具的“性能”選項進行分析：performance
詳細資料：性能優(yōu)化篇 - Performance（工具 & api）
2）谷歌的Lighthouse工具（國內(nèi)網(wǎng)絡環(huán)境）：基于 node（版本≥6）
安裝：npm install -g lighthouse
運行使用：lighthouse <url> --view
例如：lighthouse https://www.baidu.com/ --view
3）如果可以翻墻的話：可以在 Chorome 網(wǎng)上應用商店中安裝 - 網(wǎng)頁性能優(yōu)化的擴展程序：Lighthouse、PageSpeed Insights ；
4）在線網(wǎng)頁性能分析工具（推薦）
https://tools.pingdom.com/
Pingdom是一個免費的網(wǎng)站速度測試工作，不僅是看起來非常棒，而且盡可能多的呈現(xiàn)出你的網(wǎng)站的各方面信息。
5）使用 Chrome 原生 lazyload 屬性進行圖片懶加載
chrome://flags/#enable-lazy-image-loading
復制它到 Chrome 瀏覽器的地址欄，然后找到如下選項，將其設置為「Enabled」。
例如：<img src="具體圖片" alt="" lazyload="on">
說明：
auto 瀏覽器自行判斷
on 開啟懶加載
off 關(guān)閉懶加載
三、框架性能優(yōu)化
1、Vue性能優(yōu)化
2、長列表優(yōu)化
3、用戶體驗優(yōu)化
詳細如下：
Vue性能優(yōu)化
1、你都做過哪些Vue的性能優(yōu)化？（ 統(tǒng)計后的結(jié)果 ）
1）編碼階段
盡量減少data中的數(shù)據(jù)，data中的數(shù)據(jù)都會增加getter和setter，會收集對應的watcher；
如果需要使用v-for給每項元素綁定事件時使用事件代理；
SPA 頁面采用keep-alive緩存組件；
在更多的情況下，使用v-if替代v-show；
key保證唯一；
使用路由懶加載、異步組件；
防抖、節(jié)流；
第三方模塊按需導入；
長列表滾動到可視區(qū)域動態(tài)加載；
圖片懶加載；
2）用戶體驗：
骨架屏；
PWA；
還可以使用緩存(客戶端緩存、服務端緩存)優(yōu)化、服務端開啟gzip壓縮等。
3）SEO優(yōu)化
預渲染；
服務端渲染SSR；
4）打包優(yōu)化
壓縮代碼；
Tree Shaking/Scope Hoisting；
使用cdn加載第三方模塊；
多線程打包happypack；
splitChunks抽離公共文件；
sourceMap優(yōu)化；
說明：優(yōu)化是個大工程，會涉及很多方面，這里申請另開一個專欄
2、vue1.X，vue2.X，vue3 框架分析性能 （ 還需要進一步學習 ）
Vue1.x （特點：響應式）
沒有vdom，完全的響應式，每個數(shù)據(jù)變化，都通過響應式通知機制來新建Watcher干活，項目規(guī)模變大后，過多的Watcher，會導致性能的瓶頸。
Vue2.x （特點：組件級響應式，組件內(nèi)部vdom diff）
引入vdom，控制了顆粒度，組件層面走watcher通知， 組件內(nèi)部走vdom做diff，既不會有太多watcher，也不會讓vdom的規(guī)模過大，diff超過16ms，真是優(yōu)秀。
Vue3 （特點：proxy做響應式：靜態(tài)標記、按需更新）
先說結(jié)論，靜態(tài)標記，upadte性能提升1.3~2倍，ssr提升2~3倍。
Vue3通過Proxy響應式+組件內(nèi)部vdom+靜態(tài)標記，把任務顆粒度控制的足夠細致，所以也不太需要time-slice了。
長列表優(yōu)化
1、vue-virtual-scroll-list優(yōu)化長列表
虛擬列表的實現(xiàn)原理：只渲染可視區(qū)的 dom 節(jié)點，其余不可見的數(shù)據(jù)卷起來，只會渲染可視區(qū)域的 dom 節(jié)點，提高渲染性能及流暢性，優(yōu)點是支持海量數(shù)據(jù)的渲染；
github地址：https://github.com/tangbc/vue-virtual-scroll-list
2、Object.freeze優(yōu)化長列表
Object.freeze()方法可以凍結(jié)一個對象。一個被凍結(jié)的對象再也不能被修改；凍結(jié)了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。
對于data()或vuex中凍結(jié)的對象，vue不會做getter和setter的轉(zhuǎn)換。因此對于一個不變的、大數(shù)據(jù)量的數(shù)組或Object數(shù)據(jù)來說，使用Object.freeze()可以有效地提升性能。
用戶體驗優(yōu)化
使用骨架屏
骨架屏可以理解為是當數(shù)據(jù)還未加載進來前，頁面的一個空白版本，一個簡單的關(guān)鍵渲染路徑。
一些項目，可能大部分數(shù)據(jù)都是從后端獲取，網(wǎng)絡請求是需要占用一定的時間的，所以用戶一進來發(fā)現(xiàn)是空頁面，所以這個時候可以使用骨架屏先加載一個輪廓，而不是讓用戶覺得這個頁面掛了。
可以看一下上面的示例圖，第一個為骨架屏，第二個為菊花圖，第三個為無優(yōu)化，可以看到相比于傳統(tǒng)的菊花圖會在感官上覺得內(nèi)容出現(xiàn)的流暢而不突兀，體驗更加優(yōu)良。