前端性能優(yōu)化之從URL輸入到頁面加載過程分析
本文轉(zhuǎn)載自微信公眾號「前端萬有引力」，作者一川 。轉(zhuǎn)載本文請聯(lián)系前端萬有引力公眾號。
1寫在前面
在頁面加載到最終渲染顯示大致是這樣的：用戶在瀏覽器輸入URL回車后，瀏覽器為了將URL解析成IP地址，會向DNS服務(wù)器發(fā)起DNS查詢，獲取IP地址。在建立連接后，瀏覽器就可以發(fā)起HTTP請求，而服務(wù)器接受請求后進(jìn)行響應(yīng)，瀏覽器從響應(yīng)結(jié)果中拿到數(shù)據(jù)，并進(jìn)行解析和渲染，最后在用戶面前就出現(xiàn)了一個網(wǎng)頁。簡而言之就是三個階段：
- 客戶端發(fā)起請求階段
- 服務(wù)端數(shù)據(jù)處理請求階段
- 客戶端頁面渲染階段
2客戶端請求階段的優(yōu)化點(diǎn)
客戶端發(fā)起請求階段是指用戶在瀏覽器輸入URL，經(jīng)過本地緩存確認(rèn)是否已經(jīng)存在這個網(wǎng)站。如果沒有，接著會由DNS查詢從域名服務(wù)器獲取這個IP地址，接下來就是客戶端通過TCP三次握手和TLS協(xié)商向服務(wù)器發(fā)起HTTP請求建立連接的過程。
本地緩存
本地緩存可以讓靜態(tài)資源加載更快，當(dāng)客戶端發(fā)起一個請求時，靜態(tài)資源可以直接從客戶端獲取，不需要再想服務(wù)器請求。
但是在實際開發(fā)中，很多前端程序員會忽略本地緩存的優(yōu)化，這就會導(dǎo)致：在客戶端請求階段，假設(shè)一個項目的列表頁DNS產(chǎn)生時間是835ms，TCP三次握手和TLS協(xié)商是436ms，數(shù)據(jù)返回是412ms，這樣在強(qiáng)網(wǎng)條件下一個請求的響應(yīng)時間大概是1233ms。如果在弱網(wǎng)條件，一個請求連接的時間都需要2s，但是使用緩存處理的話，幾乎可以說是幾ms內(nèi)完成請求。
強(qiáng)緩存：指的是瀏覽器在加載資源時，根據(jù)請求頭的expires和cache-control判斷是否命中客戶端緩存。
協(xié)商緩存：指的是瀏覽器會先發(fā)送一個請求到服務(wù)器，通過last-modified和etag驗證資源是否命中客戶端緩存。
DNS查詢
DNS之所以能夠成為前端性能的優(yōu)化點(diǎn)，這是因為每進(jìn)行一次DNS查詢，都要經(jīng)歷從客戶端到信號接收站，再到認(rèn)證DNS服務(wù)器的過程。
但是這樣每次查詢都要走這個流程就會耗費(fèi)很多的時間，優(yōu)化方法就是讓DNS查詢先緩存，而瀏覽器提供了DNS預(yù)獲取的接口，我們可以在打開瀏覽器或者Webview的同時就進(jìn)行配置。
HTTP請求
對于HTTP請求而言最大的優(yōu)化點(diǎn)在于請求阻塞，就是瀏覽器為了保證訪問速度，會默認(rèn)對同一域下的資源保持一定的連接數(shù)，請求過多會進(jìn)行阻塞。對此我們提前做好域名規(guī)劃是很重要的，可以先看看當(dāng)前頁面需要用到哪些域名，最關(guān)鍵的是首屏中需要用到哪些域名。
域名散列：就是通過不同的域名，增加請求并行連接數(shù)。將靜態(tài)服務(wù)器地址pic.yichuan.com，做成支持pic0-5的6個域名，每次請求時隨機(jī)選取一個域名地址進(jìn)行請求，因為有6個域名同時可用，最多可以進(jìn)行并行36個連接。
一次完整的HTTP請求需要經(jīng)歷DNS查找，建立TCP握手，瀏覽器發(fā)起HTTP請求，服務(wù)器接受請求并處理返回響應(yīng)結(jié)果，瀏覽器再接收響應(yīng)等過程。但是每一次HTTP請求都需要加載很多文件，建立連接并耗費(fèi)很多時間。如果有很多文件就需要發(fā)起很多次請求，而如果把若干個小文件合并成一個大文件就可以減少HTTP請求，減少訪問的時間、提升效率和速度。
3服務(wù)端數(shù)據(jù)處理階段的優(yōu)化點(diǎn)
服務(wù)端數(shù)據(jù)處理階段指的是WevServer接受到請求后，從數(shù)據(jù)存儲層取到數(shù)據(jù)，再返回給前端的過程。服務(wù)端程序接受到HTTP請求后，會做一些請求參數(shù)處理以及權(quán)限校驗。此過程的優(yōu)化點(diǎn)：在于是否做了數(shù)據(jù)緩存處理、是否做了gzip壓縮以及是否具有重定向。gzip壓縮是一種壓縮技術(shù)，通過gzip壓縮資源的下載速度會快很多，能夠大大提升頁面的展示速度。
數(shù)據(jù)緩存
在進(jìn)行數(shù)據(jù)緩存的幾種方法：
- 借助Service Worker的數(shù)據(jù)接口緩存
- 借助本地存儲的接口緩存
- CDN
Service Worker：是瀏覽器的一個高級屬性，本質(zhì)上是一個請求代理層，它存在的目的就是攔截和處理網(wǎng)絡(luò)數(shù)據(jù)請求。
借助本地存儲的接口緩存：指的是在一些對數(shù)據(jù)時效性要求不高的頁面，第一次請求到數(shù)據(jù)后，程序?qū)?shù)據(jù)存儲到本地存儲。下一次請求的時候，先去緩存里面取出數(shù)據(jù)，如果沒有的話再想服務(wù)器發(fā)起請求。
CDN：基本思路是通過在網(wǎng)絡(luò)各處放置節(jié)點(diǎn)服務(wù)器，構(gòu)造一個智能虛擬網(wǎng)絡(luò)，將用戶的請求導(dǎo)向離用戶最近的服務(wù)節(jié)點(diǎn)上。
為什么數(shù)據(jù)緩存會成為性能的優(yōu)化點(diǎn)呢?這是因為每次請求數(shù)據(jù)接口，需要從客戶端到后端服務(wù)器再到更后端的數(shù)據(jù)存儲層，一層一層返回數(shù)據(jù)，最后再返回客戶端，這樣請求響應(yīng)的耗時很長。
重定向
重定向是指網(wǎng)站資源遷移到其他位置后，用戶訪問站點(diǎn)時，程序會自助將用戶請求從一個頁面轉(zhuǎn)移到另外一個頁面的過程。重定向的三種方式：
- 服務(wù)端發(fā)揮的302重定向
- META標(biāo)簽實現(xiàn)的重定向
- 前端Javascript通過window.location實現(xiàn)的重定向
它們都會引發(fā)新的DNS查詢，會導(dǎo)致新的TCP三次握手和TLS協(xié)商以及產(chǎn)生新的HTTP請求，而這些都會導(dǎo)致請求過程中更多地時間，進(jìn)而影響前端性能。
當(dāng)前服務(wù)端對數(shù)據(jù)加工聚合處理后，客戶端拿到數(shù)據(jù)，接下來會進(jìn)入解析和渲染階段。解析階段就是HTML解析器將頁面內(nèi)容轉(zhuǎn)換成DOM樹和CSSDOM樹的過程。所謂DOM樹，就是文檔對象模型(Document Object Model)，它描述了標(biāo)簽之間的層次和結(jié)構(gòu)。CSSDOM樹，即CSS對象模型，主要描述了樣式集的層次和結(jié)構(gòu)。
CSS解析器遍歷其中每個規(guī)則，將CSS規(guī)則解析瀏覽器可解析和處理的樣式集合，最終結(jié)合瀏覽器里面的默認(rèn)樣式，匯總形成具有父子關(guān)系的CSSDOM樹。
4頁面解析和渲染階段的優(yōu)化點(diǎn)
主線程會計算DOM節(jié)點(diǎn)的最終樣式，生成布局樹，布局樹會記錄參與頁面布局的節(jié)點(diǎn)和樣式。
DOM樹解析中的優(yōu)化點(diǎn)
解析和渲染階段的流程環(huán)節(jié)比較多，邏輯復(fù)雜，優(yōu)化點(diǎn)也比較多，比如：DOM樹構(gòu)建過程，CSSDOM樹生成階段，重排和重繪過程等。
- 當(dāng)HTML標(biāo)簽不滿足web語義化時，瀏覽器就需要更多時間去解析DOM標(biāo)簽的含義。
- DOM節(jié)點(diǎn)的數(shù)量越多，構(gòu)建DOM樹的時間就越長，進(jìn)而延長解析時間，拖延頁面展示速度。
- 文檔中包含<script>標(biāo)簽時，無論是DOM或者是CSSDOM都可以被Javscript所訪問和修改，所以一旦在頁面解析時遇到<script>標(biāo)簽，DOM的構(gòu)造過程就會暫停。因此外部<script>標(biāo)簽常被稱為”解析“階段的攔路虎，有時就因為解析過程中多了一個<script>標(biāo)簽造成頁面解析階段從200ms到1s。對此，外部腳本的加載時機(jī)一定要明確好，能夠延遲加載就選用延遲加載，通過使用defer和async告知瀏覽器在等待腳本下載期間不阻止解析過程。
CSS執(zhí)行會阻塞渲染，阻止JS執(zhí)行，而JS加載和執(zhí)行會阻塞HTML解析，阻止CSSDOM構(gòu)建。如果這些CSS、JS標(biāo)簽放在<head>標(biāo)簽中，并且需要加載和解析很久的話，那么頁面就出顯現(xiàn)白屏情況。因此，JS文件要放在底部（不會阻止DOM解析，但是會阻塞渲染），等HTML解析后再加載JS文件，盡早向用戶呈現(xiàn)頁面的內(nèi)容。
之所以要講CSS文件放在頭部，這是因為加載HTML后再加載CSS，會讓用戶第一時間看到?jīng)]有樣式的頁面，為了避免出現(xiàn)這種情況需要將CSS文件放在頭部。當(dāng)然JS文件也可以放在頭部，但是需要在<script>標(biāo)簽加上defer屬性就可以了，異步進(jìn)行下載、延遲執(zhí)行。
布局中的優(yōu)化點(diǎn)
瀏覽器會根據(jù)樣式解析器給出的樣式規(guī)則，來計算某個元素需要占據(jù)的空間大小和屏幕中的位置，借助計算結(jié)果來進(jìn)行布局。而主線程布局是采用的流布局，就是從上到下、從左到右進(jìn)行遍歷進(jìn)行布局。
假設(shè)我們在頁面渲染過程運(yùn)行時修改了一個元素的屬性，這時布局階段受到了影響，瀏覽器必須檢查所有其他區(qū)域的元素，然后自動重排頁面，相當(dāng)于進(jìn)行了一遍整個渲染流程。
此外，因為瀏覽器每次布局計算都要作用于真?zhèn)€DOM，如果元素量大，計算出所有的元素位置和尺寸會花費(fèi)很長的時間，所以布局階段很容易成為性能瓶頸點(diǎn)，需要我們進(jìn)行優(yōu)化。
比如說：當(dāng)你做列表頁性能優(yōu)化時，開始布局時并沒有確定列表頁圖片的初始尺寸，只設(shè)定了一個基礎(chǔ)的占位尺寸。那么當(dāng)圖片加載完畢后，主線程才知道圖片的大小，不得不重新進(jìn)行布局計算，然后再次進(jìn)行頁面渲染。
5參考文章
《前端性能優(yōu)化方法與實踐》
6寫在最后
頁面加載全過程很復(fù)雜，內(nèi)容也比較多，能夠進(jìn)行優(yōu)化點(diǎn)也是眾多，而本篇文章只是簡單介紹了前端領(lǐng)域的可優(yōu)化點(diǎn)。對于偏硬件領(lǐng)域能夠做的優(yōu)化點(diǎn)有GPU繪圖、操作系統(tǒng)GUI和LCD顯示等;對于計算機(jī)網(wǎng)絡(luò)中的網(wǎng)絡(luò)層和服務(wù)層，比如擁塞預(yù)防、負(fù)載均衡和慢啟動;還有一些頁面的解析和渲染算法，比如解析算法、標(biāo)記算法和樹構(gòu)建算法等。
