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

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

sitespeed.io is an open-source tool for comprehensive web performance analysis, enabling you to test, monitor, and optimize your website’s speed using real browsers in various environments.

项目地址：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();
};