11

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

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

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

4

7 回答 7

7

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

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

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

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

于 2009-06-29T18:43:09.180 回答
4

人们提倡的隐藏的 iFrame 想法会很好用。

如果登陆页面的页面加载时间也是一个优先事项，那么要做的是在页面完成加载后在 javascript 中动态创建 iFrame。

于 2009-06-29T18:46:15.057 回答
2

带宽决定由您决定。

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

如果您不预加载任何内容，则将使用最低限度的带宽，并且用户仅加载所需的内容。

于 2009-06-29T18:43:28.540 回答
1

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

于 2009-06-29T18:43:36.700 回答
1

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

例如：

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

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

如果您确实必须修改文件：

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

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

干杯!

于 2009-06-29T18:55:56.020 回答
0

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

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

于 2009-06-29T18:55:16.037 回答
0

我认为您应该分析用户在登陆您的主页后需要多长时间才能到达另一个页面。

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

于 2009-06-29T18:55:42.870 回答