原文: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。
分享到:
相关推荐
提高网站访问速度的34条军规。本文讲述的是如何让访问速度增加的一些方法。
提高网站访问速度的34条军规。本文讲述的是如何提高网站访问速度
高考作文写作指导写好高考考场作文的100条军规------.pdf
信用风险与策略跟踪:长久期城投债的“二十二条军规”-0301-中信证券-14页.pdf
收集来的技术管理军规,和提高情商的军规,只为给大家提供便利。在文档中,通过作者幽默的语言和技术易懂的语言,告诉每一个做技术管理的人,此功法参透必将能成一番霸业。
MySQL DBA运维开发30条军规
58 到家数据库 30 条军规
58 到家数据库 30 条军规
员工福利系列模板-改家乐福32条军规.doc
SQL优化的30条军规,希望可以帮到大家。军规适用场景:并发量大、数据量大的互联网业务,解读:讲解原因,解读比军规更重要
移动app测试的22条军规
征服英语的33条军规 征服英语的33条军规 征服英语的33条军规 征服英语的33条军规 征服英语的33条军规 征服英语的33条军规 征服英语的33条军规
运维的 85 条军规
04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规.pdf04 Redis 性能优化13条军规....
Symbian内存管理的二十二条军规.txt Symbian内存管理的二十二条军规.txt Symbian内存管理的二十二条军规.txt Symbian内存管理的二十二条军规.txt
移动app测试的22条军规. 学习开发必须读
成为编程高手的二十二条军规 成为编程高手的二十二条军规
MySQL数据库开发的三十六条军规_石展_完整
mySql36条军规 主讲Mysql规范和优化对程序员很有帮助。
介绍移动APP测试22条军规读书分享,初步了解APP测试的基本方法和注意事项,希望对大家有所帮助。