1、瀏覽器的一個請求從發(fā)送到返回都經(jīng)歷了什么？

1.發(fā)送URL請求到DNS服務(wù)器，獲取域名對應(yīng)的 web服務(wù)器的ip地址

2.與web服務(wù)器建立TCP/IP協(xié)議

3.瀏覽器向web服務(wù)器發(fā)送HTTP GET請求

4.web服務(wù)器響應(yīng)請求，并返回指定url的數(shù)據(jù)

5.瀏覽器下載web服務(wù)器返回的數(shù)據(jù)并解析html源文件

6.生成Dom樹，解析js和css，渲染頁面

image.png

image.png

01.請求過程中一些潛在的性能優(yōu)化點

image.png

2、資源的合并與壓縮

目標(biāo)：

* 減少http請求數(shù)量

* 減少請求資源的大小

操作方式：

* html壓縮

image.png

* css壓縮

image.png

* js壓縮與混亂

image.png

image.png

* 文件合并

image.png

image.png

3、圖片相關(guān)的優(yōu)化操作

01.不同格式圖片常用的業(yè)務(wù)場景

* jpg有損壓縮，壓縮率高，不支持透明 —— 大部分不需要透明圖片的業(yè)務(wù)場景

* png支持透明，瀏覽器兼容好 —— 大部分需要透明圖片的業(yè)務(wù)場景

* webp壓縮程度更好，在ios webview有兼容性問題 —— 安卓全部

* svg矢量圖，代碼內(nèi)嵌，相對較小，圖片樣式相對簡單的場景 —— 圖片樣式相對簡單的業(yè)務(wù)場景

02.CSS雪碧圖

image.png

03.Image inline

image.png

04.使用矢量圖

image.png

05.在安卓下使用webp

image.png

4、懶加載與預(yù)加載

* 懶加載：一張圖片就是一個<img>標(biāo)簽，瀏覽器是否發(fā)起請求圖片是根據(jù)<img>的src屬性，所以實現(xiàn)懶加載的關(guān)鍵就是，在圖片沒有進(jìn)入可視區(qū)域時，先不給<img>的src賦值，這樣瀏覽器就不會發(fā)送請求了，等到圖片進(jìn)入可視區(qū)域再給src賦值

* 懶加載作用：減少無效資源的加載，提高用戶體驗，減輕服務(wù)器的壓力，優(yōu)先加載可視區(qū)域的內(nèi)容。

* 預(yù)加載：就是將所有所需的資源提前請求加載到本地，這樣后面在需要用到時就可以直接從緩存中獲取資源

* 預(yù)加載作用：在網(wǎng)頁全部加載之前，對一些主要內(nèi)容進(jìn)行加載，以提供給用戶更好的體驗，減少等待的時間

* 實現(xiàn)預(yù)加載的幾種方法：

* 使用HTML標(biāo)簽

* 使用image對象

* 使用XMLHttpRequest對象，雖然存在跨域問題，但會精細(xì)控制預(yù)加載過程

* 使用PreloadJS庫

image.png

5、css、js 的加載與執(zhí)行 ———— html頁面加載渲染的過程

在頁面加載時，瀏覽器把獲取到的HTML代碼解析成一個DOM樹，DOM樹里包含了所有HTML標(biāo)簽，包括display：none隱藏，還有用JS動態(tài)添加的元素等。

render tree（渲染樹）類似于DOM tree（DOM樹），但區(qū)別很大，因為render tree能識別樣式，同時render tree中每個NODE都有自己的style，而且render tree不包含隱藏的節(jié)點（比如display：none的節(jié)點，還有head節(jié)點），因為這些節(jié)點不會用于呈現(xiàn)，而且不會影響呈現(xiàn)，所以就不會包含到render tree中。

image.png

實質(zhì)：DOM tree（DOM樹）結(jié)合CSS，就渲染除了render tree（渲染樹）

image.png

渲染步驟：

* 第一步，用HTML分析器，分析HTML元素，構(gòu)建一顆DOM樹(標(biāo)記化和樹構(gòu)建)。

* 第二步，用CSS分析器，分析CSS文件和元素上的inline樣式，生成頁面的樣式表。

* 第三步，將DOM樹和樣式表，關(guān)聯(lián)起來，構(gòu)建一顆Render樹(這一過程又稱為Attachment)。每個DOM節(jié)點都有attach方法，接受樣式信息，返回一個render對象(又名renderer)。這些render對象最終會被構(gòu)建成一顆Render樹。

* 第四步，有了Render樹，瀏覽器開始布局，為每個Render樹上的節(jié)點確定一個在顯示屏上出現(xiàn)的精確坐標(biāo)。

* 第五步，Render樹和節(jié)點顯示坐標(biāo)都有了，就調(diào)用每個節(jié)點paint方法，把它們繪制出來。

image.png

6、回流（layout）與重繪（paint）

image.png

回流：當(dāng)render tree中的一部分(或全部)因為元素的規(guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)

何時需要回流：當(dāng)頁面布局和幾何屬性改變時就需要回流

image.png

重繪：當(dāng)render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會影響布局的，比如background-color。則就叫稱為重繪

image.png

回流與重繪的區(qū)別：

image.png

新建DOM的過程：

image.png

Chrome創(chuàng)建圖層的條件：

image.png

實際項目中應(yīng)對回流 & 重繪的優(yōu)化操作：

image.png