方法一：
F12
在該頁面中我們可以看到cpu使用率，js堆使用大小以及dom節點數，我們知道cpu以及記憶體使用率可以從側面反映一個應用的一些問題，比如當頁面渲染過慢，系統卡頓時，使用該功能可以觀察是不是cpu使用過高或者記憶體使用過大導緻頁面重新整理過慢，操作卡頓等。
參考連結：javascript:void(0)
方法二：
「Python代碼實作資料采集」
參考代碼如下：
1 #!/usr/bin/env python
2 # -*- coding: utf-8 -*-
3
4 """
5 使用python監控前端性能，機關毫秒
6 """
7
8 import logging
9 import csv
10 import datetime
11 from selenium import webdriver
12
13 # data = datetime.datetime.now().strftime('%Y%m%d%H%M') # 擷取目前的時間
14 # filename = "timing_{}.csv".format(data) # 建立一個csv檔案
15
16 driver = webdriver.Chrome()
17 driver.get('https://www.baidu.com')
18 driver.maximize_window()
19 driver.find_element_by_id('kw').send_keys('性能測試')
20 driver.find_element_by_id('su').click()
21
22 # 前端性能監控的接口
23 js = 'return window.performance.timing'
24 # 執行JS腳本
25 timing = driver.execute_script(js)
26 print(timing)
27
28 logging.info(timing)
29 # DNS查詢耗時「原因-DNS預加載做了嗎？頁面内是不是使用了太多不同的域名導緻域名查詢的時間太長了？」
30 DNS_time = timing["domainLookupEnd"] - timing["domainLookupStart"]
31
32 # TCP建立連接配接完成握手的時間
33 TCP_time = timing["connectEnd"] - timing["connectStart"]
34
35 # request請求耗時-内容加載完成的時間「原因：頁面内容經過gzip壓縮了嗎？靜态資源css/js等壓縮了嗎？」
36 Request_time = timing["responseEnd"] - timing["responseStart"]
37
38 # 解析dom樹耗時「原因-需要檢討下你的DOM樹嵌套是不是太多了？」
39 dom_time = timing["domComplete"] - timing["domInteractive"]
40
41 # 白屏時間：從打開網站到有内容渲染出來的時間節點。白屏時間節點指的是從使用者進入網站（輸入url、重新整理、跳轉等方式）的時刻開始計算，
42 # 一直到頁面有内容展示出來的時間節點。這個過程包括dns查詢、建立tcp連接配接、發送首個http請求（如果使用https還要介入TLS的驗證時間）、
43 # 傳回html文檔、html文檔head解析完畢「 讀取頁面第一個位元組的時間，原因-可以了解為使用者拿到你的資源占用的時間」
44 white_screen = timing["responseStart"] - timing["navigationStart"]
45
46 # onload時間「頁面加載完成的時間，這幾乎代表了使用者等待頁面可用的時間」
47 onload_time = timing["loadEventEnd"] - timing["navigationStart"]
48
49 # 重定向時間「拒絕重定向」
50 redirect_time = timing["redirectEnd"] - timing["redirectStart"]
51 # DNS 緩存時間
52 appcache_time = timing["domainLookupStart"] - timing["fetchStart"]
53 # 解除安裝頁面的時間
54 unloadEvent_time = timing["unloadEventEnd"] - timing["unloadEventStart"]
55
56 # with open(filename, "a+", newline='') as csvfile:
57 # csv_write = csv.writer(csvfile)
58 #
59 # # writerow 是一行一行寫入 writerows方法是一次寫入多行
60 # csv_write.writerow(["DNS查詢耗時", "TCP連結耗時", "request請求耗時", "解析dom樹耗時", "白屏時間", "DNS查詢耗時", "onload時間"])
61 # csv_write.writerow([DNS_time, TCP_time, Requesr_time, dom_time, white_screen, domready_time, onload_time])
62 print("DNS查詢耗時:%s ms" % str(DNS_time))
63 print("TCP連接配接耗時:%s ms" % str(TCP_time))
64 print("request 請求耗時:%s ms" % str(Request_time))
65 print("解析 dom 樹耗時:%s ms" % str(dom_time))
66 print("白屏時間:%s ms" % str(white_screen))
67 print("onload 時間:%s ms" % str(onload_time))
68 print("重定向時間:%s ms" % str(redirect_time))
69 print("DNS 緩存時間:%s ms" % str(appcache_time))
70 print("解除安裝頁面時間:%s ms" % str(unloadEvent_time))
71
72 
掃盲：
- timing的整體結構如下圖所示：
- 性能名額計算