前端性能優化之初解析

做者：魚某某@毛豆前端

想作前端性能優化，就要知道從輸入url，按下回車那一刻，到頁面呈如今你面前這個過程到底經歷了什麼？

從上圖中咱們能夠總結爲4點：

一、DNS解析次數

二、TCP鏈接接時間

三、Http請求和響應

四、瀏覽器渲染

下面，咱們將性能優化分爲請求速度優化和渲染優化兩部分來說：

一、請求速度優化

資源從請求發出到接受這個部分要經歷，DNS解析，TCP鏈接，請求和服務端響應這幾個部分，而且這些部分都是要花費時間的，下面咱們依次來說述如何減小各個節點的時間：

DNS解析

說到DNS解析，咱們能作的就是將解析過程前置，就是俗稱的預解析，DNS解析後會緩存，待真正請求資源時，就不會再花費DNS解析的時間。

注：瀏覽器會將咱們頁面中使用的域名自動進行DNS解析，因此咱們只需配置頁面中沒有出現的域名便可，可是要注意的是，要合理配置dns的解析，不然會浪費一些沒必要要的資源

TCP鏈接

講解如何減小TCP鏈接次數以前，先來複習下三次握手和四次揮手： TCP三次握手🤝

Https比Http多了SSL解析（第四次握手🤝）

TCP四次揮手👋

從上圖能夠看到這個每次http請求所要鏈接和斷開的時間遠遠比咱們想象的要多，可是頁面中避免不開http的請求，因此下面咱們就要來講說如何減小tcp的鏈接次數：

一、Keep-alive

二、握手複用 三、減小http請求

四、http2戳我👇

減小http請求咱們經常使用的方法有：

一、合併靜態資源

二、緩存

三、本地存儲

緩存分爲Memory cache、Disk cache、Servivce worker cache三種：

具體如何設置呢，打開控制檯，仔細看一看請求頭中的字段，能夠總結爲下圖：

服務端響應

tcp創建鏈接後，就要面對靜態資源傳輸速度的問題，從傳輸這兩個字來看，確定會和傳輸大小和傳輸距離有關，因此咱們就要考慮如何將靜態資源變的小，傳輸距離變得短？

一、Gzip

二、構建工具縮小js，css文件大小

三、CDN

CDN域名咱們須要注意一下下，它和咱們的域名是不同的哦，這樣它就不須要攜帶cookie，這樣也變相的減小了請求頭的大小

四、選擇合理的圖片類型

其餘

多域名，利用瀏覽器的併發性，瀏覽器一次能夠請求同域名下4-6個靜態資源，因此在遇到阻塞的狀況，不一樣域名下的靜態資源則不會收到影響，因此能夠利用多域名來加載靜態資源，但須要注意的是，不要設置過多域名，會形成性能浪費，3-4個就好

二、瀏覽器渲染優化

衆所周知頁面解析時遇到link，js標籤會停下等待資源的加載，而且爲了防止瀏覽器裸奔，render tree的造成很重要，因此css放在頭部，js放在尾部是必然的

減小重繪和迴流的次數

重繪：當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color，則稱爲重繪

迴流：當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建，這就稱爲迴流 注意：迴流必將引發重繪，而重繪不必定會引發迴流

迴流什麼時候發生：

一、添加或者刪除可見的DOM元素

二、元素位置改變

三、當頁面佈局或幾何屬性改變——邊距、填充、邊框、寬度和高度

四、內容改變——好比文本改變或者圖片大小改變而引發的計算值寬度和高度改變

五、頁面渲染初始化

六、瀏覽器窗口尺寸改變——resize事件發生時

七、獲取offsetTop/Left/Width/Height , scrollTop/Left/Width/Height , clientTop/Left/Width/Height，Width/Height

因此：

一、用class來改變樣式

二、脫離文檔流，display：none或者position：absolute/fixed

三、dom結構離線處理後一次插入

四、不要常常訪問會引發瀏覽器flush隊列的屬性，若是你確實要訪問，利用緩存

懶加載

原則就是將必須呈現的東西快速加載，其他的資源能夠按需加載，讓用戶快速看到頁面，減小等待時間

一、白屏時間（從按下回車到第一個元素出現的時間）

二、首屏時間（第一屏展現出的時間）

總結

極端的總結爲一句話😁：請求能少發就少發，資源能多小就多小，請求距離能多短就多短，dom操做能不變就不變，能一次作的毫不兩次作

性能優化是一個漫長的過程，慢慢體驗⛽️