Question

我有产品网站。在一个页面上，我显示缩略图和所有产品的简要说明。当您点击照片时，您会看到详细的产品页面。

有没有办法让浏览器开始加载和缓存“详细产品”页面的javascript和CSS，而用户只是在查看“所有产品”页面并尝试做出选择？

我希望这个预加载和缓存只在页面完全加载后启动，以免降低速度。

有关如何实施此建议的任何建议？

Answer 1

如果您正在使用JavaScript框架（如jQuery，protype等），那么您可以使用一种简单的方法来执行AJAX调用。如果不是，你将不得不写一个对于不熟悉JavaScript的人来说有点混乱。一个基本的例子是here。

您可以使用JavaScript将脚本标记添加到您的html页面，它将包含JS。请记住，如果将JS设置为自动执行任何代码，它将会发生。对于CSS，您唯一的选择可能是使用JavaScript发送获取文件的请求（参见上文）。您可以包含CSS但它将覆盖原始CSS文件中的任何样式。

预先缓解的网站
包括像谷歌和雅虎这样大的网站的网站都使用讲道来帮助提高绩效。 Google for实例在其主页上加载CSS精灵http://www.google.com/images/nav_logo7.png以及仅在主页上未完全使用的其他CSS和JS文件。大多数人已经通过将他们的CSS和JS文件组合到生产中的一个文件中来做类似的事情。 HTTP请求比下载实际内容需要更多时间。雅虎讲道的一个例子是here

雅虎在YSlow的帮助here上谈到了这一点。

取自指南的一部分here：
最终用户响应时间的80％用于前端。大部分时间都在下载页面中的所有组件：图像，样式表，脚本，Flash等。减少组件数量反过来减少了呈现页面所需的HTTP请求数量。这是加快页面的关键。

组织发展，生产速度：
我通常尝试做的是在开发中我会根据需要拆分我的JS文件（尽管我的CSS几乎没有）。当它把这些数据推送到生产服务器的时候，我运行一个编译器（将所有文件组合在一起的简单脚本，并将它们缩小），然后将它们放到网上。

<强> Minifying/compressing
记住HTTP请求是邪恶的。压缩的JavaScript文件和压缩的CSS文件非常小，我几乎100％确定主页上的图像小于它。因此，担心每页拆分它们毫无意义。实际上，将它们分散在多个页面上实际上是一种性能损失。

<强> CSS Sprites
CSS sprites中的一点是网站可能在其页面上使用CSS有40多个图像。那就是用户页面加载了40多个HTTP请求，这就是很多请求。这不仅对用户不利，而且还有很多Web服务器必须处理的请求。如果您没有使用静态内容服务器并且只使用主机上的Apache，那么您的Apache服务器很糟糕，它可能会为您的Web应用程序提供服务。您可以通过将图像合并为一个文件或至少减少文件来减少这种情况。使用CSS的background-position属性，你可以创造奇迹。

我强烈建议您在雅虎阅读YSlow指南：http://developer.yahoo.com/yslow/help/#guidelines

Answer 2

从理论上讲，您可以开始从后续页面访问资源，以便稍后在缓存中使用它们。

但是，这不是一个好习惯 - 特别是如果您要为他们可能选择的所有详细信息页面加载资源。在这样做时，您假设您应该确定如何使用用户的带宽，而不是它们。如果他们同时浏览多个内容，或者在查看您的网站时使用带宽做其他事情，那么您将以他们不想要的方式使用他们的带宽。

如果他们的连接速度足够慢，以至于需要优化详细信息页面的加载时间，那么他们的连接速度可能会很慢，以至于如果他们同时做其他事情，他们会感到茫然。

Answer 3

在页面的load事件中使用setTimeout，并设置几秒的超时，之后，将脚本标记和css标记插入页面（下一页的那些）

类似这样的事情:(其中url是你要缓存的东西的url）

    //cache a script
    var scriptTag = document.createElement("script");
    scriptTag.setAttribute("type", "text/javascript");
    scriptTag.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(scriptTag);

    //cache an image:
    var img = new Image(); img.src = url;

    //cache a css
    var css= document.createElement("style");
    css.setAttribute("type", "text/css");
    css.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(css);

浏览器空闲时开始加载下一页

3 个答案: