web性能探究(六)

组合文件

性能探索1中,我们讨论了减少http请求对于响应时间的影响程度,并且减少HTTP请求的次数也是提高性能最容易的方法。一个不用必须简化界面的方法就是将大量的脚本组合成一个脚本文件,同样把大量的样式文件组合成一个样式文件。组合文件将减少额外的HTTP请求,同时也可以减少由TCP等引起的延迟。

图1显示了一个拥有6个单独脚本的页面下载时其时间分配情况,注意,对于每一个文件,浏览器将会单独发送一个HTTP请求去读取,在每个脚本之间的时间空隙表明浏览器需要花时间去解析和加载脚本,图2显示了当将上说的6个脚本文件组合成一个后页面下载时其时间分配情况。

web性能探究(六)

图1 六个单独的脚本文件

web性能探究(六)

图2 组合成一个脚本文件

组合脚本和样式文件在开发过程中是很烦躁的,通常我们是在开发过程中的将代码作为单独的文件放在逻辑模块中,在产品发布前对文件进行组合的,每一个单独文件的改变,都需要将已经组合的大文件重新组合,重新发布,Yahoo!在这个过程中花费的代价也是很大的。

Yahoo!的hotjobs网站因为组合文件将响应时间减少了8%

雅虎性能团队在hotjobs网站做了实验去检测将多个文件压缩为一个文件时响应时间的变化情况,这个实验是有两个组来做的,第一组访问的页面上面有6个没有组合的脚本文件,第二组用户访问的页面将6个脚本文件压缩成了1个。

将六个javascript文件组合成一个,使得平均性能提高了8%,局域网中的用户访问速度提高了5%,而这一切是在没有修改页面设计和页面属性的前提下发生的。

这个实验的前提是所测试的页面已经做过很好的优化了,响应时间的影响因素很多,包括,组合文件的数量,浏览器的缓存等等,这个实验的结论支持以前所说的减少HTTP请求的数量是一个提高用户体验很好的方法。

其他

你也不能将所有的文件组合成一个文件,假设你有一个或多个脚本在多页面中共享,但是其他的文件仅仅用在一个特定的页面,如果你将所有的文件组合成一个文件在整个网站中使用,那么一些页面将会花时间下载他用不到的文件。相反,要注意不同类型的组合文件,你可以将用在每个页面脚本压缩成一个文件,然后为每一个页面或者某一组页面专门单独组合其需要的脚本。

要点

  • 为了减少HTTP请求组合脚本和样式
  • 注意不同类型的组合文件
  • 避免用户下载多于实际需要的文件
  • 要注意文件组合的顺序

原文链接

Performance Research, Part 6: Less is More — Serving Files Faster by Combining Them

相关推荐