这样解释shift,面试官直接起立!

面试官提问

面试官:候选人你好,请解释下面的现象:

  1. 数组1000个元素,shift操作和对象delete操作的benchmark 差不多。
  2. 数组10w个元素时,shift操作和对象delete操作的benchmark 相差巨大。

场景如下: 数组1000个元素时:shift和delete相差无几

数组100000个元素时,shift比delete慢了100倍

开始表演!

候选人:总的来说,这是因为数组在1k长度时,v8引擎能申请到一段连续内存做shift运算,在利用L1缓存的优势下,速度能和object的delete有得一比。

顺便一提,利用L1缓存思想做性能优化,也是最近游戏界中ECS架构为何能获得如此高的关注度的原因之一。

我们回到咱们前端来讲,口说无凭,眼见为实,让我们直接打开V8引擎源码一睹为快。

第一步 、我们找到\[\].shift相关v8引擎源码

我们可以看到ArrayPrototypeShift代码会尝试执行TryFastArrayShift函数,若该函数抛出Slow或者Runtime标志,则运行相应的逻辑。

第二步 、我们进入 TryFastArrayShift 这个函数继续看,这个函数有两个逻辑:

  1. 若没有连续内存,则抛出Slow
  2. 若数组长度>100,则抛出Runtime

回到我们案例:我们数组长度如果在1000,则抛出的是Runtime标志;如果在10W,则抛出的是Slow标志。

第三步、查看Slow和Runtime的逻辑。

  • slow对应的GenericArrayShift函数逻辑如下 :

    • 先把数组转换为对象
    • 再遍历对象的key,每一个key都往前移一位。(这也是ECMAScript-262规范定义的算法)
  • runtime对应的ArrayShift函数逻辑如下:

    1. 申请连续内存
    2. 遍历并移位

最后总结,从上面三步我们确认了V8引擎的执行逻辑:

  1. 10W数据,很难申请到连续内存,通常就无法利用L1缓存,导致比较卡慢
  2. 1000数据,较容易申请到连续内存,通常能利用到L1缓存,速度较快。
    1. 100长度以下的数组,直接走C++逻辑。
    2. 100长度以上的数组,走汇编逻辑加速。

这也就说明了为什么1000数据和10W数据执行上有一定差异的原因。

注意:ArrayShift函数源码可能有误,也请大佬指点。

PS:这个ArrayShift源码不在v8中,而在汇编中。

PS:这是因为buitin的代码需要在vs上编译出来才能查到相关代码的引用地址,目前比较忙,先分享思路,我后续会进行更新订正。

小结

上诉面试经历是我刚编的,希望能来更多的朋友讨论,毕竟大家对v8源码或多或少有一点陌生的畏难心理,我也如此。本问题实际是来自我交流群的某一次讨论。

不过道理是真的:

平时遇到某些问题,咱们也不妨从V8源码入手分析。

有时候源码比各类文章讲得更清晰。

日积月累,总会有一些意想不到的收获。

参考文章

相关推荐
开开心心就好3 小时前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
Setsuna_F_Seiei5 小时前
前端转型 Agent 开发 05 之 Agent Hooks 与 Checkpointer(让 Agent 从全自动转变人为可掌控)
前端·agent·ai编程
百万蹄蹄向前冲7 小时前
风扇转了一晚上MVP专家团翻车事故
前端·人工智能
默_笙7 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan9 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
kyriewen9 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理10 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
IT_陈寒11 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche150011 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情67311 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具