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则是一百万像素。
  • 相关阅读:
    leetcode Super Ugly Number
    leetcode Find Median from Data Stream
    leetcode Remove Invalid Parentheses
    leetcode Range Sum Query
    leetcode Range Sum Query
    leetcode Minimum Height Trees
    hdu 3836 Equivalent Sets
    hdu 1269 迷宫城堡
    hud 2586 How far away ?
    poj 1330 Nearest Common Ancestors
  • 原文地址:https://www.cnblogs.com/suncoolcat/p/3315482.html
Copyright © 2011-2022 走看看