关于JavaScript性能问题的误解

简介: JavaScript 是单线程语言,代码逐行执行,遇到大数据量计算可能影响性能。前端同事担心遍历大量数据会导致性能问题,但实际上,即使遍历1000、10000条数据,耗时也较少。测试代码执行时间有三种方法:Date.now、console.time 和 performance.now,其中 performance.now 精度最高。开发中不必过度担忧遍历带来的性能损耗,保持代码清晰更重要。

因为 JavaScript 是单线程的,所以只能从上到下一行一行去执行代码,如果遇到大的数据量计算就会比较耗时,也就是我们大部分人理解的性能有问题。

写这篇文章的缘由

写这篇文章的缘由是因为公司的一个前端同事,抱怨为了实现产品想要的特殊效果,只能前端去遍历处理数据,而后端接口又没有分页,担心数据量太大了这样遍历会不会有性能问题。

这里的设计确实会出现性能问题,列表类接口如果不分页,数据量一大后端查库的io开销和返回给前端数据的网络传输一定会耗时增加,页面上渲染大量数据时也有可能造成卡顿。

但这里的性能问题其实并不是由遍历造成的,因为就算前端去遍历处理1000、10000条数据,实际上并不会增加多少耗时,下面我们可以一起来简单模拟测试一下。

JavaScript 中计算代码执行耗时的方法

测试 JavaScript 代码执行时间主要有3种方法,最容易想到的应该就是直接获取前后的时间戳相减。

1、Date.now

Date.now() 和 new.Date().getTime() 都是返回 1970-01-01 到当前的毫秒时间戳,Date.now 作为静态方法比 new.Date 耗时要少,所以推荐用 Date.now

function calcFunc() {
    let sum = 0
    for(let i = 0; i < 1000; i++) {
        sum += i
    }
    return sum
}

const timeStart = Date.now()
calcFunc()
const timeEnd = Date.now()
console.log(timeEnd - timeStart)

不过这种方式获取到的时间精度较低,少于1毫秒时获取到的都是0。

2、console.time

console.time 可以开启一个计时任务,参数就是一个任务名字符串,要求唯一,也可以不传(结束的时候 console.timeEnd 里也不传,会显示成 default)。

开启一个或多个计时任务后,可以通过 console.timeEnd 来结束并打印出耗时,参数就是前面开启时传入的任务名。

function calcFunc() {
    let sum = 0
    for(let i = 0; i < 1000; i++) {
        sum += i
    }
    return sum
}

console.time('start')
calcFunc()
console.timeEnd('start')

只能在浏览器控制台或者node环境中终端窗口中使用,获取到的值无法赋值给代码中的变量。

3、performance.now

performance.now 是一个用于获取高精度时间戳的 JavaScript API,返回包括小数点的毫秒时间。

function calcFunc() {
    let sum = 0
    for(let i = 0; i < 1000; i++) {
        sum += i
    }
    return sum
}

const timeBegin = performance.now()
calcFunc()
const timeOver = performance.now()
console.log(timeOver - timeBegin)

以上3种方法都可以获取代码的耗时,不过像示例中的1000次遍历大概耗时也就0.1毫秒左右,用Date.now的方式由于精度问题会是0,所以平时测试也不推荐这种方式,推荐使用performance.now来计算耗时。

开发中大胆地遍历数据

实际上我以前也有这种顾虑,遇到遍历总觉得会不会影响性能,如果能够用1次遍历解决问题绝对不用2次,还暗自庆幸省了一次遍历我这代码性能提高了。

直到在一次 code review 中被一个同事指出来,不要把所有代码都塞到一次遍历中去,明明在遍历中干了2件事,非得把代码混在一起。单独提取出来分别遍历,逻辑立马会变得清晰,可读性也提升了,实际上为了省掉的一次遍历节省的性能是可以忽略不计的。

相关文章
|
2月前
|
前端开发 JavaScript Java
JavaScript闭包深入剖析:性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
140 70
|
5月前
|
算法 JavaScript 前端开发
垃圾回收机制对 JavaScript 性能的影响有哪些?
【10月更文挑战第29天】垃圾回收机制对JavaScript性能有着重要的影响。开发者需要了解不同垃圾回收算法的特点和性能开销,通过合理的代码优化和内存管理策略,来降低垃圾回收对性能的负面影响,提高JavaScript程序的整体性能。
|
1月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
5月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
250 77
|
5月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
233 62
|
5月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
138 63
|
5月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
5月前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
5月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
120 31