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

news2024/11/15 21:01:04

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.coloradmin.cn/o/1364572.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PHP代码审计之实战审代码篇2

4. 仔细观察如下代码&#xff0c;思考代码有什么缺陷&#xff0c;可能由此引发什么样的问题&#xff1f; <?php require_once("/home/rconfig/classes/usersession.class.php"); require_once("/home/rconfig/classes/ADLog.class.php"); require_onc…

springboot+redisTemplate多库操作

单库操作 我做了依赖管理&#xff0c;所以就不写版本号了添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency>配置文件 spring:redis:database: 2…

钡铼技术BL110智能网关功能介绍 | PLC程序的上传和下载

在工业自动化系统中&#xff0c;PLC&#xff08;可编程逻辑控制器&#xff09;是一种常见的控制设备。通常情况下&#xff0c;PLC被用于监控、控制和调节生产过程中的各种设备和机器。而PLC一旦出现故障&#xff0c;就会影响到下控设备的工作状态&#xff0c;进而影响整个工厂的…

K8S本地开发环境-minikube安装部署及实践

引言 在上一篇介绍了k8s的入门和实战&#xff0c;本章就来介绍一下在windows环境如何使用minikube搭建K8s集群&#xff0c;好了废话不多说&#xff0c;下面就和我一起了解Minikube吧。 什么是Minikube&#xff1f; Minikube 是一种轻量级的 Kubernetes 实现&#xff0c;可在本…

0.9uA 低功耗低压差稳压器

一、基本概述 FM6215 系列采用 CMOS 工艺制造的高精度、低功耗低压差稳压器。该系列具有极低的静态电流, 输出电压 3.3v的产品静态功耗仅为 0.9uA(TYP),最大输出电流可达到 300mA。 产品采用 SOT23-5 封装&#xff0c;因此&#xff0c;该系列适用于需要高密度安装的应用场合&a…

【AI视野·今日Sound 声学论文速览 第四十期】Wed, 3 Jan 2024

AI视野今日CS.Sound 声学论文速览 Wed, 3 Jan 2024 Totally 4 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers Auffusion: Leveraging the Power of Diffusion and Large Language Models for Text-to-Audio Generation Authors Jinlong Xue, Yayue De…

记一个React组件入参不当导致页面卡死的问题

一、问题描述 1.1 触发现象 点击按钮后页面卡死 1.2 最小 Demo CodeSandBox&#xff1a;https://codesandbox.io/p/sandbox/react-hook-component-stuck-755wcyinscode&#xff1a;https://inscode.csdn.net/ import ./App.css; import React, { useState, useEffect } f…

2023年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷4

某企业根据自身业务需求&#xff0c;实施数字化转型&#xff0c;规划和建设数字化平台&#xff0c;平台聚焦“DevOps开发运维一体化”和“数据驱动产品开发”&#xff0c;拟采用开源OpenStack搭建企业内部私有云平台&#xff0c;开源Kubernetes搭建云原生服务平台&#xff0c;选…

Redis反序列化的一次问题

redis反序列化的一次问题 1. 问题描述 springbootredis不少用&#xff0c;但是一直没遇到什么问题&#xff0c;直接代码拷贝上去就用了。这次结合spring-security&#xff0c;将自定义的spring-security的UserDetails接口的实现类SecurityUser&#xff0c;反序列化取出时报错…

Packet Tracer - Configure Cisco Routers for Syslog, NTP, and SSH Operations

Packet Tracer - 配置Cisco路由器以实现Syslog、NTP和SSH功能 地址表 目标&#xff1a; 配置OSPF MD5身份验证。配置NTP服务。设置路由器将消息记录到syslog服务器。配置R3路由器以支持SSH连接。 背景/场景&#xff1a; 在本练习中&#xff0c;您将配置OSPF MD5身份验证以实…

一文快速搞懂Nginx —— Nginx 详解

一文快速搞懂Nginx 一、niginx 简介二、正向 / 反向代理2.1 正向代理2.2 反向代理 三、负载均衡四、动静分离五、web 缓存六、Niginx 安装6.1 windows版本下的安装6.2 Linux版本下的安装 七、常用命令八、为什么选择Nginx 一、niginx 简介 Nginx 同 Apache 一样都是一种 Web 服…

C语言光速入门笔记

C语言是一门面向过程的编译型语言&#xff0c;它的运行速度极快&#xff0c;仅次于汇编语言。C语言是计算机产业的核心语言&#xff0c;操作系统、硬件驱动、关键组件、数据库等都离不开C语言&#xff1b;不学习C语言&#xff0c;就不能了解计算机底层。 目录 C语言介绍C语言特…

PAT 乙级 1056 组合数的和

给定 N 个非 0 的个位数字&#xff0c;用其中任意 2 个数字都可以组合成 1 个 2 位的数字。要求所有可能组合出来的 2 位数字的和。例如给定 2、5、8&#xff0c;则可以组合出&#xff1a;25、28、52、58、82、85&#xff0c;它们的和为330。 输入格式&#xff1a; 输入在一行…

水母目标检测数据集VOC格式500张

水母&#xff0c;一种美丽而神秘的海洋生物&#xff0c;以其独特的形态和生态习性而备受瞩目。 水母的体型呈伞状&#xff0c;身体透明&#xff0c;有各种颜色和花纹。它们没有骨骼&#xff0c;身体由胶状物质组成&#xff0c;非常柔软和脆弱。水母通过触手上的刺细胞释放毒素…

Unity 一文掌握使用AddListener方法为组件事件添加监听器的方法

在Unity中&#xff0c;很多组件都带有事件&#xff0c;比如: Button组件&#xff1a;onClick() Toggle组件&#xff1a;On Value Changed(Boolean) Dropdown组件&#xff1a;On Value Changed(Int32) InputField组件&#xff1a;On Value Changed(String)、On End Edit(Stri…

【leetcode】力扣算法之有效的数独【中等难度】

题目描述 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&…

CodeWave智能开发平台--03--目标:应用创建--07供应商数据表格

摘要 本文是网易数帆CodeWave智能开发平台系列的第09篇&#xff0c;主要介绍了基于CodeWave平台文档的新手入门进行学习&#xff0c;实现一个完整的应用&#xff0c;本文主要完成07供应商数据表格 CodeWave智能开发平台的09次接触 CodeWave参考资源 网易数帆CodeWave开发者…

Micro-app 微前端框架demo介绍

Micro-app 框架 1、框架安装 npm i micro-zoe/micro-app --save2、子应用对应的view页面 <template><div><!-- name(必传)&#xff1a;应用名称url(必传)&#xff1a;应用地址&#xff0c;会被自动补全为http://localhost:3000/index.htmlbaseroute(可选)&…

mysql进阶-重构表

目录 1. 原因 2. 如何重构表呢&#xff1f; 2.1 命令1&#xff1a; 2.2 命令2&#xff1a; 2.3 命令3&#xff1a; 1. 原因 正常的业务开发&#xff0c;为什么需要重构表呢&#xff1f; 原因1&#xff1a;某张表存在大量的新增和删除操作&#xff0c;导致表经历过大量的…

Kali Linux——设置中文

【问题现象】 从下图可以看到&#xff0c;菜单全是英文的。对于英文不好的同学&#xff0c;使用起来很难受。 【解决方法】 1、获取root权限 su root 2、进入语言设置 dpkg-reconfigure locales 3、选择zh_CN.UTF-8 UTF-8 4、设置默认 5、安装完成 6、重启虚拟机 reboot…