使用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的原创文章,请关注公众号"汪子熙":
相关文章
- javascript 基础_JavaScript高级编程
- chrome frame节点 取_Chrome Frame插件解决IE浏览器兼容问题
- javascript_JavaScript走向成熟
- JavaScript高级(5) 函数进阶
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- JavaScript 函数
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- javascript实现每秒执行一次的方法详解编程语言
- javascript汉字与拼音转换
- 编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
- javascript像素拼图实现代码
- jQuery与javascript对照学习获取父子前后元素实现代码
- JavaScript学习笔记(一)js基本语法
- 解决javascript:window.close()在chrome,Firefox下失效的问题
- javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
- javascript中直接引用Microsoft的COM生成Word
- javascript判断chrome浏览器的方法
- JavaScript实现防止网页被嵌入Frame框架的代码分享
- javascript面向对象之this关键词用法分析
- Javascript基础教程之JavaScript语法
- 使用JavaScript进行进制转换将字符串转换为十进制