js高性能开发技巧10则

1、判断是否包含子字符串？

使用 includes() 方法比 test() 方法性能更高，因为 test() 方法需要先将正则表达式编译成 RegExp 对象，再进行匹配，相对较慢。

2、字符串转数字

使用 Number(str) / +str 的性能最高，其次 parseInt(str) / parseFloat(str)。

3、数字转字符串

使用 String(num) / ${num} 性能最高，其次 Number.toString() / num + ''。

4、遍历数组

性能从高到低：

1. for 循环 / for..of - 性能最高
2. forEach() / while 循环 - 性能稍差,但易用
3. for..in - 不推荐用于数组遍历
4. map() - 只在需要新数组结果时使用

5、遍历对象

性能从高到低：

1. for..in / Object.keys(obj) - 性能最高,直接遍历对象
2. Object.keys({ ...obj }).forEach(/* ... */) - 性能稍差，只在需要结果数组时使用
3. Object.entries(obj) - 性能稍差,只在需要结果嵌套数组时使用

6、查询dom节点

性能从高到低：

1. document.getElementById() - 性能最高,所有浏览器支持
2. document.querySelector() / document.querySelectorAll() - 性能高，IE8+ 支持
3. document.getElementsByTagName() / document.getElementsByClassName() / document.getElementsByName() - 性能一般，所有浏览器支持

7、查找数组中元素索引

indexOf 的性能会高于 findIndex，主要原因是：

1. indexOf 只需要简单的遍历和值匹配，逻辑较简单。
2. findIndex 需要执行回调函数中的逻辑，性能开销更大。
3. findIndex 的回调函数中可能会有更复杂的运算逻辑，这也会影响性能。

8、删除字符串中的字符

1. replace 需要进行正则匹配和字符串替换，逻辑上更复杂，性能开销更大。
2. replace 生成了一个新的字符串，需要占用更多内存，也降低了性能。
3. trimStart 和 trimEnd 直接操作原字符串，没有额外的内存开销，性能更高。

9、截取字符串

1. slice 是最新标准，在现代浏览器中拥有最高的性能。
2. substr 需要计算length和调整参数，逻辑上最复杂，性能最低。
3. substring 介于两者之间，性能居中。

10、定时器

setInterval() 和 setTimeout() 都是在JavaScript中用于设置定时的函数。其主要区别在于：
setInterval()：周期性重复执行一个函数，直到使用 clearInterval() 取消。
setTimeout()：延迟一定时间后执行一个函数一次。
在性能方面，setTimeout() 会略高于 setInterval()，主要原因有：

1. setInterval() 在每次调用后，都需要重新设置定时器，这会产生一定的性能开销。而 setTimeout() 只设置一次定时器。
2. setInterval() 可能会因函数执行时间过长，导致间隔时间内无法重新触发，这会影响定时精度，需要增加定时频率，降低性能。而 setTimeout() 只关注单次函数执行。
3. setInterval() 可能会产生代码阻塞，如果前一个间隔还未完成，下一个间隔就要触发，这会影响主线程响应。setTimeout() 的定时调用是由事件循环控制的，不存在阻塞问题。
4. 一些浏览器会在tab切换到后台时暂停 setInterval()，而 setTimeout() 不会受此影响。这也增加了 setInterval() 的性能开销。