使用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开发者工具调试JavaScript代码的三种常用方法
对 JS 程序的调试,除了在 JS 程序中使用 alert().console.log() 方法跟踪和调试代码外,开发人员也会经常使用一些调试工具.最常用的 JS 调试工具就是一些主流的浏览器的调试工 ...
Chrome开发者工具之JavaScript内存分析
为什么80%的码农都做不了架构师?>>> 内存泄漏是指计算机可用内存的逐渐减少.当程序持续无法释放其使用的临时内存时就会发生.JavaScript的web应用也会经常遇到在原生 ...
在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
如何使用 Chrome 开发者工具 Performance tab 分析 JavaScript 的执行瓶颈
将下面这段代码插入 SAP Spartacus payment types Component 的 next 方法: console.time('Jerry');const N = 100000;le ...
Jerry和您聊聊Chrome开发者工具
Chrome开发者工具是Jerry日常工作使用的三大调试器之一.虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用.不信? 用Chrome打开我们常用的网站,按F12, ...
Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能[转]
我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的 ...

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

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

最新文章

热门文章