一文带你弄懂 V8 数组的快速 / 字典模式

V8 是如何处理数组的?

问题

先抛出一个问题,下面两端代码哪个的效率更高?

const arr = [];
for(let i = 0; i < 10000000; i++) {arr[i] = 1;
}
const arr = [];
arr[10000000 - 1] = 1;
for(let i = 0; i < 10000000; i++) {arr[i] = 1;
}

答案是第一段代码的效率更高,先来看执行的耗时,运行下面的代码:

console.time('a')
const arr1 = [];
for (let i = 0; i < 10000000; i++) {arr1[i] = 1;
}
console.timeEnd('a')console.time('b')
const arr = [];
arr[10000000 - 1] = 1;
for (let i = 0; i < 10000000; i++) {arr[i] = 1;
}
console.timeEnd('b')

控制台的输出如下:

在这里插入图片描述

可以很明显的看到执行耗时的差别,第一段代码的效率远高于第二段代码。

那么,这是为什么呢?

原因

其实是 V8 底层对数组有两种处理方式,一种是 “快速模式”(Fast Elements),另一种是 “字典模式”(Dictionary Elements),那么这两种模式分别会在什么情况下触发,以及都有什么区别呢?

快速模式

特点:快速模式是针对紧凑型数组(dense array)的优化,这种数组的特点是索引是连续的,没有“空洞”(即没有未定义的索引)。

内部处理:在快速模式下,V8 使用类似于 C++ 数组的结构来存储元素。这意味着它为数组元素分配了连续的内存空间,提高了元素访问的速度。

适用情况:当你创建的数组是紧凑的,且主要进行的是对数组元素的遍历和访问操作时,V8 会使用这种模式。

字典模式

特点:当数组变得稀疏(sparse),即数组中有大量的空洞,或者数组索引非常大时,V8 会将数组转换为字典模式。

内部处理:在字典模式下,数组被处理为一个哈希表,而不是连续的内存块。这种方式在处理大量空洞或非常大的索引时更加内存高效。

适用情况:对于具有非常高索引值或大量未定义元素的数组,或者频繁更改其大小的数组,V8 会采用这种模式。

区别

  1. 底层的数据结构
    • 快速模式采用的是 Array
    • 字典模式采用的是 HashMap
  2. 触发方式
    • 默认是快速模式
    • 当存在以下情况就会转换到字典模式
      1. 数组存在 “空洞”,变为稀疏数组
      2. 数组中的值存在多种数据类型也可能转换,例如:同时存储数字、字符串、对象等
      3. 数组的长度接近或超过 32 位整数的最大值
  3. 效率
    • 快速模式的访问和遍历效率更高
    • 字典模式处理稀疏数组的效率更高

应用场景

尽量使用快速模式,可以通过以下方式来处理长度过长的数组:

  1. 数组分片:将一个数组分为多个数组,在处理时分别处理各个子数组
  2. 采用 Map 或 Set 替换数组:在某些情况下 Map 或 Set 可能比稀疏数组更加高效

PS:绝大多数情况下都不太需要关注,除非这对性能的造成了很明显的影响或需要对性能进行重度优化的情况下,因为 V8 本身已经提供了很优秀的性能。

参考:https://itnext.io/v8-deep-dives-understanding-array-internals-5b17d7a28ecc

PS

作者整理了一份长达 9w+ 字数,字节、阿里、百度大佬看了都称赞的前端文档,并且还在持续更新,包含:

  1. HTML、CSS、JavaScript 三件套
  2. Vue、React 流行框架
  3. Webpack、Vite 构建工具
  4. 浏览器、安全、计算机网络、操作系统、设计模式等计算机领域基本功
  5. etc…

在这里插入图片描述

可以添加作者 Q: 1437517225 备注领取,文档可以参与评论,以及给作者留言想要的问题,欢迎大家参与共建。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/329380.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unsafe类

Unsafe类 Unsafe类中的重要方法 JDK的rt.jar包中的Unsafe类提供了硬件级别的原子性操作&#xff0c;Unsafe类中的方法都是native方法&#xff0c;它们使用JNI的方式访问本地C实现库。下面我们来了解一下Unsafe提供的几个主要的方法以及编程时如何使用Unsafe类做一些事情。 l…

江科大STM32

目录 STM32简介 STM32简介 我们主要学习的就是STM32的外设。 NVIC&#xff1a;内核里面用于管理中断的设备&#xff0c;比如配置中断优先级这些东西SysTick&#xff1a;内核里面的定时器&#xff0c;主要用来给操作系统提供定时服务的&#xff0c;STM32是可以加入操作系统的&am…

OpenSource - 基于Netty的网络扩展库HServer

文章目录 概述官网Hserver的理念特点原理图代码案例HelloWorld 概述 HServer是一个基于Netty开发网络扩展库.使用插件方式来扩展我们的业务 HServer提供 web,gateway,rpc 等插件 同时用户也可以自定义插件&#xff0c;来完成各种各样的业务场景。 官网 https://gitee.com/HSe…

OpenGuass 之顺序扫描和索引扫描的代价估算

一. 前言 在OepnGuass中&#xff0c;一条路径的执行代价估算值将直接决定一条路径是否会被取舍。本文主要对OpenGuass中对于普通表的顺序扫描和索引扫描两种路径的的代价估算进行代码走读了解代价估算的整体过程。 二. 顺序扫描代价估算 顺序扫描的路径代价估算在OpenGuass中实…

如何找到 niche 出海细分市场的 IDEA

先说结论就是&#xff1a;看榜单 Why&#xff1a;为什么看榜单&#xff1f; 大家会问为什么&#xff1f;原因很简单&#xff1a; 熟读唐诗三百首&#xff0c;不会作诗也会吟不天天看榜单上相关的优秀同行&#xff0c;你想干啥 心法就是下苦功夫坚持&#xff0c;量变引起质变…

经典八股文之RocketMQ

核心概念 NameServer nameserver是整个rocketmq的大脑&#xff0c;是rocketmq的注册中心。broker在启动时向所有nameserver注册。生产者在发送消息之前先从 NameServer 获取 Broker 服务器地址列表(消费者一 样)&#xff0c;然后根据负载均衡算法从列表中选择一台服务器进行消…

通用web自动扩缩容_智能运维引擎CudgX

一、概述 CudgX是星汉未来自主研发的面向云原生时代的智能运维引擎&#xff0c;支持根据 MetricQPS 分段耗时指标进行自动扩缩容。 通过各类服务的多维度、大规模的日志数据采集以及机器学习训练分析&#xff0c;对服务进行数字化、指标化度量&#xff0c;并基于部署的…

现有网络模型的使用及修改(VGG16为例)

VGG16 修改默认路径 import os os.environ[TORCH_HOME] rD:\Pytorch\pythonProject\vgg16 # 下载位置太大了&#xff08;140多G&#xff09;不提供直接下载 train_set torchvision.datasets.ImageNet(root./data_image_net, splittrain, downloadTrue, transformtorchvis…

PHP文件代码加密系统,可批量全开源

代码文件加密系统 在程序运行时&#xff0c;实质上是在执行机器码&#xff0c;而虚拟机语言的基本概念是将程序加密到一定程度&#xff0c;也就是说&#xff0c;经过加密的PHP程序在执行时会被解密成opcode继续执行。 PHP在执行时会生成opcode&#xff0c;然后由Zend虚拟机继…

PiflowX组件 - Filter

Filter组件 组件说明 数据过滤。 计算引擎 flink 组件分组 common 端口 Inport&#xff1a;默认端口 outport&#xff1a;默认端口 组件属性 名称展示名称默认值允许值是否必填描述例子conditioncondition“”无是过滤条件。age > 50 or age < 20 Filter示例…

Docker安装WebRTC下TURN服务

详细实现方式以及代码下载请前往 https://www.passerma.com/article/90 实现效果 一、手动构建镜像 1.新建Dockerfile文件 文件用于编译镜像 以alpine为基础镜像 添加coturn需要的依赖库 获取coturn并进行编译 通过start.sh启动turnserver服务 Dockerfile FROM alpineRUN ap…

Java学习苦旅(二十七)——Java中的集合框架

本篇博客将初略讲解Java中的集合框架及背后的数据结构。 集合框架介绍 Java 集合框架 Java Collection Framework&#xff0c;又被称为容器 &#xff08;container&#xff09;&#xff0c;是定义在java.util包下的一组接口 interfaces 和其实现类 classes 。其主要表现为将多…