优化JS执行效率有哪些具体技巧

优化JS执行效率对于提升网站性能至关重要。以下是一些具体技巧：

代码压缩与合并

代码压缩是指去除代码中的多余空格、注释和换行符等，减小代码体积，从而加快加载速度。例如使用UglifyJS工具，它能将代码中的不必要字符去除，使代码更加紧凑。

代码合并则是将多个JS文件合并为一个，减少HTTP请求。浏览器每次请求文件都有一定的开销，合并文件可以降低这种开销。可以使用工具如Grunt或Gulp来自动化完成合并任务。

事件委托

事件委托利用了事件冒泡的原理，将事件监听器绑定到父元素上，而不是每个子元素。当子元素触发事件时，事件会冒泡到父元素上进行处理。

这样可以减少事件监听器的数量，提高性能。比如在一个列表中，每个列表项都有点击事件，将点击事件监听器绑定到列表的父元素上，通过判断事件源来处理不同的列表项。

避免全局变量

全局变量会增加命名冲突的风险，并且会一直存在于内存中，占用资源。尽量使用局部变量，它们在函数执行完毕后会被销毁，释放内存。

可以使用立即执行函数表达式（IIFE）来创建局部作用域，将代码封装在函数内部，避免污染全局命名空间。

使用高效的循环

在循环中，避免在循环条件中使用函数调用，因为每次循环都会执行该函数，增加开销。可以将函数调用的结果提前存储在变量中。

对于数组遍历，使用for循环比for - in循环更快，因为for - in循环会遍历对象的所有可枚举属性，包括原型链上的属性。

节流与防抖

节流是指在一定时间内，只执行一次函数。例如在滚动事件中，用户滚动页面时可能会频繁触发事件，使用节流可以减少事件处理函数的执行次数。

防抖是指在一定时间内，如果再次触发事件，则重新计时，直到一定时间内没有再次触发才执行函数。比如搜索框的输入提示，用户输入时会频繁触发事件，使用防抖可以避免不必要的请求。

使用Web Workers

Web Workers允许在浏览器中创建后台线程，执行耗时的任务，而不会阻塞主线程。主线程负责处理UI渲染等任务，Web Workers可以处理复杂的计算。

例如在处理大量数据的排序或加密等任务时，可以使用Web Workers来提高性能。

缓存DOM查询结果

DOM查询是比较耗时的操作，尽量减少DOM查询次数。可以将查询结果缓存起来，多次使用。

比如在一个函数中多次使用同一个DOM元素，可以将查询结果存储在变量中，避免重复查询。

优化选择器

在使用选择器查询DOM元素时，尽量使用ID选择器，因为它的查询速度最快。其次是类选择器，避免使用复杂的选择器，如属性选择器或伪类选择器。

例如document.getElementById()比document.querySelector()在查询ID元素时更快。

相关问答

1. 什么是事件冒泡？

事件冒泡是指当一个元素上的事件被触发时，该事件会从该元素开始，依次向上传播到其父元素、祖父元素，直到文档根元素。例如在一个按钮上点击，点击事件会先在按钮上触发，然后传播到按钮的父元素，再到更上层的元素。

2. 节流和防抖有什么区别？

节流是在一定时间内只执行一次函数，无论在这段时间内触发多少次事件，都只会执行一次。而防抖是在一定时间内，如果再次触发事件，则重新计时，直到一定时间内没有再次触发才执行函数。简单来说，节流是固定时间执行一次，防抖是等待一段时间不触发才执行。