网络请求
1.CSS、JS文件的合并或者压缩
多个CSS、JS文件合成一个,再利用工具(webpack)压缩,或者是less转css,es6转es5等语法整合
能够减少HTTP请求次数
2.精灵图技术
把一些小图合并到一张大图上面,使用的时候通过背景加定位
能够减少HTTP请求次数
3.图片懒加载和数据懒加载
在加载页面时只加载前几屏,随着页面的滑动继续加载下面的内容
减少单次内容的大小
4.利用字体图标代替图片
字体图标更加轻量化
减少HTTP请求次数,减少请求内容的大小
5.浏览器的缓存处理
对于某些不经常更新的数据,将其保存在浏览器本地缓存中,在此打开页面时优先从本地缓存中获取
减少HTTP请求次数
6.Audio和Video标签设置preload:none
页面加载时不加载音频、视频资源,只有在播放时才加载
减少请求内容的大小
7.客户端和服务端利用JSON数据格式传输
JSON数据格式直观、数据更加轻量化
减少请求内容的大小,减化数据处理过程
8.采用CDN加速
在最近的服务器查找数据
缩短数据传输时间
代码优化
1.提高代码重复使用率
在CSS中抽离出公共类
2.CSS放在head中,JS放在body尾部
3.尽量少使用标签选择器、ID选择器,选择器前的前缀也尽量缩减
4.CSS3动画代替JS动画
5.尽量减少对DOM的操作
操作DOM会产生回流和重绘
6.多使用异步编程
各部分独立加载互不影响
7.避免一次循环过多数据
循环时同步操作吗,且会产生死循环
8.JS中避免使用eval
性能消耗大、代码压缩时容易出现问题
9.JS中尽量少使用闭包
容易造成内存泄漏
10.多使用事件委托