如果您想要有关页面的更好的性能报告,可以查看这些工具
YSlow:http://developer.yahoo.com/yslow/
PageSpeed:http://code.google.com/intl/es-ES/speed/page-speed/docs/overview.html
两者都可以添加到FireBug插件(Mozilla Firefox)中。
来自YSlow文档:
缩小JavaScript和CSS
标签:javascript,css
缩小是从代码中删除不必要的字符以减小其大小从而缩短加载时间的做法。缩小代码时,将删除所有注释,以及>以及不需要的空格字符(空格,换行符和制表符)。在> JavaScript的情况下,这可以提高响应时间性能,因为下载的>文件的大小减少了。用于缩小JavaScript代码的两个流行工具是JSMin和YUI> Compressor。 YUI压缩器也可以缩小CSS。
混淆是可以应用于源代码的替代优化。它比复杂化更复杂,因此更有可能因“混淆”步骤本身而产生错误。在对美国十大顶级网站的调查中,缩小规模缩小了21%,而混淆则缩小了25%。虽然混淆具有更高的大小>减少,但缩小JavaScript风险较小。
除了缩小外部脚本和样式之外,内联和块>还可以并且也应该缩小。即使你gzip你的脚本和样式,缩小它们>仍然会减小5%或更多的大小。随着JavaScript和CSS的使用和大小的增加,通过缩小代码所节省的成本也会增加。
预加载组件
标签:内容
预加载可能看起来与后加载相反,但它实际上有不同的目标。通过>预加载组件,您可以利用浏览器空闲的时间并请求将来需要的>组件(如图像,样式和脚本)。这样,当>用户访问下一页时,您可以将大部分组件放在缓存中,并且>您的页面将为用户加载更快。
实际上有几种类型的预加载:
•无条件预加载 - 只要onload触发,你就可以继续获取一些额外的>组件。请访问google.com,了解如何请求加载精灵图像。 > google.com主页上不需要此精灵图片,但在>连续搜索结果页面上需要此精灵图片。
•条件预加载 - 基于用户操作,您可以进行有根据的猜测,其中用户>将接下来并相应地预加载。在search.yahoo.com上,您可以看到在开始在输入框中输入后如何请求一些额外的>组件。
•预期预加载 - 在启动重新设计之前提前预加载。经常会在重新设计之后听到:“新网站很酷,但比以前慢”。部分问题可能是用户使用完整缓存访问您的旧网站,但是>新网站始终是空缓存体验。您可以通过>在启动重新设计之前预加载某些组件来缓解此副作用。您的旧站点可以使用>浏览器空闲时间并请求新>站点将使用的图像和脚本
如果您正在使用JQuery,那么您可以看一下:使用jQuery预加载图像