一、渲染优化
1、动画优化
①使用css3动画
② 使用requestAnimation +Frame动画 代替seTimeout
2、高频事件优化
①touch事件
②scroll事件
3、图片优化
①图片压缩
② webp 优于 jpg
③ png优于gif
④ 对图片使用懒加载
⑤ 避免使用DataURL
4、GPU加速
①使用transform触发
② transform触发
③ opacity
5、DOM层次不宜躲过
6、js主动的释放内存
二、css优化
1、层次不超过3层
2、合并css规范 合并margin bachground 等特性
3、移除空的css的规则
4、去掉0的单位
5、不要申明过多的fontsize
三、加载优化
1、减少http请求
2、压缩js css html 静态资源并在服务器端设置gzip
3、首屏加载 不要超过120k 大小
4、压缩图片
5、避免重定向
6、异步加载第三方资源
①async 注:只适用于外部脚本 只有适用src属性时(HTML5新特性)
②动态创建script
③defer 注:规定是否对脚本进行延迟执行 直到页面加载为止 只有IE支持
语法 <script defer = "value" >
7、oneRequest 首次内敛css javascript 存 localstorge 第二次读取直接localstorge
8、按需加载
①滚动加载
②点击加载
四、脚本执行优化
1、避免iframe img 等src 为空
2、图片尽量避免使用DataUrl
3、避免重设图片的大小
4、点击事件优化
5、注意scrloll resize绑定时机