• 技术文章 >web前端 >js教程

    javascript中如何提高扩展运算符的性能?

    青灯夜游青灯夜游2021-02-25 10:14:15转载337

    在这篇文章中,我们会进行一个有趣的测试,看看我们如何提高扩展运算符的性能。

    让我们首先简要介绍一下扩展运算符在数组中的工作原理。

    扩展运算符,也就是我们常用的三个,让数组展开变成每个小块。 然后使用中括号语法[],重新组装这些小块构造一个新数组。

    扩展运算符可以被放置在中括号[]里面的任何位置。

    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]

    回答我们一开始提出的问题,扩展运算符在数组文字中的位置是否可以提高性能?让我们往后继续探究。

    附加到头部和尾部功能

    在开始性能比较之前,让我们定义两个函数。

    第一个是appendToTail()

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

    appendToTail()可以让你在数组的末尾插入一个值。 此函数使用了以下写法[...array, item]

    第二个是appendToHead()

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

    appendToHead()是一个纯函数,它返回一个新数组,其中添加的值是插入在原数组的头部。它使用[item, ...array]

    讲道理就上面这两个函数的表现,没有理由认为这些功能会有不一样的效率。但是事实可能跟我们想象中不一样,下面让我们来继续测试吧。

    性能测试

    我用MacBook Pro在以下3个浏览器的笔记本电脑上测试[... array, item][item, ...array],对比两者的性能:

    以下是性能测试结果:

    1.png

    正如预期的那样,在Firefox和Safari浏览器中[...array, item][item, ...array]具有相同的性能。

    但是,在Chrome中,[...array, item]的执行速度比[item, ...array]快两倍。 这是一个有用的结果。

    要在Chrome中提高扩展运算符的性能,请在数组文字的开头使用扩展运算符:

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

    但另一个问题出现了:这种问题怎么引起的?

    从V8引擎的7.2版本之后,为Chrome中的JavaScript执行提供支持,可以对扩展运算符进行新的优化:快速路径优化

    用几句话描述它的工作原理,如下:

    如果没有这个优化,当引擎遇到扩展运算符[...iterable, item]时,它会调用可迭代对象的迭代器iterator.next()。在每次迭代时,结果数组的内存都会增加,迭代结果会被添加到结果数组中。

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

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

    支持的数据结构

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

    数组

    const numbers = [1, 2, 3, 4];
    
    [...numbers, 5]; // => [1, 2, 3, 4, 5]

    字符串

    const message = 'Hi';
    
    [...message, '!']; // => ['H', 'i', '!']

    Sets

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

    Maps

    在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引擎7.2版本(Chrome v72和NodeJS v12附带的特性)。

    通过此优化,性能测试显示[... array, item]的执行速度至少比[item, ...array]快两倍。

    请注意,虽然快速路径确实很有用,建议您在性能很重要或者处理大型数组的地方使用它。

    因为,在大多数情况下,强制优化,最终用户很可能不会感觉到任何差异。

    您还知道JavaScript中有哪些有趣的性能优化,可以在下面评论中告诉我?

    如果文章能带您一丝帮助或者启发,请不要吝啬你的赞和Star,对我是前进的动力和最大的肯定

    原文链接:https://dmitripavlutin.com/javascript-spread-operator-performance-optimization/

    更多编程相关知识,请访问:编程视频!!

    以上就是javascript中如何提高扩展运算符的性能?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    上一篇:深入浅析React组件间通信的10种方法 下一篇:12个精致炫酷的背景装饰特效库(分享)
    线上培训班

    相关文章推荐

    • 浅谈 NodeJS获取程序退出码的方法• 浅析Angular中HttpClientModule模块有什么用?怎么用?• 深入浅析Angular中怎么使用动画• 怎么使用Node.js+DevTools快速调试应用程序?• 浅谈离线安装全局node模块的方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网