1

我有产品网站。在一页上，我展示了所有产品的缩略图和简要说明。当您单击照片时，您将进入详细的产品页面。

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

我希望仅在页面完全加载后才开始预加载和缓存，以免减慢速度。

关于如何实现这一点的任何建议？

4

3 回答 3

3

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

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

预先缓存的网站：
包括像 Google 和 Yahoo 这样大的网站在内的网站都使用讲道来提高性能。例如，Google 在其主页上加载 CSS sprite http://www.google.com/images/nav_logo7.png以及其他未完全在主页上使用的 CSS 和 JS 文件。大多数人已经通过在生产中将他们的 CSS 和 JS 文件合并到一个文件中来做类似的事情。HTTP 请求比下载实际内容花费更多时间。雅虎布道的一个例子在这里

雅虎在这里讨论了 YSlow 的帮助。

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

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

缩小/压缩：
记住 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

于 2009-12-07T17:29:09.697 回答
2

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

但是，这不是一个好的做法——尤其是当您为他们可能选择的所有详细信息页面加载资源时。在这样做时，您假设您应该确定如何使用用户的带宽，而不是他们。如果他们同时浏览多个内容，或者除了查看您的网站之外还使用他们的带宽做其他事情，那么您正在以他们不希望的方式使用他们的带宽。

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

于 2009-12-07T17:31:48.957 回答
1

在页面的加载事件中使用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);
于 2009-12-07T17:29:51.570 回答