专栏首页Jerry的SAP技术分享使用Chrome开发者工具研究JavaScript里函数的原生实现

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Visual Studio Code环境变量配置

    Setup will add Visual Studio Code to your %PATH%, so from the console you can ty...

    Jerry Wang
  • SAP CRM的订单模型移植到S/4HANA之后,到底做了哪些改进?

    Overall idea One order model consists of a series of objects with two different...

    Jerry Wang
  • How-To Create Extension using WebIDE

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • Maven简介

          在现实的企业中,以低成本、高效率、高质量的完成项目,不仅仅需要技术大牛,企业更加需要管理大牛,管理者只懂技术是远远不够的。当然,管理可以说有很多的方...

    MonroeCode
  • 结合人类和机器智能,利用社会媒体图像进行快速损伤评估(CS SI)

    快速损失评估是应对组织在灾害发生时执行的核心任务之一,目的是了解道路、桥梁和建筑物等基础设施的损失程度。 这项工作分析了社会媒体图像内容的有用性,以执行快速损害...

    用户7095611
  • How to Add an API to your Web Service

    Introduction APIs are a great way to extend your application, build a community,...

    张善友
  • How AI is Changing the Future of Web Development?

    How Artificial Intelligence is changing the future of web development? What is t...

    用户4822892
  • 资源 | Facebook开源DrQA的PyTorch实现:基于维基百科的问答系统

    选自GitHub 机器之心编译 参与:Panda 今年 4 月,斯坦福大学和 Facebook 人工智能研究所在 arXiv 发布了一个基于维基百科的开放域问题...

    机器之心
  • 翻译 | 深度学习机器72小时自学国际象棋达到大师水平

    本文在腾讯云+社区人工智能专栏首发, 为原创翻译文章. 文章正文部分以引用格式给出原文 导读 英文原文发布于2015年9月, 当时 Google 旗下 Dee...

    benny
  • 人机交互的社会适应框架(CS RO)

    在我们的日常生活中,我们习惯于与同龄人进行复杂的、个性化的、适应性的互动。 对于一个社交机器人来说,能够再现这种丰富的,类似人类的互动,它应该意识到我们的需求和...

    用户7095611

扫码关注云+社区

领取腾讯云代金券