JS如何提高展开运算符的性能?

更新日期: 2019-08-04阅读: 2k标签: 性能

本文主要讲解怎么提高展开运算的性能,在此之前先简单说说展开运算在数组中的工作原理。展开运算符或三个点,接受一个数组数组或通常是可迭代的[... 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

测试结果:

clipboard.png

如上面所看到,在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和NodeJS v12中提供)。

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

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

作者:Dmitri Pavlutin
译者:前端小智
来源:dmitripavlutin.  

链接: https://fly63.com/article/detial/5128

提高js加载速度,实现js无阻塞加载方式,高性能的加载执行JavaScript

为解决JS加载速度慢,采用js的延时加载,和动态加载。由于js的堵塞特性,当浏览器在加载javascript代码时,不能同时做其他任何事情,如果javascript执行时间越久,浏览器等待响应的时间就越久。

如何提高CSS性能?CSS优化、提高性能提升总汇

如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要表现为: 加载性能 (主要是从减少文件体积,减少阻塞加载,提高并发方面入手),选择器性能,渲染性能,可维护性。

前端性能优化_css加载会造成哪些阻塞现象?

css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。

2018 前端性能检查表

性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting)

高性能Javascript总结

Js高性能总结:加载和运行、数据访问、DOM编程、算法和流程控制、响应接口、Ajax 异步JavaScript和XML、编程实践...

优化网站性能规则_前端性能优化策略【网络加载、页面渲染】

前端网站性能优化规则:网络加载类、页面渲染类。包括:减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等

前端性能的本质是什么?

性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多,浏览器能力被无限放大和利用:从 web 游戏到复杂单页面应用,从 NodeJS 服务到 web VR/AR 和数据可视化,前端工程师总是在突破极限

BigPipe_高性能流水线页面技术

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程:多重指令管线通过不同的处理器执行单元,以达到性能的最佳。

用CSS开启硬件加速来提高网站性能

你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。

原生js实现懒加载并节流

像淘宝网站等,页面中有着大量图片,一次性全部加载这些图片会使浏览器发送大量请求和造成浪费。采用懒加载技术,即用户浏览到哪儿,就加载该处的图片。这样节省网络资源、提升用户体验、减少服务器压力。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!