您的位置：首页 > 运维架构 > 网站架构

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

2013-09-11 20:21 375 查看
原文：BestPracticesforSpeedingUpYourWebSite

26开发灵巧的事件处理程序DevelopSmartEventHandlers

tag：javascript

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

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

查看JulienLecomte的"HighPerformanceAjaxApplications"获取更多信息。

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

tag：css

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

28不使用过滤器AvoidFilters

tag：css

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

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




29优化图片
OptimizeImages
tag：images

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

你可以检查GIF图片中的调色板是否和图片中的色彩数一致。使用imagemagick来帮助你方便的检查：
identify-verboseimage.gif
如果你看到一个4色的图片却有一个256色的调色板，那么还有很大的空间来做性能优化。

试试把GIF转换成PNG是否会节省空间，这是常有的事情。由于浏览器支持的限制，开发者往往怀疑是否该使用PNG，但这是过去的事情了。唯一的问题是真色的PNG图片的半透明问题，但同样，GIF不是真色的而且也不支持丰富的透明效果。所以GIF可以做的，PNG或者PNG8同样可以做到（除了动画）。一条简单的imagemagick语句就可以提供可用的PNG：
convertimage.gifimage.png
“我们强调的是，给PNG一个机会！”


使用pngcrush或者任何的PNG优化工具，例如：
pngcrushimage.png-remalla-reduce-bruteresult.png


使用jpegtran处理JPEG图片。这个工具会无损操作JPEG图片，比如旋转，而且可以用来优化图片，比如去除图片中的注释和其他无用的信息（比如EXIF信息）。
jpegtran-copynone-optimize-perfectsrc.jpgdest.jpg


30优化CSS精灵OptimizeCSSSprites
tag：images

横向布局Sprite中的图片往往比纵向布局会减少文件大小。

在一个Sprite中组合相近的颜色会降低颜色的数量，从而达到适合PNG8的低于256色的标准。

“对移动设备友好”，不在Sprite里留下大的空隙。这并不十分影响文件的大小，但会减少客户端代理将图片解压为像素映射的内存消耗，100*100的图片是一万像素，而1000*1000则是一百万像素。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航