使用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】数据类型
- Bootstrap3.0学习第十九轮(JavaScript插件——标签页)
- [SCSS] Convert SCSS Variable Arguments to JavaScript
- [Javascript] Javascript 'in' opreator
- javascript:innerText、innerHTML、textContent的区别(chrome 107.0.5304.62)
- javascript: 自定义鼠标拖动的滑块slider(chrome 105.0.5195.125)
- [Javascript] Broadcaster + Operator + Listener pattern -- 5. Merge (Example)
- Javascript是单线程的深入分析
- loadrunner12.55:脚本语言选择,C语言 or JavaScript
- javascript:监控video全屏时取消静音(chrome 107.0.5304.87)
- javascript: 复制对象时的深拷贝及浅拷贝(chrome 105.0.5195.125)
- 详解JavaScript严格模式
- 169. 使用 Chrome 开发者工具分析 SAP UI5 应用的 JavaScript 代码执行性能瓶颈
- Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
- 使用Chrome开发者工具分析JavaScript garbage collector(垃圾回收器)的实现原理
- 将Chrome调试器里的JavaScript变量保存成本地JSON文件
- 如何使用 Chrome 开发者工具 Performance tab 分析 JavaScript 的执行瓶颈
- 使用Chrome开发者工具研究JavaScript里函数的原生实现
- 利用Chrome开发者工具memory comparison分析一个时间段内的JavaScript代码内存占用率
- Javascript有几种继承方式?这下你该知道了