前端性能优化

代码层面：避免使用css表达式，使用避免使用高级选择器和通配选择器
缓存利用：缓存ajax，使用CDN，使用外部js和css文件以便缓存，添加expires头，服务端配置等Etag，减少DNS查找等
请求数量：合并样式和脚本，shi使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载
请求带宽：压缩文件，开启GZIP

1. 资源加载

   CSS顶部, JS底部
   CSS JS文件压缩
   尽量使用图片使用精灵图，字体图标
   图片加载可通过懒加载的方式。
   总之就是减少资源体积减少资源请求次数。
   

2. 代码性能
   css:

   使用CSS缩写，减少代码量；
   减少查询层级：如.header .logo要好过.header .top .logo；
   减少查询范围：如.header>li要好过.header li；
   避免TAG标签与CLASS或ID并存：如a.top、button#submit；
   删除重复的CSS；
   

   Html:

   减少DOM节点：加速页面渲染；
   正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；
   减少页面重绘。比如给图片加上正确的宽高值：这可以减少页面重绘
   

   Js：

   尽量少用全局变量；
   使用事件代理绑定事件，如将事件绑定在body上进行代理；
   避免频繁操作DOM节点；
   减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；
   

代码层面的优化

 - 用hash-table来优化查找
 - 少用全局变量
 - 用innerHTML代替DOM操作，减少DOM操作次数，优化js性能
 - 用setTimeout来避免页面失去响应
 - 缓存DOM节点查找的结果
 - 避免使用CSS表达式
 - 避免全局查询
 - 避免使用with(with会创建自己的作用域，会增加作用域链长度)
 - 多个变量声明合并
 - 避免图片和iframe等空的src，空的src会重新加载当前页面，影响速度和效率
 - 尽量避免在HTML中写Style属性

移动端性能优化

 - 尽量使用css3动画，开启硬加速
 - 适当使用touch事件代替click事件
 - 避免使用css3渐变阴影效果
 - 可以transform:translateZ(0)来开启硬件加速。
 - 不滥用Float。Float在渲染时计算量比较大，尽量减少使用
 - 不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
 - 合理使用requestAnimationFrame动画代替setTimeout
 - CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
 - PC端的在移动端同样适用