当前位置：文江博客话题详情

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

发布于 2024-08-13 07:43:37 字数 195 浏览 12 评论 0原文

我有产品网站。在一页上，我显示了所有产品的缩略图和简短描述。当您点击照片时，您将进入详细的产品页面。

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

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

关于如何实施这一点有什么建议吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一枫情书 2024-08-20 07:43:37

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

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

预缓存的网站：
包括谷歌和雅虎这样的大型网站都使用说教来提高绩效。 Google 实例加载 CSS 精灵 http://www.google.com/images/nav_logo7.png 在其主页上，以及其他未完全单独在主页上使用的 CSS 和 JS 文件。大多数人已经通过在生产中将 CSS 和 JS 文件合并到一个文件中来执行类似的操作。 HTTP 请求比下载实际内容花费更多时间。雅虎宣讲的一个例子是这里

雅虎在 YSlow 的帮助上谈论了这个此处。

取自此处指南的一部分：
80% 的最终用户响应时间花费在前端。大部分时间都花在下载页面中的所有组件上：图像、样式表、脚本、Flash 等。减少组件数量进而减少呈现页面所需的 HTTP 请求数量。这是更快页面的关键。

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

缩小/压缩：
请记住 HTTP 请求是邪恶的。压缩的 JavaScript 文件和压缩的 CSS 文件非常小，我几乎 100% 确定您的主页上有一个比它小的图像。因此，担心将它们按页拆分是毫无意义的。实际上，将它们分成多个页面会更加消耗性能。

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

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

If you're using a JavaScript framework (like jQuery, protype, etc) then you can use a simple method to do an AJAX call. If not you'll have to write one which might be a bit confusing for someone that isn't familiar with JavaScript. A basic example is here.

You can use JavaScript to add script tags to your html page and it will include JS. Remember that if the JS is set to auto execute any code it will happen. For CSS, your only option is probably using JavaScript to send a request to grab the file (see above). You could include the CSS but it will override any styles from your original CSS file.

Websites that precache:
Websites including sites as big as Google and Yahoo use preaching to help performance. Google for instances loads a CSS sprite http://www.google.com/images/nav_logo7.png on their main page along with other CSS and JS files that are not completely used on the main page alone. Most people already do something similar to this by just combining their CSS and JS files into one file in production. HTTP requests take more time than downloading the actual content. An example of Yahoo preaching is here

Yahoo talks about this on YSlow's help here.

Taken from one part of the guidelines here:
80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

Organization in development, speed in production:
What I usually try to do is in development I will split up my JS files if needed (hardly ever my CSS though). When its time to push this data to production servers, I run a compiler (simple script that combines all the files, and minifies them) and then put them online.

Minifying/compressing:
Remember HTTP requests are evil. A compressed JavaScript file and a compressed CSS file are so small, that I'm almost 100% sure there is an image on your main page that is smaller than it. Therefor it's pointless to worry about splitting them up per page. It's actually more of a performance hog to split them up across multiple pages.

CSS Sprites
The point in CSS sprites is a website probably has 40+ images on their page using CSS. Well thats 40+ HTTP requests on a users page load, thats A LOT of requests. Not only is that bad for the user, but thats also a lot of requests your web server is having to handle. If you aren't using a static content server and are just using Apache that is on your main host, you're poor Apache server is getting loaded with requests it could be serving for your web application. You can reduce this by combing your images into one file, or at least into fewer files. Using CSS's background-position property, you can do wonders.

I highly recommend reading the YSlow guidelines by Yahoo here: http://developer.yahoo.com/yslow/help/#guidelines

回复收藏 0 原文

千柳 2024-08-20 07:43:37

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

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

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

回复收藏 0 原文

瑶笙 2024-08-20 07:43:37

在页面的加载事件中使用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);

use setTimeout in the load event of the page, and set a timeout of a few seconds, after that, insert a script tag and a css tag into page (those ones from the next page)

something like this: (where url is the url of the thing you want to cache)

    //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);

回复收藏 0 原文

~没有更多了~