如何通过Chrome控制台或Selenium ChromeDriver获取页面加载性能数据

我来帮你搞定这个问题——不管是直接在浏览器控制台手动抓取，还是用Selenium的ChromeDriver自动化采集，都有靠谱的方法能拿到Chrome性能工具里的页面加载数据，尤其是你关注的最后一批元素加载时间。

方法一：浏览器控制台直接获取 #

Chrome内置了原生的Performance API，能直接读取和性能工具同源的加载数据，完全不需要额外工具。

1. 抓取所有资源的加载时间 #

用performance.getEntriesByType('resource')可以拿到页面所有资源（图片、脚本、样式等）的加载详情，包括你要的startTime（开始加载时间）和duration（加载耗时）。直接在控制台运行这段代码：

// 获取所有资源加载条目
const resources = performance.getEntriesByType('resource');
// 筛选出最后完成加载的资源
const lastLoadedResource = resources.reduce((prev, curr) => {
  const prevEnd = prev.startTime + prev.duration;
  const currEnd = curr.startTime + curr.duration;
  return prevEnd > currEnd ? prev : curr;
});

console.log(`最后一个资源开始加载时间: ${lastLoadedResource.startTime.toFixed(1)}ms`);
console.log(`最后一个资源加载完成时间: ${(lastLoadedResource.startTime + lastLoadedResource.duration).toFixed(1)}ms`);

这段代码会直接输出和你在性能工具里看到的1720.1ms类似的结果。

2. 实时监控DOM元素加载 #

如果要精确追踪每个元素插入DOM的时间（和性能工具底部事件日志对应），可以用MutationObserver监听DOM变化：

// 创建观察者实例
const domObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // 只关注HTML元素节点，排除文本、注释等
      if (node.nodeType === Node.ELEMENT_NODE) {
        console.log(`元素 <${node.tagName.toLowerCase()}> 插入时间: ${performance.now().toFixed(1)}ms`);
      }
    });
  });
});

// 监听body下所有子元素的变化（包括子树）
domObserver.observe(document.body, { childList: true, subtree: true });

刷新页面后，控制台会实时打印每个新插入元素的时间，和性能工具的事件日志完全同步。

3. 获取页面整体加载指标 #

如果需要页面级的加载数据（比如DOMContentLoaded、Load事件时间），可以用新的PerformanceNavigationTiming接口：

const navTiming = performance.getEntriesByType('navigation')[0];
console.log(`DOMContentLoaded完成时间: ${navTiming.domContentLoadedEventEnd - navTiming.fetchStart}ms`);
console.log(`页面完全加载时间: ${navTiming.loadEventEnd - navTiming.fetchStart}ms`);

方法二：Selenium ChromeDriver自动化采集 #

如果需要批量测试或者自动化获取数据，ChromeDriver可以通过Chrome DevTools Protocol（CDP）直接读取性能数据。

1. 配置性能日志采集 #

首先要开启Chrome的性能日志功能，然后解析日志获取资源加载数据：

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import json

# 配置Chrome选项，开启性能日志
chrome_options = Options()
chrome_options.set_capability('goog:loggingPrefs', {'performance': 'ALL'})

# 初始化驱动
driver = webdriver.Chrome(options=chrome_options)
driver.get("你的目标页面URL")

# 获取并解析性能日志
performance_logs = driver.get_log('performance')
resource_load_times = []

for log_entry in performance_logs:
    message = json.loads(log_entry['message'])['message']
    # 筛选资源加载完成的事件
    if message['method'] == 'Network.loadingFinished':
        # 时间戳转成毫秒（CDP返回的是秒级时间戳）
        finish_time = message['params']['timestamp'] * 1000
        resource_load_times.append(finish_time)

# 找到最后一个资源的加载完成时间
if resource_load_times:
    last_finish_time = max(resource_load_times)
    print(f"最后一个资源加载完成时间: {last_finish_time:.1f}ms")

driver.quit()

2. 用CDP直接获取性能指标 #

通过CDP的Performance域可以直接获取标准化的性能指标，和性能工具顶部图表的数据对应：

from selenium import webdriver

driver = webdriver.Chrome()
# 启用性能监控
driver.execute_cdp_cmd('Performance.enable', {})
# 获取性能指标
performance_metrics = driver.execute_cdp_cmd('Performance.getMetrics', {})

# 筛选你需要的指标
for metric in performance_metrics['metrics']:
    if metric['name'] in ['FirstContentfulPaint', 'Load', 'DomContentLoaded']:
        print(f"{metric['name']}: {metric['value']}ms")

driver.quit()

3. 监听动态元素加载 #

如果页面有异步加载的元素，可以结合WebDriverWait等待页面稳定，再用CDP监听DOM变化，和控制台的MutationObserver效果一致。

注意事项 #

• 性能工具里的时间是页面导航开始后的相对时间，performance.now()和CDP的timestamp转换时要注意基准（CDP的timestamp是绝对时间，需要减去页面导航的起始时间）。
• 对于动态加载的页面，要确保等待所有元素加载完成后再采集数据，比如在Selenium里用WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.TAG_NAME, 'your-element')))。

内容的提问来源于stack exchange，提问作者Max Mikhaylov