如何提升JavaScript的执行效率
2020-05-24 本文已影响0人
meow_possion
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
