前言

移動互聯(lián)網(wǎng)時代，用戶對于網(wǎng)頁的打開速度要求越來越高。首屏作為直面用戶的第一屏，其重要性不言而喻。優(yōu)化用戶體驗更是我們前端開發(fā)非常需要 focus 的東西之一。

從用戶的角度而言，當(dāng)打開一個網(wǎng)頁，往往關(guān)心的是從輸入完網(wǎng)頁地址后到最后展現(xiàn)完整頁面這個過程需要的時間，這個時間越短，用戶體驗越好。所以作為網(wǎng)頁的開發(fā)者，就從輸入url到頁面渲染呈現(xiàn)這個過程中去提升網(wǎng)頁的性能。

所以輸入URL后發(fā)生了什么呢？在瀏覽器中輸入url會經(jīng)歷域名解析、建立TCP連接、發(fā)送http請求、資源解析等步驟。

http緩存優(yōu)化是網(wǎng)頁性能優(yōu)化的重要一環(huán)。本文主要從網(wǎng)頁渲染過程、性能指標(biāo)的解讀以及CDN應(yīng)用優(yōu)化三個角度，并對性能定位和性能優(yōu)化做一個小結(jié)。

關(guān)鍵詞：

1.? 通過工具（如何使用工具，怎么去看）定位問題

2.? 發(fā)現(xiàn)問題，對應(yīng)的措施（提升頁面）

3.? 監(jiān)控（優(yōu)化的東西 是持續(xù)性，不像bug一次性解決）

本質(zhì)：兩大范疇：加載 和 渲染

網(wǎng)頁渲染過程

首先談?wù)勀玫椒?wù)端資源后瀏覽器渲染的流程：

1. 解析 HTML 文件，構(gòu)建 DOM 樹，同時瀏覽器主進程負(fù)責(zé)下載 CSS 文件

2. CSS 文件下載完成，解析 CSS 文件成樹形的數(shù)據(jù)結(jié)構(gòu)，然后結(jié)合 DOM 樹合并成 RenderObject 樹

3. 布局 RenderObject 樹 （Layout/reflow），負(fù)責(zé) RenderObject 樹中的元素的尺寸，位置等計算

4. 繪制 RenderObject 樹 （paint），繪制頁面的像素信息

5.? 瀏覽器主進程將默認(rèn)的圖層和復(fù)合圖層交給 GPU 進程，GPU 進程再將各個圖層合成（composite），最后顯示出頁面

經(jīng)典面試題：輸入url后，瀏覽器做了什么？

Url 首先進行DNS解析，找到目的服務(wù)器IP,建立TCP鏈接，發(fā)送http請求，服務(wù)器響應(yīng)網(wǎng)頁，瀏覽器接收對應(yīng)的文件并解析，html 和css 通過對應(yīng)的解析器生成并融合的成渲染樹，渲染頁面。

總結(jié)出問題出現(xiàn)的地方：

1。加載時間過長，加載很久

2.? 解析的過程太久，導(dǎo)致渲染很慢

前端性能指標(biāo)的建立和解讀

在我們的Google瀏覽器中已經(jīng)內(nèi)置了一個perfomance的功能，

Web Vitals 是 Google 的一項舉措，旨在為web質(zhì)量提供統(tǒng)一的指導(dǎo)，這些指標(biāo)對于在網(wǎng)絡(luò)上提供出色的用戶體驗至關(guān)重要。Web Vitals為了簡化場景，幫助網(wǎng)站專注于最重要的指標(biāo)，提出了Core Web Vitals。Core Web Vitals 是 Web Vitals 的子集，包含 LCP(Largest Contentful Paint)，F(xiàn)ID(First Input Delay) 和 CLS(Cumulative Layout Shift)。

●?LCP(Largest Contentful Paint)：最大內(nèi)容繪制，測量加載性能。為了提供良好的用戶體驗，LCP 應(yīng)在頁面首次開始加載后的2.5秒內(nèi)發(fā)生。

●?FID(First Input Delay)：首次輸入延遲，測量交互性。為了提供良好的用戶體驗，頁面的 FID 應(yīng)為100毫秒或更短。

●?CLS(Cumulative Layout Shift)：累積布局偏移，測量視覺穩(wěn)定性。為了提供良好的用戶體驗，頁面的 CLS 應(yīng)保持在0.1或更少。

從這三個指標(biāo)的含義中我們可以發(fā)現(xiàn)這三個指標(biāo)分別從頁面的加載速度，頁面的交互性和頁面的視覺穩(wěn)定性這三個角度來衡量頁面的性能。

如果我們想自己采集頁面的各項原始指標(biāo)數(shù)據(jù)，該怎么做呢？瀏覽器為我們提供了原生的 Timing API

CDN介紹及工作原理

1、為什么要用CDN加速服務(wù)

如果一個網(wǎng)站（作為盈利渠道或是品牌窗口）需要吸引大流量， 以下幾點因素是制勝的關(guān)鍵：

●?內(nèi)容有吸引力

●?訪問速度快

●?支持頻繁的用戶互動

●?可以在各處瀏覽無障礙

滿足這些條件的前提就是：網(wǎng)站訪問快

那么CDN就是一個加速網(wǎng)站訪問的優(yōu)秀解決方案

除此之外，CDN還有一些作用：

1. 為了實現(xiàn)跨運營商、跨地域的全網(wǎng)覆蓋

互聯(lián)不互通、區(qū)域ISP地域局限、出口帶寬受限制等種種因素都造成了網(wǎng)站的區(qū)域性無法訪問。CDN加速可以覆蓋全球的線路，通過和運營商合作，部署IDC資源，在全國骨干節(jié)點商，合理部署CDN邊緣分發(fā)存儲節(jié)點，充分利用帶寬資源，平衡源站流量。阿里云在國內(nèi)有500+節(jié)點，海外300+節(jié)點，覆蓋主流國家和地區(qū)不是問題，可以確保CDN服務(wù)的穩(wěn)定和快速。

2. 為了保障你的網(wǎng)站安全

CDN的負(fù)載均衡和分布式存儲技術(shù)，可以加強網(wǎng)站的可靠性，相當(dāng)無無形中給你的網(wǎng)站添加了一把保護傘，應(yīng)對絕大部分的互聯(lián)網(wǎng)攻擊事件。防攻擊系統(tǒng)也能避免網(wǎng)站遭到惡意攻擊。

3. 為了異地備援

當(dāng)某個服務(wù)器發(fā)生意外故障時，系統(tǒng)將會調(diào)用其他臨近的健康服務(wù)器節(jié)點進行服務(wù)，進而提供接近100%的可靠性，這就讓你的網(wǎng)站可以做到永不宕機。

4. 為了節(jié)約成本投入

使用CDN加速可以實現(xiàn)網(wǎng)站的全國鋪設(shè)，你根據(jù)不用考慮購買服務(wù)器與后續(xù)的托管運維，服務(wù)器之間鏡像同步，也不用為了管理維護技術(shù)人員而煩惱，節(jié)省了人力、精力和財力。

5. 為了讓你更專注業(yè)務(wù)本身

CDN加速廠商一般都會提供一站式服務(wù)，業(yè)務(wù)不僅限于CDN，還有配套的云存儲、大數(shù)據(jù)服務(wù)、視頻云服務(wù)等，而且一般會提供7x24運維監(jiān)控支持，保證網(wǎng)絡(luò)隨時暢通，你可以放心使用。并且將更多的精力投入到發(fā)展自身的核心業(yè)務(wù)之上。

優(yōu)點：

●?JS體積變小，使用CDN的第三方資源的JS代碼，將不再打包到本地服務(wù)的JS包中。減小本地JS包體積，提高加載速度。

●?給網(wǎng)頁加載提速

缺點：

●?請求變多

●?萬一CDN資源路徑有變動需要更改，建議自行搭建CDN庫。

●?花錢

推薦BootCDN（有很多經(jīng)過CDN加速的工具鏈接）

www.bootcdn.cn/

2、什么是CDN(深度) 更多的是存放分發(fā)靜態(tài)內(nèi)容

3、工作原理

借用阿里云官網(wǎng)的例子，來簡單介紹CDN的工作原理。

假設(shè)通過CDN加速的域名為www.a.com，接入CDN網(wǎng)絡(luò)，開始使用加速服務(wù)后，當(dāng)終端用戶（北京）發(fā)起HTTP請求時，處理流程如下：

當(dāng)終端用戶（北京）向www.a.com下的指定資源發(fā)起請求時，首先向LDNS（本地DNS）發(fā)起域名解析請求。

LDNS檢查緩存中是否有www.a.com的IP地址記錄。如果有，則直接返回給終端用戶；如果沒有，則向授權(quán)DNS查詢。

當(dāng)授權(quán)DNS解析www.a.com時，返回域名CNAMEwww.a.tbcdn.com對應(yīng)IP地址。

域名解析請求發(fā)送至阿里云DNS調(diào)度系統(tǒng)，并為請求分配最佳節(jié)點IP地址。

LDNS獲取DNS返回的解析IP地址。

用戶獲取解析IP地址。

用戶向獲取的IP地址發(fā)起對該資源的訪問請求。

如果該IP地址對應(yīng)的節(jié)點已緩存該資源，則會將數(shù)據(jù)直接返回給用戶，例如，圖中步驟7和8，請求結(jié)束。

如果該IP地址對應(yīng)的節(jié)點未緩存該資源，則節(jié)點向源站發(fā)起對該資源的請求。獲取資源后，結(jié)合用戶自定義配置的緩存策略，將資源緩存至節(jié)點，例如，圖中的北京節(jié)點，并返回給用戶，請求結(jié)束。

從這個例子可以了解到：

（1）CDN的加速資源是跟域名綁定的。

（2）通過域名訪問資源，首先是通過DNS分查找離用戶最近的CDN節(jié)點（邊緣服務(wù)器）的IP

（3）通過IP訪問實際資源時，如果CDN上并沒有緩存資源，則會到源站請求資源，并緩存到CDN節(jié)點上，這樣，用戶下一次訪問時，該CDN節(jié)點就會有對應(yīng)資源的緩存了。