Question

上下文：我将解释这个问题的背景，但我认为问题的答案并非特定于上下文。

我有一个镀铬扩展程序的背景页面。该页面执行以下操作：

chrome.commands.onCommand.addListener(function(){
    chrome.windows.create({
        url:"page.html",
        type:'popup'
    });
});

正如您所看到的，当用户触发命令时（通过使用热键），这将创建一个从我的扩展中加载page.html文件的新窗口。

页面page.html是一个相当繁重的页面。它运行一堆脚本（全部来自扩展目录）和一堆图像（也都来自扩展目录）。

上下文的冲突：重要的是，页面完全是本地加载的。没有（直到用户输入）呼叫互联网，并且当我离线时它加载得很好。

问题：

当我通过触发事件加载窗口时，如上所述，加载需要一些时间，比方说也许1.5秒。如果我然后刷新新窗口（page.html），它会在不到0.5秒的时间内加载。造成这种时间差异的原因是什么？
我如何利用更快的刷新率来加快初始页面加载速度？我能以某种方式加载隐藏版本吗？或以某种方式预先渲染它？任何建议都将不胜感激。

Answer 1

关于第一个问题：

刷新页面不会导致所有内容（如渲染引擎）再次初始化。根据浏览器的实现，浏览器在缓存中保留了大量资源，并且当再次访问相同的URL时（在这种情况下为页面刷新），资源从缓存加载，这更快。因此导致时间上的差异。

关于第二个问题：

@elfin forest的回答可能会给你一些见解。

Answer 2

如果在打开开发人员工具时右键单击“重新加载”按钮，则会有三个选项。

正常重新加载

这是默认设置（按F5）。这将使用缓存，但在页面加载期间重新验证所有内容，寻找＆＃34; 304 Not Modified＆＃34;响应。 如果浏览器可以避免重新下载缓存的JavaScript文件，图像，文本文件等，那么它就会。这可能就是你获得速度差异的原因。

重新加载

发出请求时，不使用缓存中的任何内容。它强制浏览器重新下载每个JavaScript文件，图像，文本文件等。

清空缓存和硬重新载入

这是第三个选项，它会清除缓存然后重新加载。

尝试剩余的两种重装形式，然后请报告速度差异是否仍然明显。

Answer 3

当您刷新页面时，Google已经拥有运行该脚本所需的所有数据。这意味着当你重新编写脚本时，它所要做的只是运行，从而删除了收集数据所需的1秒。