1. 首页
  2. 前端进阶
  3. JavaScript

JavaScript中,如何提高展开运算符的性能

本文主要讲解怎么提高展开运算的性能,在此之前先简单说说展开运算在数组中的工作原理。

展开运算符或三个点,接受一个数组数组或通常是可迭代的[... arrayOrIterable]并将数组元素分解,并使用这些分解部分构造一个新数组。

展开运算符可以放在数组中的任何位置:


const numbers = [1, 2, 3]; [0, ...numbers]; // Js中文网 => [0, 1, 2, 3] [0, ...numbers, 4]; // Js中文网 => [0, 1, 2, 3, 4] [...numbers, 4]; // Js中文网 => [1, 2, 3, 4] //JS中文网 - 前端进阶资源分享 [www.javascriptC.com](https://www.javascriptc.com/)

现在有一个有趣的问题,展开运算符在数组中的位置是否可以提高性能?让咱们来look look。

1. 附加到头部和尾部函数

在开始对比性能之前,先定义两个函数。

第一个函数:appendToTail()


function appendToTail(item, array) { return [...array, item]; } const numbers = [1, 2, 3]; appendToTail(10, numbers); // Js中文网 => [1, 2, 3, 10]

appendToTail()函数功能主要是将 item插入数组的末尾。

第二个函数 appendToHead()


function appendToHead(item, array) { return [item, ...array]; } const numbers = [1, 2, 3]; appendToHead(10, numbers); // Js中文网 => [10, 1, 2, 3]

JS中文网 – 前端进阶资源教程 https://www.javascriptc.com/
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

appendToHead() 是一个纯函数,它返回一个新数组,通过[item,... array]骚操作将 item 放到所传入数组的后面。

乍一看,没有理由认为这些函数的性能会不同,但是,事实胜于熊辩,来 look look.

2. 性能测试

在MacBook Pro笔记本电脑上用以下3个浏览器的运行[... array,item][item,... array],来看看对应的性能:

  • Chrome 76
  • Firefox 68
  • Safari 12.1

测试结果:

码农进阶题库,每天一道面试题 or Js小知识

如上面所看到,在FirefoxSafari浏览器中[... array,item][item,... array]的性能基本一样。

但是,在Chrome中,[... array,item]的执行速度比[item,... array]快两倍。这个结果对咱们来说很有用。

要在Chrome中提高展开运算符的性能,只需要将展开操作放到数组的开头就哦了。


const result = [...array, item];

但这又是为啥,为什么会发生这种情况?

3.快速路径优化( fast-path optimization)

启动V8引擎的 7.2版本(为Chrome中的JS执行提供支持),可以对展开运算符进行新的优化:快速路径优化

简单说,它的工作原理如下:

如果没有这种优化,当引擎遇到一个展开操作符[...iterable, item],它调用iterable对象的iterator (iterator.next())方法。在每次迭代中,最后返回的数组的内存都会增加,并将迭代结果添加到其中。

但是快速路径优化检测到一个已知的可迭代对象(就像一个整数数组),并完全跳过iterator对象的创建。然后,引擎读取扩展数组的长度,只为结果数组分配一次内存。然后传递展开数组的索引,将每个元素添加到结果数组中。

快速路径优化会跳过迭代对象的创建,只为结果分配一次内存,从而性能提高。

4.支持数据结构

快速路径优化适用于以下标准JS数据结构。

array


const numbers = [1, 2, 3, 4]; [...numbers, 5]; // Js中文网 => [1, 2, 3, 4, 5]

string


const message = 'Hi'; [...message, '!']; // Js中文网 => ['H', 'i', '!']

set


const colors = new Set(['blue', 'white']); [...colors, 'green']; // Js中文网 => ['blue', 'white', 'green'] [...colors.values(), 'green']; // Js中文网 => ['blue', 'white', 'green'] [...colors.keys(), 'green']; // Js中文网 => ['blue', 'white', 'green']

map

关于map,只支持map.keys()map.values()方法


const names = new Map([[5, 'five'], [7, 'seven']]); [...names.values(), 'ten']; // Js中文网 => ['five', 'seven', 'ten'] [...names.keys(), 10]; // Js中文网 => [5, 7, 10]

总结

当展开数组位于数组文本的开头时,咱们可以通过快速路径优化获得性能提升。该优化在V8引擎v7.2中可用(在Chrome v72和NodeJS v12中提供)。

通过快速路径优化[... array,item]的执行速度至少比[item,... array]快两倍。

请注意,虽然f快速路径优化确实很有用,但是在大多数情况下,可以不用强制进行优化,因为最终用户很可能不会感觉到差别,当然,如果咱们在处理大型数组,就可能些优化方案。

*

码农进阶题库,每天一道面试题 or Js小知识 https://www.javascriptc.com/interview-tips/

作者:Dmitri Pavlutin
译者:前端小智
链接:https://dmitripavlutin.com/javascript-spread-operator-performance-optimization/

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:JavaScript中,如何提高展开运算符的性能

链接:https://www.javascriptc.com/3524.html

« 如何搭建一个组件库的开发环境
2020年React面试必问问题汇总»
Flutter 中文教程资源

相关推荐

QR code