深入解析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();
};

配合--browsertime.pre.url参数使用，效果显著。

优化等待参数：
- 适当增加--preUrlDelay
- 调整--pageCompleteCheckInactivity参数
版本回退方案：
- 对于关键测试场景，可暂时使用29.6.0稳定版本

最佳实践建议

对于复杂SPA应用，优先考虑使用preScript方案
正式测试前，通过HAR文件分析验证缓存是否生效
针对不同网站特性，调整页面加载完成检测策略
考虑结合可视化指标验证预热效果

总结

浏览器缓存预热是性能测试中的重要环节，sitespeed.io提供了多种机制实现这一目标。通过本文分析的各种方案，测试工程师可以根据实际场景选择最适合的缓存预热策略，确保获得真实反映用户体验的性能数据。

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

登录后查看全文

热门内容推荐

1 解锁编程技能的实践之旅：从零构建你的技术世界 2 技术实践探索：从零开始构建核心系统的实践指南 3 build-your-own-x：编程探险家的技术发现之旅 4 亲手锻造技术引擎：从0到1构建核心系统的实践指南 5 技术解构与实践指南：从实现原理到创新应用的build-your-own-x探索之旅 6 从零构建技术实践指南：探索build-your-own-x项目的学习价值

最新内容推荐

跨系统应用融合：APK Installer实现Windows环境下安卓应用运行的技术路径探索如何用OpCore Simplify构建稳定黑苹果系统？掌握这3大核心策略 ComfyUI-LTXVideo实战攻略：3大核心场景的视频生成解决方案告别3小时抠像噩梦：AI如何让人人都能制作电影级视频 Anki Connect：知识管理与学习自动化的API集成方案 Laigter法线贴图生成工具零基础实战指南：提升2D游戏视觉效率全攻略如何用智能助手实现高效微信自动回复？全方位指南 3步打造高效游戏自动化工具：从入门到精通的智能辅助方案掌握语音分割：从入门到实战的完整路径开源翻译平台完全指南：从搭建到精通自托管翻译服务

项目优选

收起

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

deepin linux kernel

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

Ascend Extension for PyTorch

🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

flutter_flutter

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用