使用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的原创文章,请关注公众号"汪子熙":

汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师,SAP 中国技术大使。14 多年的 SAP 产品开发生涯,Jerry 曾经先后参与 SAP Business ByDesign,SAP CRM,SAP Cloud for Customer,SAP S/4HANA,SAP Commerce Cloud(电商云)等标准产品的研发工作。
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值