这样解释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源码入手分析。

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

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

参考文章

相关推荐
Martin -Tang1 小时前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发1 小时前
解锁微前端的优秀库
前端
王解2 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录2 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁2 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂2 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐3 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成5 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽5 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新6 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html