Question

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

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

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

Answer 1

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

以下是链接：

http://www.phpied.com/the-art-and-craft-of-postload-preloads/

http://www.phpied.com/preload-cssjavascript-without-execution/

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

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

Answer 2

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

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

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

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

Answer 3

人们所倡导的隐藏的iFrame理念会很好用。

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

Answer 4

由您决定做出带宽决定。

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

如果您不预先加载任何内容，则会至少使用带宽，并且用户仅所需的内容。

Answer 5

Filament Group有一个很好的jQuery脚本，可以从CSS文件中预加载图像：

Filament Group article

事实上，如果你谷歌'jquery preload'，还有很多其他基于jQuery的解决方案。

Answer 6

如果您只是想将它们加载到浏览器的缓存中，我想您可以通过隐藏的iframe中的文档来实现。

Answer 7

我同意Gareth，我会动态创建iframe。您希望将此代码作为目标网页上的最后一项内容。

E.g：

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

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

如果你做必须修改文件：

为图像创建不同的文件（即不同的文件名）
CSS和脚本最后可附加版本/日期编号。

这可以确保客户端永远不会使用过时的内容。

干杯！

Answer 8

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

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

Answer 9

我认为您应该分析用户在登陆主页后到达其他页面需要多长时间。

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

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

9 个答案: