为其他页面预加载外部文件（CSS，JavaScript）

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

我希望网站的首页尽可能快（精益和平均）。用户很可能不会立即点击链接。由于可能会有一些空闲时间，这似乎是预先加载部分外部资产的适当时机。预加载应该会导致它们被缓存。当用户点击另一个页面时，唯一需要的将是内容和可能的一些图像等。

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

2009-06-29 Jason Young

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

您可能将与要加载其他资源页面上的IFRAME，但把一些CSS它来隐藏它...

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

如果你把这个页面的结束那么我会认为它会加载后页面的其余部分。如果没有，那么你可以使用一些Javascript和setTimeout来实际创建页面加载后的IFRAME。

来源

2009-06-29 18:43:09 Hugoware

我也尝试在jQuery的使用$（窗口）.load（XXX）。它效果很好。感谢iFrame的想法！预加载一些巨大的图像，并立即加载下一页。我可以看到这个用途！ – 2009-06-29 21:11:46

这取决于你做出带宽决定。

如果您预先加载所有内容，您将获得更好的用户体验，但会带来非常高的带宽消耗，因为用户可能永远不会使用已加载的内容，因此效率非常低。

如果您没有预先加载任何内容，则会使用最小带宽，并且用户只需加载即可，它只需要即可。

来源

2009-06-29 18:43:28

如果你只是想将它们加载到浏览器的缓存中，我想你可以通过隐藏的iframe中的文档来做到这一点。

来源

2009-06-29 18:43:36

人们正在倡导的隐藏iFrame理念将会工作得很好。

如果登陆页面的页面加载时间也是优先级，那么要做的事情就是在页面加载完成后动态地在JavaScript中创建iFrame。

来源

2009-06-29 18:46:15

您可以像这样预取任意文件（CSS，图像等），问题是小的回报和增加的带宽成本是否使它成为现在追求的正确优化。 The Yahoo performance rules是一个很好的起点。如果这是您的第一次性能优化，那么您可能会从错误的地方开始。这绝对是一种主要权衡（增加的带宽）的优化，而其他优化（如“最小化HTTP请求”）的成本更低，可能会带来更大的回报。

要以跨浏览器兼容的方式执行此操作，您将基本向您的页面的onload事件添加代码，以创建DOM对象（如an），并将其src设置为您要预取的URL。请注意，因为大部分访问者可能只访问您的首页，他们永远不会请求您预先加载的文件。我已经看到，这样做的预加载会导致预取文件的请求和带宽增加数倍。

来源

2009-06-29 18:55:16 aem

我认为你应该分析用户在主页面登陆后到达另一个页面的时间。

然后检查主页上的哪些链接最常出现，并在主页面/ OnLoad事件中触发定时器函数setTimeOut，该函数将执行辅助函数，并为最可能的下一个链接预加载代码。

来源

2009-06-29 18:55:42 AlexA

我同意Gareth，我会动态地创建iframe。您需要将此代码作为着陆页上最后一件事。

E.g：

.... 
    <script type="text/javascript"> 
    preloadContent(); 
    </script> 
</body> 
</html>

至于高速缓存，这实际上取决于你的设置。但是在Yahoo!上的参考网站应该是一个好开始：http://developer.yahoo.com/performance/rules.html#expires 简而言之，一个好方法是让你的静态文件（CSS，图像，甚至可能是脚本）具有1年的到期日期。这样，您的客户端所提取的任何内容都将保存在浏览器缓存中，而无需检查新版本。

如果做已修改文件：年底