前端的性能优化无非是让浏览器渲染不卡顿,让浏览器像服务器一样实现负载均衡。
基本的性能优化:
- 代码的数量:css尽量不要使用css表达式(可以通过less、sass、stylus等css的预编译语法来实现),避免使用高级选择器。
- 请求的数量:请求越多,就越占用浏览器的进程,结果是页面加载等待时间过长,解决办法有:抽取公共样式,合并样式脚本文件,使用精灵图等,静态资源按需加载,分页加载等。
- 缓存利用:针对占用内存比较大且不需要总是变更的数据,可以采用cookie、sessionStorage、localStorage缓存在浏览器的内存中或者系统内存当中。
- 请求带宽:可以要发布的代码,压缩混淆之后再上线。
移动端的优化
- 使用css3动画、过渡、渐变等,让渲染引擎(硬件)加速
- 适当使用touch替代click,click比touch延迟300ms