js高性能开发技巧10则
- 前端
- 三生万物
- 0
1、判断是否包含子字符串?
使用 includes()
方法比 test()
方法性能更高,因为 test()
方法需要先将正则表达式编译成 RegExp 对象,再进行匹配,相对较慢。
2、字符串转数字
使用 Number(str)
/ +str
的性能最高,其次 parseInt(str)
/ parseFloat(str)
。
3、数字转字符串
使用 String(num)
/ ${num}
性能最高,其次 Number.toString()
/ num + ''
。
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()
的性能开销。
免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。