使用Chrome开发者工具研究JavaScript里函数的原生实现

As the size of my blog Chrome Development Tool tips used in my daily work turns to be larger I create a separate post to record down this small tip.
Are you curious about the “native code” here? At least I am.

Today I find that the Profiles tab in Chrome development tool can help us to unveil the mysteries to some degree.
In Chrome development, just select this checkbox:

And then execute the simple JavaScript code below:

var arr = [];
for (var i=0; i<1000; i++){arr.push(i)
}
console.profile("Array toString");for( var i = 0; i < 1000; i++){var a = arr.toString();
}
console.profileEnd("Array toString");

Once done, you can see a profile record with the name specified in JavaScript code above, “Array toString”. Hover the mouse to the first row, “anonymous function”, we find the hint “array.js”.

Switch display style from Chart to Tree:

From here the callstack of native implementation of toString is displayed:

The next step is to look into in array.js.
Launch url: https://cs.chromium.org/
Click this hyperlink:

now you can find the array.js file via path: src/v8/src/js/array.js

The callstack analyzed through the source code exactly matches the one we get in Chrome development tool Profile tab:
ArrayToString will delegate to Join if current caller is an Array:

Join will call DoJoin:

DoJoin will first call UseSparseVariant to evaluate the possibility to perform Join via SparseVariant. If not possible, call ConvertToString as fall back. ( The line number of source code may vary with the one you see in Chrome Development Tool profile tab due to the different version of Chrome being used. )

If you could not tolerate the poor performance of this online source code repository, you could download the whole source code of V8 to your local laptop by cloning this github repository:
https://chromium.googlesource.com/v8/v8.git/

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

使用Chrome开发者工具研究JavaScript里函数的原生实现相关推荐

使用Chrome开发者工具研究JavaScript函数的原生实现原理
As the size of my blog Chrome Development Tool tips used in my daily work turns to be larger I creat ...
使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
Chrome 开发者工具是前端开发工程师工具箱里使用频率最高的工具之一. 本文通过一个具体的例子,给大家分享笔者工作中,是如何通过 Chrome 开发者工具,分析一个网站的实现明细. 下图是 SAP ...
Chrome开发者工具Element style里的Computed标签页
View only the CSS that's actually applied to an element 根据Chrome开发者工具文档介绍,styles标签页里显示的是所有施加到一个HTML ...
使用chrome开发者工具调试JavaScript代码的三种常用方法
对 JS 程序的调试,除了在 JS 程序中使用 alert().console.log() 方法跟踪和调试代码外,开发人员也会经常使用一些调试工具.最常用的 JS 调试工具就是一些主流的浏览器的调试工 ...
Chrome开发者工具之JavaScript内存分析
为什么80%的码农都做不了架构师?>>> 内存泄漏是指计算机可用内存的逐渐减少.当程序持续无法释放其使用的临时内存时就会发生.JavaScript的web应用也会经常遇到在原生 ...
一串最简单的JavaScript代码，在Chrome开发者工具调试器里触发VM8标签的出现
代码如下: <html> <script>var code = "{ /* Jerry test generation */; debugger; console.l ...
Chrome开发者工具Cookie标签里看到的ga cookie是什么意思
如图: 答案是和这个analytics.js有关,google家的东西. 为让 Google Analytics(分析)能够确定两个不同匹配是否属于同一用户,必须将与特定用户关联的唯一标识和每个匹配一 ...
Chrome 开发者工具 live expression 的用法
live expression 相当于给 Chrome 开发者工具 console 面板里的表达式置顶,并且能随着用户点击的变化,而动态刷新该置顶的表达式.看个例子: 点击下图绿色高亮的图标,输入一个 ...

使用Chrome开发者工具研究JavaScript里函数的原生实现

使用Chrome开发者工具研究JavaScript里函数的原生实现相关推荐

最新文章

热门文章