当前位置:
首页
文章
前端
详情

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. trimStarttrimEnd 直接操作原字符串,没有额外的内存开销,性能更高。

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() 的性能开销。

免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。