代码层面:避免使用css表达式,使用避免使用高级选择器和通配选择器
缓存利用:缓存ajax,使用CDN,使用外部js和css文件以便缓存,添加expires头,服务端配置等Etag,减少DNS查找等
请求数量:合并样式和脚本,shi使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载
请求带宽:压缩文件,开启GZIP
资源加载
CSS顶部, JS底部 CSS JS文件压缩 尽量使用图片使用精灵图,字体图标 图片加载可通过懒加载的方式。 总之就是减少资源体积减少资源请求次数。
代码性能
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端的在移动端同样适用