如何使用Goolge Timeline工具

2022-04-23 08:31:36 字數 1781 閱讀 6855

網上中文的資料版本比較老,找到乙個新版本的英文介紹,翻一下,原文:

4部分組成:

1.控制面板

包含開始記錄,結束記錄,配置我要捕獲什麼內容組成

2.概述面板

頁面效能的高度總結,詳見下文。

3.火焰圖面板

cpu棧的視覺化描述

4.細節面板

當乙個事件被選中,這個面板會顯示有關這個事件的更多資訊。如果沒有事件選中,會顯示選中的火焰圖的資訊。

該面板有3部分圖組成:

1.fps

每秒的火焰。綠色的柱狀越高,fps越高。fps上紅色的區塊預示著長火焰,有可能是卡頓產生了。(動畫渲染時間超過了螢幕的重新整理時間)

2.cpu

cpu資源。這個面積圖指示了哪種事件消耗cpu資源多。

3.net

到最後乙個位元接收的時間)

柱子的顏色對應如下:

html檔案是藍色。

script問件事黃色。

stylesheets檔案是紫色。

media檔案是綠色。

其他檔案是灰色。

記錄乙個頁面的載入過程,我們需要開啟timeline面板,開啟我們需要記錄的網頁,重新整理網頁,就會自動開始記錄(經測試不可以,得在timeline面板按f5)

如果要記錄頁面互動,按(

) 或ctrl+e開始記錄,頁面操作,然後按紅色按鈕結束記錄。

當記錄結束,工具組會自動縮放到和你最相關的部分給你檢視。

記錄小貼士

讓紀錄的時間越短越好:短時間讓你更容易分析。

避免不必要的動作

禁用瀏覽器快取

禁用拓展外掛程式

當你選中火焰表的乙個事件,細節面板會顯示更多有關的細節。

一些選項卡,比如summary,是所有型別的事件。而其他的選項卡只顯示某一種事件,檢視timeline event reference獲得更多的記錄型別。

timeline面板可以在載入頁面的時候捕獲截圖。這就是傳說中的幻燈片(連續截圖)

使用方法就是在控制面板選中screenshots ,然後在概述面板中滑鼠放上去就能看了

在控制面板中選中js profile選項框,這樣你就可以在火焰圖中看到每個js函式的呼叫情況。

當在控制面板中選中paint,記錄後你可以單擊乙個paint事件,然後你可以在細節面板中檢視

開啟工具主選單,選擇more tools>rendering settings開啟配置面板,這個會對於除錯paint相關的有幫助。具體如下:

輸入ctrl+f (windows / linux) 開啟,輸入事件名稱查詢,比如 event

如何使用 滅火器如何使用

滅火器的種類不同使用方法也不相同,下面單獨針對乾粉滅火器 泡沫滅火器和二氧化碳滅火器使用方法說明。一 乾粉滅火器的使用方法 適用範圍 適用於撲救各種易燃 可燃液體和易燃 可燃氣體火災,以及電器裝置火災。1 右手拖著壓把,左手拖著滅火器底部,輕輕取下滅火器。2 右手提著滅火器到現場。3 除掉鉛封。4 ...

如何使用 如何正確使用定速巡航

現在隨著造車技術的不斷創新和改進,越來越多的高科技功能都應用到了汽車上,不僅提供了實用性,也讓我們享受到了科技的快感。今天我們就聊一聊一項可以實現車輛自動駕駛的功能 定速巡航。定速巡航 cruise control system 簡稱ccs,簡單的理解就是給車子設定乙個速度值,駕駛員只需要掌握方向,...

如何使用CFileDialog

cfiledialog的語法 cfiledialog bool bopenfiledialog,lpctstr lpszdefext null,lpctstr lpszfilename null,dword dwflags ofn hidereadonly ofn overwriteprompt,l...