我有产品网站。在一页上,我显示缩略图和所有产品的简要说明。单击照片后,您会转到详细的产品页面。

当用户仅查看“所有产品”页面并尝试做出选择时,是否有办法让浏览器开始为“详细产品”页面加载和缓存javascript和CSS?

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

关于如何实施此建议?

最佳答案

如果您使用的是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请求比下载实际内容花费更多的时间。雅虎讲道的一个例子是here

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

取自准则here的一部分:
最终用户响应时间的80%用于前端。大多数时间都与下载页面中的所有组件有关:图像,样式表,脚本,Flash等。减少组件的数量又减少了呈现页面所需的HTTP请求的数量。这是加快页面速度的关键。

 组织发展,生产速度:
我通常会尝试在开发中根据需要拆分JS文件(尽管几乎没有CSS)。当需要将这些数据推送到生产服务器时,我运行了一个编译器(将所有文件合并并最小化的简单脚本),然后将其联机。

Minifying/compressing
请记住,HTTP请求是邪恶的。压缩后的JavaScript文件和压缩后的CSS文件是如此之小,以至于我几乎100%确信您的主页上的图像小于它。因此,不必担心每页将它们拆分。实际上,将它们分成多个页面实际上是一种性能消耗。

CSS Sprites
CSS精灵的要点是,使用CSS的网站在其页面上可能有40多个图像。那么多数民众赞成在一个用户页面加载40 + HTTP请求,多数民众赞成在很多请求。这不仅对用户不利,而且还使您的Web服务器不得不处理许多请求。如果您不使用静态内容服务器,而仅使用主主机上的Apache,那么可怜的Apache服务器正在加载可能为您的Web应用程序服务的请求。您可以通过将图像合并为一个文件或至少合并为更少的文件来减少这种情况。使用CSS的background-position属性,您可以创造奇迹。

我强烈建议您在此处阅读Yahoo的YSlow指南:http://developer.yahoo.com/yslow/help/#guidelines

09-30 14:43
查看更多