深入解析sitespeed.io浏览器缓存预热问题及解决方案

2025-06-10 09:15:58作者：霍妲思

Sitespeed.io is an open source tool that helps you monitor, analyze and optimize your website speed and performance, based on performance best practices advices from the coach and collecting browser metrics using the Navigation Timing API, User Timings and Visual Metrics (FirstVisualChange, SpeedIndex & LastVisualChange).

项目地址：https://gitcode.com/gh_mirrors/si/sitespeed.io

问题背景

sitespeed.io是一款强大的网站性能测试工具，其中--browsertime.preURL参数设计用于在正式测试前预热浏览器缓存，从而模拟真实用户访问场景。然而在实际使用37.1.1版本测试某些网站时，发现该功能未能有效预热Chromium浏览器的缓存，导致测试结果与预期不符。

问题现象分析

当使用--browsertime.preURL参数预热访问目标网站后，正式测试中仍然观察到大量静态资源请求被重新加载，而非从缓存读取。通过分析Chromium日志发现，在preURL访问和正式测试之间存在executionContextsCleared事件，这可能导致浏览器上下文被重置，缓存失效。

技术验证过程

通过多种配置组合进行验证：

基础配置测试：
- 仅使用--browsertime.preURL参数
- 结果：缓存预热效果不理想
参数组合测试：
- 添加--chrome.cleanUserDataDir false保留用户数据
- 使用--multi参数保持同一会话
- 结果：仍未能完全解决问题
替代方案测试：
- 使用预先生成的浏览器配置文件
- 结果：在29.6.0版本工作良好，但37.1.1版本仍有问题

根本原因

深入分析表明，问题可能源于：

浏览器上下文在preURL和正式测试间被重置
资源加载完成检测机制(preURL等待时间不足)
Chromium版本与sitespeed.io的兼容性问题

有效解决方案

经过多次验证，找到以下可靠解决方案：

使用preScript替代方案：

export default async function (context, commands) {
    await commands.navigate(context.options.pre.url);
    await commands.wait.byPageToComplete();
    const emptyPage = "<html><body/></html>";
    const emptyScript = `
    document.open();
    document.write("${emptyPage}");
    document.close();
    `;
    await commands.js.run(emptyScript);
    return commands.wait.byPageToComplete();
};