前端性能优化

代码层面：避免使用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端的在移动端同样适用