網頁性能分析工具 | 8月更文挑戰

真正瞭解性能優化時，仍是產品以爲咱們系統有點卡，讓我好好優化優化性能。而且有一個量化的指標來證實確實性能提高了。

1、 google任務管理器

查看web頁面所佔用內存，以及Javascript佔用的內存, 放置一夜，觀察是否有內存泄漏。
複製代碼

2、Memory

Memory模塊能夠分析網頁內存狀況。

能夠看到任務管理裏 和 Memory模塊裏均可以看到佔用內存的大小。

• Heap snapshot // 堆快照
• Allocation instrumentation on timeline // 分時段的內存佔用
• Allocation sampling // 分配抽樣

能夠查看javascript 對象和相關 DOM 節點之間的內存分配.

咱們能夠選擇堆快照，若是你懷疑某個操做會增長內存的話，那就再作一次堆快照來作對比，其中 Size Delta 爲 內存增量，主要查看這個指標，找到這個操做的先後差別的地方。

3、Network

經過network能夠清楚的知道，哪些資源佔用的時間比較長，或者說能經過webpack拆包把它分解成幾個文件並行加載，提升運行速度。

4、Performance

我們以掘金首頁分析爲例：

FPS

咱們清緩存刷新頁面後的這段時間，FPS 顯示出一個掉幀的狀況(通常FPS在60如下，就會感受到卡頓).

Frames

在75ms ~ 150ms, 幀率廣泛較低。 用戶體驗可能不太好。

LCP（Largest Contentful Paint）

從這個指標能夠看出 頁面中渲染最耗時的是 banner-image, 可讓ui減少圖片尺寸，或者壓縮圖片。

Experience

粉色塊狀的表明會影響用戶體驗，給出來的緣由是移動了座標。

咱們在佈局的時候，儘可能不要發生迴流。若是須要移動元素比較頻繁，最好用定位，防止發生迴流。

Main 主進程

在Main這一欄裏能夠看到耗時較長的任務，能夠在下面的Bottom-up、 Event Log裏找到一些蛛絲馬跡，排查到代碼裏執行函數的耗時，來進行優化。

Lighthouse

能夠清晰的看到各個指標的得分,針對性的去優化相關的問題。