如何提高 JavaScript 展开运算符 (Spread operator) 的性能? 下面本篇文章就来给大家介绍一下提高 JavaScript 展开运算符 (Spread operator) 性能的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
本文主要讲解怎么提高展开运算符 (Spread operator) 的性能, 在此之前先简单说说展开运算符 (Spread operator) 在数组中的工作原理.
展开运算符或三个点, 接受一个数组数组或通常是可迭代的 [... arrayOrIterable] 并将数组元素分解, 并使用这些分解部分构造一个新数组.
展开运算符可以放在数组中的任何位置:
- const numbers = [1, 2, 3];
- [0, ...numbers]; // => [0, 1, 2, 3]
- [0, ...numbers, 4]; // => [0, 1, 2, 3, 4]
- [...numbers, 4]; // => [1, 2, 3, 4]
现在有一个有趣的问题, 展开运算符在数组中的位置是否可以提高性能? 让咱们来 look look.
1. 附加到头部和尾部函数
在开始对比性能之前, 先定义两个函数.
第一个函数: appendToTail():
- function appendToTail(item, array) {
- return [...array, item];
- }
- const numbers = [1, 2, 3];
- appendToTail(10, numbers); // => [1, 2, 3, 10]
appendToTail()函数功能主要是将 item 插入数组的末尾.
第二个函数 appendToHead():
- function appendToHead(item, array) {
- return [item, ...array];
- }
- const numbers = [1, 2, 3];
- appendToHead(10, numbers); // => [10, 1, 2, 3]
appendToHead() 是一个纯函数, 它返回一个新数组, 通过 [item,... array] 骚操作将 item 放到所传入数组的后面.
乍一看, 没有理由认为这些函数的性能会不同, 但是, 事实胜于熊辩, 来 look look.
2. 性能测试
在 MacBook Pro 笔记本电脑上用以下 3 个浏览器的运行[... array,item] 和 [item,... array], 来看看对应的性能:
Chrome 76 Firefox 68 Safari 12.1
测试结果:
如上面所看到, 在 Firefox 和 Safari 浏览器中 [... 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]; // => [1, 2, 3, 4, 5] string const message = 'Hi'; [...message, '!']; // => ['H', 'i', '!'] set const colors = new Set(['blue', 'white']); [...colors, 'green']; // => ['blue', 'white', 'green'] [...colors.values(), 'green']; // => ['blue', 'white', 'green'] [...colors.keys(), 'green']; // => ['blue', 'white', 'green'] map
关于 map, 只支持 map.keys()和 map.values()方法
const names = new Map([[5, 'five'], [7, 'seven']]); [...names.values(), 'ten']; // => ['five', 'seven', 'ten'] [...names.keys(), 10]; // => [5, 7, 10]
总结
当展开数组位于数组文本的开头时, 咱们可以通过快速路径优化获得性能提升. 该优化在 V8 引擎 v7.2 中可用(在 Chrome v72 和 Node.JS v12 中提供).
通过快速路径优化,[... array,item]的执行速度至少比 [item,... array] 快两倍.
请注意, 虽然 f 快速路径优化确实很有用, 但是在大多数情况下, 可以不用强制进行优化, 因为最终用户很可能不会感觉到差别, 当然, 如果咱们在处理大型数组, 就可能些优化方案.
来源: http://www.css88.com/web/javascript/16116.html