1、判断是否包含子字符串?
使用 includes() 方法比 test() 方法性能更高,因为 test() 方法需要先将正则表达式编译成 RegExp 对象,再进行匹配,相对较慢。
2、字符串转数字
使用 String(num) / ${num} 性能最高,其次 Number.toString() / num + ''。
3、数字转字符串
使用 Number(str) / +str 的性能最高,其次 parseInt(str) / parseFloat(str)。
4、遍历数组
性能从高到低:
for 循环/for..of- 性能最高forEach()/while 循环- 性能稍差,但易用for..in- 不推荐用于数组遍历map()- 只在需要新数组结果时使用
5、遍历对象
性能从高到低:
for..in/Object.keys(obj)- 性能最高,直接遍历对象Object.keys({ ...obj }).forEach(/* ... */)- 性能稍差,只在需要结果数组时使用Object.entries(obj)- 性能稍差,只在需要结果嵌套数组时使用
6、查询dom节点
性能从高到低:
document.getElementById()- 性能最高,所有浏览器支持document.querySelector()/document.querySelectorAll()- 性能高,IE8+ 支持document.getElementsByTagName()/document.getElementsByClassName()/document.getElementsByName()- 性能一般,所有浏览器支持
7、查找数组中元素索引
indexOf 的性能会高于 findIndex,主要原因是:
indexOf只需要简单的遍历和值匹配,逻辑较简单。findIndex需要执行回调函数中的逻辑,性能开销更大。findIndex的回调函数中可能会有更复杂的运算逻辑,这也会影响性能。
8、删除字符串中的字符
replace需要进行正则匹配和字符串替换,逻辑上更复杂,性能开销更大。replace生成了一个新的字符串,需要占用更多内存,也降低了性能。trimStart和trimEnd直接操作原字符串,没有额外的内存开销,性能更高。
9、截取字符串
slice是最新标准,在现代浏览器中拥有最高的性能。substr需要计算length和调整参数,逻辑上最复杂,性能最低。substring介于两者之间,性能居中。
10、定时器
setInterval() 和 setTimeout() 都是在JavaScript中用于设置定时的函数。其主要区别在于:
setInterval():周期性重复执行一个函数,直到使用 clearInterval() 取消。
setTimeout():延迟一定时间后执行一个函数一次。
在性能方面,setTimeout() 会略高于 setInterval(),主要原因有:
setInterval()在每次调用后,都需要重新设置定时器,这会产生一定的性能开销。而setTimeout()只设置一次定时器。setInterval()可能会因函数执行时间过长,导致间隔时间内无法重新触发,这会影响定时精度,需要增加定时频率,降低性能。而setTimeout()只关注单次函数执行。setInterval()可能会产生代码阻塞,如果前一个间隔还未完成,下一个间隔就要触发,这会影响主线程响应。setTimeout()的定时调用是由事件循环控制的,不存在阻塞问题。- 一些浏览器会在tab切换到后台时暂停
setInterval(),而setTimeout()不会受此影响。这也增加了setInterval()的性能开销。
最新内容请查看原文链接:fenxianglu.cn/article/506