zoukankan      html  css  js  c++  java
  • 提高网站访问速度的34条军规(26-30)

    原文: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:images

    • 横向布局Sprite中的图片往往比纵向布局会减少文件大小。
    • 在一个Sprite中组合相近的颜色会降低颜色的数量,从而达到适合PNG8的低于256色的标准。
    • “对移动设备友好”,不在Sprite里留下大的空隙。这并不十分影响文件的大小,但会减少客户端代理将图片解压为像素映射的内存消耗,100*100的图片是一万像素,而1000*1000则是一百万像素。
  • 相关阅读:
    Asp.net的HTTP请求处理过程
    通过16道练习学习Linq和Lambda
    学习资料
    .NET处理HTTP请求
    new override virtual 区别与用法
    13个优秀的UML建模工具软件
    做iOS开发程序员10个必需的iOS开发工具和资源[转]
    jQuery的deferred对象详解
    MySQL 5.0存储过程编程入门(转)
    简单谈谈事件与委托(转)
  • 原文地址:https://www.cnblogs.com/suncoolcat/p/3315482.html
Copyright © 2011-2022 走看看