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

Question

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

我希望网站的首页尽可能快(精益和平均).用户可能不会立即点击链接.由于可能会有一些空闲时间,这似乎是预加载一些外部资产的合适时机.预加载应该使它们被缓存.当用户点击另一个页面时,所需的唯一请求将是内容和可能的一些图像等.

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

Answer 1

将所有内容加载到隐藏的iframe中并不是唯一的方法.Stoyan Stefanov有两篇关于预加载/预取JS和CSS文件以进行优化的精彩帖子.

以下是链接:

我个人也喜欢AJAX方法.它很好,干净,工作正常,除非你想获取跨域的东西.

他在第二个链接中的最新技术也看起来非常有前景(尽管我还没有尝试过.)

Answer 2

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

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

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

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