转梳理：提高前端性能方面的处理以及不足

原文来自：张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

二、最最基本的

• CSS顶部, JS底部
• YUI compressor/Gzip
• CDN 有
• 必要的CSS Sprite
• Ajax可缓存

以上没什么好说的。

三、CSS渲染、页面重绘以及回流

• 尽量避免类似.a.b{}.list a{}以及其他一些复杂选择器，以提高整站整体CSS渲染。
• 避免某些expression表达式，避免IE6的AlphaImageLoader png透明滤镜，可以试试使用fireworks生成png8 alpha透明（目前photoshop只有png8 索引透明）。
• 适当定高，例如如果div内容可能有高度差异的动态内容载入。什么意思？例如右上角的个人用户信息是页面渲染完毕之后动态载入的。但是，有可能会出现高度20像素的小图标，，而文字所占据高度为12px * 1.4 = 16.8px, IE6又存在行高被拒的悲剧。因此，如果这部分div不定高，就会出现个人信息载入后，整个页面下沉几像素(3.2像素？)页面重绘的问题。

  记住这么个原则， 页面刷新载入的时候，应避免页面元素的晃动、位移等，这些都是额外的重绘，会让你的CPU和风扇兴奋的。

• 图片设定不响应重绘的尺寸，如果你的<img>不设定尺寸、同时外部容器没有定死高宽，则图片在首次载入时候，占据空间会从0到完全出现，左右上下都可能位移，发生大规模的重绘。可以参见新浪微博载入时候页面高度随着图片显示不断变高的问题，这些都让浏览器重绘了，一是体验可能不好，二是烧CPU的。

  你可以使用width/height控制，或者在CSS中设置。

• <textarea>或者使用<script type="text/html">存储动态载入HTML或模板HTML，降低首屏加载的渲染时间。
• 具有复杂动画的元素绝对定位-脱离文档流，避免强烈的回流。现代浏览器可以渐进使用CSS3 transition实现动画效果，比改变像素值来的高性能。
• 不使用iframe，据说开销最大的DOM元素。

四、降低静态资源请求数

• 开始提到的CSS sprite，目前因降低后期维护成本，sprite的规模有所降低
• 字符与图形生成，如： 该图效果之前有介绍。
• CSS图形生成，如三角：
• CSS模拟，如几像素的投影效果
• CSS3技术，例如渐变效果CSS3 gradient+filter。投影效果CSS3 box-shadow+filter blur。二是代替cookie实现某些功能，带过期时间管理，降低页面cookie大小（IE6-7依然使用Cookie）。
  

   

  海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

  

  原标题：转梳理：提高前端性能方面的处理以及不足

  关键词：前端