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



image.pngToday 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:



image.pngAnd 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”.


image.pngimage.pngimage.pngThe next step is to look into in array.js.

Launch url: https://cs.chromium.org/

Click this hyperlink:image.pngnow you can find the array.js file via path: src/v8/src/js/array.jsimage.pngThe 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:


image.pngJoin will call DoJoin:image.pngDoJoin 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. )


image.pngIf 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/


image.png

相关文章
|
8天前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
7天前
|
JavaScript 前端开发
JavaScript函数可以返回两个值
JavaScript函数可以返回两个值
|
7天前
|
自然语言处理 分布式计算 JavaScript
JavaScript函数
JavaScript函数
|
10天前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
15 3
|
8天前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
10天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
10天前
|
JavaScript 前端开发
js防抖函数返回值问题解决方案
本文介绍了如何在JavaScript中创建一个带有返回值的防抖函数,通过结合Promise来实现。这种防抖函数可以在事件触发一定时间后再执行函数,并能处理异步操作的返回值。文章提供了防抖函数的实现代码和如何在实际项目中使用该防抖函数的示例。
16 1
|
1月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
143 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
23天前
|
Web App开发 存储 前端开发
Chrome浏览器的跨域问题
Chrome浏览器的跨域问题
|
2月前
|
Web App开发
Chrome——谷歌浏览器chrome如何模拟其他客户端
Chrome——谷歌浏览器chrome如何模拟其他客户端
86 1
Chrome——谷歌浏览器chrome如何模拟其他客户端
下一篇
无影云桌面