前端性能优化

1. 最最基本的

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

2. css渲染,重绘及回流

• 尽量避免.a.b {} .list a等一些复杂选择器,提高整站整体css渲染
• 避免某些expression表达式,避免ie6的alphaimageloader的png透明滤镜
• 适当定高,避免动态刷新时页面的移位,晃动等,这些页面重绘很耗cpu

比如右上角个人信息动态载入,IE6存在行高被拒的问题,图标和文字高度不同,会造成下沉

• 图片设定不响应重绘的尺寸,图片载入时会设定从0到完全展示的尺寸,这样需要完全重绘,所以图片一定订尺寸
• <textarea>或者<script type="text/html">存储动态载入html,降低首屏加载的渲染时间
• 复杂动画元素使用绝对定位,脱离文档流,避免强烈回流,css transition比改变像素值来的高性能.
• 不使用iframe,据说开销最大的dom元素

3. 降低静态资源请求

• css sprite
• css生成箭头,三角等
• css模拟投影,渐变
• base64 url技术,比如小点

4. 资源复用

• 团队css样式库,类似bootstrap的span1,span2等
• 宽高自适应,不限制宽高就会根据内容来变化
• font字体库,颜色大小可控,增加自适应'

5. js/html交互

• localstorage, 应用于不长变化的内容,如果区域的配置文件; 二是代替缓存
• 图片广告位的显屏加载,滚动加载
• 下拉弹窗等用textarea加载,需要时再展示(display也是需要渲染的)
• 特殊交互js资源使用的时候再异步记载,比如上传图片,显示地图等
• 无关紧要的避免高峰加载,如果iframe加载新浪微博
• 复杂事件的监听与初始化,比如鼠标移到某区域时再初始化复杂事件.
• 键盘事件延迟,如果autocomplete和hover展示浮层
• MVC
• 面向数据编程
• 避免dom操作,遍历数据而非dom
• 事件委托,避免过多的dom绑定

6. 浏览器自身潜力

• ol列表的数字,table的自适应性
• strong, h1-6的粗体效果
• form的相关特性,submit和reset
• h5的placeholder

八、问题所在

• 没有模块加载机制，20个模块脚本参杂在一起，一个页面可能只使用了4个。
• 图片的拉伸很常见
• 各种广告跟踪代码，把网站前端性能拉低了一个等级。
• HTML没有顶边显示，去除冗余空白字符以及注释，因此HTML页面大小未优化。不难，程序那边一直没做相关处理。