javascript - 为其他页面预加载外部文件(CSS、JavaScript)

Question

我很好奇是否有一种有效的方法来等待网站的首页加载，然后预加载我知道网站上其他页面可能需要的 CSS 和脚本文件。

我希望网站的首页尽可能快(精简)。用户很可能不会立即点击链接。由于可能会有一些空闲时间，这似乎是预加载一些外部 Assets 的好时机。预加载应该使它们被缓存。当用户点击另一个页面时，唯一需要的请求将是内容和可能的一些图像等。

有人做过吗？ 这是个坏主意吗？ 有没有优雅的实现方式？

Answer 1

这是一个有趣的想法，我不确定它是否可以通过 Javascript 完成(至少是 CSS 部分)。

您可以在包含您要加载的其他资源的页面上放置一个 IFRAME，但在其上放置一些 CSS 以隐藏它...

.preload {
    position : absolute;
    top      : -9999px;
    height   : 1px;
    width    : 1px;
    overflow : hidden;
}

如果您将它放在页面末尾，那么我认为它会在页面的其余部分之后 加载。如果没有，那么您可以使用一些 Javascript 和 setTimeout 在页面加载后实际创建 IFRAME。