为什么创建一个窗口比重新加载它慢？

Question

背景：我将解释这个问题的背景，但我认为回答这个问题并不需要非常具体的背景。

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

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

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

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

背景要点: 这里的重要事情是，该页面完全是本地加载的。在用户进行输入之前没有任何调用互联网的操作，如果我离线时，它可以很好地加载。

问题:

• 当我通过上述方式触发事件打开窗口时，需要一些时间来加载，假设大约1.5秒。如果我刷新新窗口（page.html），它会在不到0.5秒的时间内加载。是什么导致了这种时间差异？
• 我如何利用更快的刷新速度使我的初始页面加载更快？我能否以某种方式加载隐藏版本？还是以某种方式预渲染它？任何建议都将不胜感激。

- COMisHARD

---

当您刷新页面时，无需再次获取所有内容。很多占用了大量加载时间的图片可以保留。您可以在任何网站上尝试这样做。刷新页面总是比打开新网页更快。 - Mitch

我假设本地文件夹在被调用之前并不在RAM中。因此，将图像从硬盘加载到RAM比已经在RAM中的图像需要更多的时间，即使没有涉及网络。我假设Chrome也会使用一些缓存技巧和其他技巧来加快页面加载速度。 - Mitch

一部分开销将用于在内存中创建窗口对象（包括窗口边框、大小调整器等Chrome元素、渲染引擎等）。重新加载时这些不必要的操作是可以避免的。 - Heretic Monkey

在Windows系统中，评估加载或重新加载速度是一种幻想，因为船长是其他所有东西（Windows 8、81、10），而不是您感兴趣的应用程序。因此，即使您禁用了Fine或某些内容，也会出现随机延迟：Windows防火墙、Defender等都会成为延迟的原因。我认为其他操作系统也会发生类似的情况。在我的系统上，强制启用了几个Microsoft的东西，我可以复制您的情况（无法解释的延迟），计算PHP脚本解析微秒执行时间时也有类似的结果。 - user5781320

你用什么来测量这些时间？你是自己数半秒钟吗？... 你什么时候开始计数？在加载过程中是否有明显的“里程碑”？（例如，窗口打开需要0.5秒钟吗？屏幕上的东西开始显示需要另外0.5秒钟吗？页面完成渲染需要0.5秒钟吗？）... 页面正在加载和执行什么操作？... 我们能看到它吗？... 另外，你测试的是什么样的硬件？有多少CPU？有多少RAM？其中有多少RAM是空闲的？... - svidgen

Answer 1

关于第一个问题：

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

关于第二个问题：

@elfin forest 的回答可能会给您一些启示。

- Waleed Iqbal

---

当你说“缓存”时，你具体指的是什么？我的理解是缓存只是为了节省网络时间。如果所有文件都已经在本地，为什么这会更快呢？ - COMisHARD

我指的是浏览器的存储。是的，它确实节省了网络时间，但它不仅如此。当页面第一次加载时，无论页面是本地存储还是在某个服务器上，浏览器都会缓存（或存储）页面的某些部分（取决于其实现方式），这就是存储。因此，当页面下一次加载时（在您的情况下是刷新），它会从内存中获取页面，而不是从本地获取。从缓存中获取数据比从本地获取数据更快。您可以查看（并清除）已经积累的缓存大小。（https://www.technipages.com/google-chrome-clear-cache） - Waleed Iqbal

@WaleedIqbal 你说的“@elfin forest的答案可能会给你一些启示”是什么意思？我看不到答案或任何告诉我如何加速窗口创建的东西。非常感谢您提供解决方案！ - EssenceBlue

似乎他的回答现在已被删除。 - Waleed Iqbal

Answer 2

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

普通刷新

这是默认选项(按F5键)。这将使用缓存，但在页面加载期间重新验证所有内容，寻找“304未修改”的响应。如果浏览器可以避免重新下载缓存的JavaScript文件、图像、文本文件等，则会这样做。这可能就是您感受到速度差异的原因。

硬刷新

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

清空缓存并强制刷新

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

尝试剩下的两种刷新形式，然后请报告是否仍然能够注意到速度差异。

- Harsha

Answer 3

当您刷新页面时，Google已经拥有运行脚本所需的所有数据。这意味着当您刷新脚本时，它只需要运行，从而消除了收集数据所需的1秒钟。

- Luke Shea