使用Chrome开发者工具研究JavaScript里函数的原生实现-阿里云开发者社区

开发者社区> jerrywangsap> 正文

使用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/

本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《JavaScript启示录》——1.5 使用new操作符实例化构造函数
构造函数从根本上说是用于创建预配置对象的饼干模具模板。以String()为例,这个函数在与new操作符[new String('foo') ]一起使用时会创建基于String()模板的字符串实例。让我们来看一个示例。
1305 0
升级 | Java开源诊断工具 Arthas 发布v3.1.0
Arthas 自2018年9月份上线以来「传送门」,已收获近万个star,感谢开发者们的认可。此次Arthas 3.1.0版本的发布,不仅带来大家投票出来的新LOGO,还带来强大的新功能和更好的易用性,下面一一介绍。
8218 0
使用 TypeScript 改造构建工具及测试用例
最近的一段时间一直在搞TypeScript,一个巨硬出品、赋予JavaScript语言静态类型和编译的语言。 第一个完全使用TypeScript重构的纯Node.js项目已经上线并稳定运行了。 第二个前后端的项目目前也在重构中,关于前端基于webpack的TypeScript套路之前也有提到过:TypeScript在react项目中的实践。
1446 0
CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)
网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大堆代码说明问题,不便于学习与使用。
905 0
chrome浏览器使用记录
出现错误 net::ERR_BLOCKED_BY_CLIENT 出现这个错误一般是因为chrome安装了adblocker等这样的插件,这些插件会把路径及文件名中包含广告字样的文字禁止掉,比如:advert,ads,advertise等。
723 0
《实践篇--阿里迁云工具使用》
《实践篇--阿里迁云工具使用》
1382 0
JavaScript创建对象(四)——组合使用构造函数和原型模式
在JavaScript创建对象(三)——原型模式中,我们阐述了原型模式存在的两个问题:一是没办法通过构造函数初始化对象属性,二是共享引用类型的数据导致数据错乱。
825 0
vc绘图工具、颜色和绘图函数
1、画笔 有两种形式创建画笔 一是直接通过GetStockObject()函数来调用 二是通过创建画笔来调用  HPEN CreatePen(  int fnPenStyle,    // pen style  int nWidth,        // pen width  COLORREF cr...
733 0
javascript callback函数的理解与使用
最近做的一个项目中用到了callback函数,于是就研究了下总结下我对javascript callback的理解 首先从callback的字面翻译“回调” 可以理解这是一个函数被调用的机制 当我们遇到一个名词首先可能是百度谷歌搜索看官方是怎么解释的下面是维基百科对回调的定义: a callba...
513 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载