如何提升JavaScript的执行效率

js优化的总体原则

  • 当需要时才优化
  • 考虑可维护性

提升JS文件的加载性能

  • 加载元素的顺序
    css文件放在里,js文件放在结尾文件
    反过来会阻塞整个页面的渲染

JS变量和函数优化

  • 尽量使用id选择器,查询很快
  • 尽量避免使用eval,这个方法非常耗费性能
  • js函数尽可能保持简洁
    合理分成多个按功能划分的函数
  • 使用事件节流函数
    debounce。比如监听窗口变化的回调函数,是一直在执行的。可以使用节流函数,每隔一段时间才执行一次。
  • 使用事件委托
    提升响应速度

JS动画优化

  • 避免添加大量JS动画
  • 尽量使用CSS3动画
  • 尽量使用Canvas动画
  • 合理使用requestAnimationFrame动画代替setTimeout、setInterval
    requestAnimationFrame可以在正确的时间进行渲染,setTimeout、setInterval无法保证回调函数执行的时机。比如多个setTimeout,是无法保证哪个先调用的。
  • 动画和事件进行分离。动画的执行和绑定的事件单独处理而不要耦合在一起,否则动画执行的时机和回调的时机是很难保证的

合理使用缓存

  • 合理缓存DOM对象
  • 缓存列表长度
  • 使用可缓存的Ajax,打开ajax的cache

你可能感兴趣的:(如何提升JavaScript的执行效率)