提高网站访问速度的34条军规（26-30）

最新推荐文章于 2018-07-31 10:46:36 发布

席飞剑

最新推荐文章于 2018-07-31 10:46:36 发布

阅读量2.4k

点赞数

分类专栏：性能测试前端性能优化文章标签： CSS filter image link 34军规

性能测试同时被 2 个专栏收录

86 篇文章 2 订阅

订阅专栏

前端性能优化

11 篇文章 1 订阅

订阅专栏

原文：Best Practices for Speeding Up Your Web Site

26 开发灵巧的事件处理程序 Develop Smart Event Handlers

tag：javascript

如果有太多的事件处理逻辑部署在DOM树的不同元素上，它们的频繁执行会拖慢页面的响应速度。而使用事件委托是一个好的解决方法。如果在一个Div中有10个按钮，与其在每个按钮上都放一个事件处理程序，步入只在Div上放一个事件处理程序。事件会冒泡上溯，这样你就会捕获这一事件，并找出是哪个按钮发起的它。

同样，你并不需要等待onload事件来启动一些操作DOM树的程序。你只需要保证你需要操作的元素可用就可以了。你不需要等待所有的图片下载完毕，你应当使用DOMContentLoaded事件来替代onload事件，当然，目前并不是所有浏览器都支持这一事件，你可以使用YUI Event组件，其中包含了一个onAvailable函数。

查看Julien Lecomte的"High Performance Ajax Applications"获取更多信息。

27 选择<link>而不是@import Choose <link> over @import

tag：css

前面提到把CSS应当放在最顶端来提供预显。在IE中，放在页面底部的@import和<link>效果是一样的，所以最好不要用它。

28 不使用过滤器 Avoid Filters

tag：css

IE专有的AlphaImageLoader过滤器是为了解决半透明真色PNG图片在IE7之前的版本中显示的问题。这个过滤器会在图片下载时堵塞住展示。而且它会消耗内存并影响每个元素而不仅仅是每张图片，所以这个过滤器的问题很多。

所以最好在IE中完全不使用AlphaImageLoader过滤器，而使用渐淡的PNG8图片。如果你明确需要AlphaImageLoader，请使用hack _filter，从而不影响到你的IE7+的用户。

29 优化图片 Optimize Images

tag：images

当设计师制作好网站的图片后，还有些事情应该是你在把这些图片上传到服务器之前做的。

你可以检查GIF图片中的调色板是否和图片中的色彩数一致。使用imagemagick来帮助你方便的检查：
identify -verbose image.gif如果你看到一个4色的图片却有一个256色的调色板，那么还有很大的空间来做性能优化。
试试把GIF转换成PNG是否会节省空间，这是常有的事情。由于浏览器支持的限制，开发者往往怀疑是否该使用PNG，但这是过去的事情了。唯一的问题是真色的PNG图片的半透明问题，但同样，GIF不是真色的而且也不支持丰富的透明效果。所以GIF可以做的，PNG或者PNG8同样可以做到（除了动画）。一条简单的imagemagick语句就可以提供可用的PNG：
convert image.gif image.png “我们强调的是，给PNG一个机会！”
使用pngcrush或者任何的PNG优化工具，例如：
pngcrush image.png -rem alla -reduce -brute result.png
使用jpegtran处理JPEG图片。这个工具会无损操作JPEG图片，比如旋转，而且可以用来优化图片，比如去除图片中的注释和其他无用的信息（比如EXIF信息）。
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30 优化CSS精灵 Optimize CSS Sprites

tag：css

横向布局Sprite中的图片往往比纵向布局会减少文件大小。
在一个Sprite中组合相近的颜色会降低颜色的数量，从而达到适合PNG8的低于256色的标准。
“对移动设备友好”，不在Sprite里留下大的空隙。这并不十分影响文件的大小，但会减少客户端代理将图片解压为像素映射的内存消耗，100*100的图片是一万像素，而1000*1000则是一百万像素。

CSS Sprites

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点，如下：

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！

CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。