瀏覽器的performance

時間 2020-02-25

原文原文鏈接

瀏覽器devtools：css

Elements：在 Elements 面板中能夠經過 DOM 樹的形式查看全部頁面元素，同時也能對這些頁面元素進行所見即所得的編輯html

Console：一方面用來記錄頁面在執行過程當中的信息（通常經過各類 console 語句來實現），另外一方面用來當作 shell 窗口來執行腳本以及與頁面文檔、DevTools等進行交互shell

Sources：Sources 面板主要用來調試頁面中的 JavaScript數組

Network：在 Network 面板中能夠查看經過網絡來請求來的資源的詳細信息以及請求這些資源的耗時瀏覽器

Performance：在 Performance 面板能夠查看頁面加載過程當中的詳細信息，好比在什麼時間開始作什麼事情，耗時多久等等。有人會問，這個跟上面的 Network 有什麼區別呢，上面也能顯示耗時信息。在 Performance 面板中，你不只能夠看到經過網絡加載資源的信息，還能看到解析 JS、計算樣式、重繪等頁面加載的方方面面的信息緩存

Memory：Memory 面板主要顯示頁面 JS 對象和相關聯的 DOM 節點的內存分佈狀況安全

Application：記錄網頁加載的全部資源，包括存儲信息、緩存信息以及頁面用到的圖片、字體、腳本、樣式等信息性能優化

Security：用於檢測當面頁面的安全性服務器

Audits：審計面板會對頁面的加載進行分析，而後給出提升頁面性能的建議。網絡

瀏覽器的 performance

頁面總體分爲4個區域：

1：具體條，包含錄製，刷新頁面分析，清除結果等操做

2：overview總覽圖，高度歸納隨時間線的變更，包括FPS，CPU，NET

FPS（frames per second）是用來分析動畫的一個主要性能指標。       綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，       極可能會出現卡頓。能保持在60的FPS的話，那麼用戶體驗就是不       錯的。
CPU  cpu 資源, 消耗 CPU
NET  網絡請求

3：火焰圖，從不一樣的角度分析框選區域。例如：Network，Frames, Interactions, Main等

藍線表明 DOMContentLoaded 事件。 綠線表明首次繪製的時間。 紅線表明 load 事件

4：總結區域：精確到毫秒級的分析，以及按調用層級，事件分類的整理

藍色(Loading)：網絡通訊和HTML解析
黃色(Scripting)：JavaScript執行中
紫色(Rendering)：樣式計算和佈局，即重排
綠色(Painting)：重繪時間
灰色(other)：其它事件花費的時間
白色(Idle)：空閒時間

loading事件：

Send Request 發送網絡請求時觸發

Receive Response 響應頭報文到達時觸發

Receive Data 請求的響應數據到達事件，若是響應數據很大（拆包），可能會屢次觸發該事件

Finish Loading 網絡請求完畢事件

Parse HTML 瀏覽器執行HTML解析

scripting事件：

Animation Frame Fired 一個定義好的動畫幀發生並開始回調處理時觸發

Cancel Animation Frame 取消一個動畫幀時觸發

GC Event 垃圾回收時觸發

DOMContentLoaded 當頁面中的DOM內容加載並解析完畢時觸發

Evaluate Script A script was evaluated.

Event js事件

Function Call 只有當瀏覽器進入到js引擎中時觸發

Install Timer 建立計時器（調用setTimeout()和setInterval()）時觸發

Remove Timer 當清除一個計時器時觸發

Time 調用console.time()時觸發

Time End 調用console.timeEnd()觸發

Timer Fired 定時器激活回調後觸發

XHR Ready State Change 當一個異步請求爲就緒狀態後觸發

XHR Load 當一個異步請求完成加載後觸發

Rendering事件：

Invalidate layout 當DOM更改致使頁面佈局失效時觸發

Layout 頁面佈局計算執行時觸發

Recalculate style Chrome從新計算元素樣式時觸發

Scroll 內嵌的視窗滾動時觸發

Painting事件：

Composite Layers Chrome的渲染引擎完成圖片層合併時觸發，合成層；當渲染樹上的節點塗鴉完畢後，便生成位圖（bitmap），瀏覽器把此位圖從CPU傳輸到GPU

Image Decode 一個圖片資源完成解碼後觸發

Image Resize 一個圖片被修改尺寸後觸發

Paint 合併後的層被繪製到對應顯示區域後觸發肯定渲染樹上的節點的大小和位置後，即可以對節點進行塗鴉（paint）

Send Request 發送網絡請求

根據url，先去本地DNS緩存列表裏尋找對應的服務器的ip地址和端口號，若沒有找到，繼續尋找系統緩存和路由緩存，若找到則跳轉第三步

還沒找到的話則請求本地DNS服務器，沒有就將域名發送給其餘服務器，遞歸尋找，從根域名服務器開始不斷向下遞歸，直到返回對應的IP地址和端口號，並將其緩存

根據ip地址和端口號，與目標服務器創建TCP鏈接（三次握手）

這三步並無被咱們看見，而後接下來的事就被咱們觀察到了

瀏覽器向服務器發送http請求，並接收返回的響應頭和響應體

Receive Data

服務器在發送數據的時候，可能會進行拆包，分幾回發送

下面就是解析html 解析js解析css了

html: HTML Parser的任務是將HTML標記，解析成DOM Tree，這是一個深度遍歷的過程，只有Dom下的子節點都被遍歷完成，才遍歷下一個同級Dom節點

js:

不論是內聯的仍是外部的，都會阻塞後續dom的解析和渲染,

因此通常將<script>標籤放在<body>後面

若是是外部的，還能夠在<script>標籤上加上defer或async屬性

defer可讓js的下載不影響html的後續解析，且在html解析完了再執行js文件，且按照原來的下載順序

async也是讓js的下載不影響html的後續解析，但一旦下載完了就當即執行，所以也沒法保證按照下載順序執行

css:外部和內部的css文件都不會阻塞dom的解析，可是會阻塞dom的渲染

渲染布局與繪製

在有了Dom Tree和CSSOM以後
瀏覽器就會構建Render Tree（渲染樹）Render Tree實際上就是一個計算好了樣式，同時不包含display：none之類，不佔據空間的元素的的渲染樹。

把DOM Tree和CSSOM進行附加

重排和重繪：

完成了第一次繪製以後，瀏覽器會繼續收到服務器發來的數據
圖片，css文件，js文件
其中可能會有致使頁面佈局更改或樣式更改的內容，都會添加到咱們的Render Tree上去
引發重排（Layout）或重繪（Paint）

引發重排的操做：

頁面首次渲染
瀏覽器窗口大小發生改變
元素尺寸或位置發生改變
元素內容變化（文字數量或圖片大小等等）
元素字體大小變化
添加或者刪除可見的DOM元素
激活CSS僞類（例如：:hover)
設置style屬性
重繪：

引發重繪的通常都是修改元素的屬性

性能優化

從性能優化的角度，咱們要儘可能減小瀏覽器的重排和重繪，尤爲是重排

儘可能不要在佈局信息改變時作查詢（會致使渲染隊列強制刷新）

減小DOM操做，同一個DOM的多個屬性改變能夠寫在一塊兒，在一個局部方法中須要屢次訪問同一個Dom，則先暫存它的引用。批量添加DOM，能夠先讓元素脫離文檔流，操做完後再帶入文檔流，這樣只會觸發一次重排（應用fragment元素）

將須要屢次重排的元素，position屬性設爲absolute或fixed，例若有動畫效果的元素

採用更優的API替代消費高的API，轉換優化消費高的集合，如用querySelectorAll()替代getElementByXX()。

開啓動畫的GPU加速

少用HTML集合（類數組）來遍歷，由於集合遍歷比真數組遍歷耗費更高。

用事件委託來減小事件處理器的數量。

避免設置大量的style屬性，由於經過每一次設置都會觸發一次reflow，因此最好是使用class屬性

動畫實現的速度太精細平滑，會致使reflow過於頻繁

不要使用table佈局，由於table中某個元素旦觸發了reflow，那麼整個表格都會reflow。

減小經過JavaScript代碼修改元素樣式，儘可能使用修改class名方式操做樣式或動畫；

隱藏在屏幕外，或在頁面滾動時，儘可能中止動畫；

window.performance這個API能夠告訴咱們一下當前頁面中與性能相關的信息。

資料：https://developer.mozilla.org/zh-CN/docs/Web/API/Performance

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。