js优化的总体原则
- 当需要时才优化
- 考虑可维护性
提升JS文件的加载性能
- 加载元素的顺序
css文件放在<head>里,js文件放在<body>结尾文件
反过来会阻塞整个页面的渲染
JS变量和函数优化
- 尽量使用id选择器,查询很快
- 尽量避免使用eval,这个方法非常耗费性能
- js函数尽可能保持简洁
合理分成多个按功能划分的函数 - 使用事件节流函数
debounce。比如监听窗口变化的回调函数,是一直在执行的。可以使用节流函数,每隔一段时间才执行一次。 - 使用事件委托
提升响应速度
JS动画优化
- 避免添加大量JS动画
- 尽量使用CSS3动画
- 尽量使用Canvas动画
- 合理使用requestAnimationFrame动画代替setTimeout、setInterval
requestAnimationFrame可以在正确的时间进行渲染,setTimeout、setInterval无法保证回调函数执行的时机。比如多个setTimeout,是无法保证哪个先调用的。 - 动画和事件进行分离。动画的执行和绑定的事件单独处理而不要耦合在一起,否则动画执行的时机和回调的时机是很难保证的
合理使用缓存
- 合理缓存DOM对象
- 缓存列表长度
- 使用可缓存的Ajax,打开ajax的cache