使用Chrome開發者工具研究JavaScript裡函式的原生實現

i042416發表於2020-07-12

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.


使用Chrome開發者工具研究JavaScript裡函式的原生實現


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:


使用Chrome開發者工具研究JavaScript裡函式的原生實現


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


使用Chrome開發者工具研究JavaScript裡函式的原生實現


Switch display style from Chart to Tree:


使用Chrome開發者工具研究JavaScript裡函式的原生實現


From here the callstack of native implementation of toString is displayed:


使用Chrome開發者工具研究JavaScript裡函式的原生實現


The next step is to look into in array.js. Launch url:  cs.chromium.org/  Click this hyperlink:


使用Chrome開發者工具研究JavaScript裡函式的原生實現


now you can find the array.js file via path: src/v8/src/js/array.js


使用Chrome開發者工具研究JavaScript裡函式的原生實現


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:


使用Chrome開發者工具研究JavaScript裡函式的原生實現


Join will call DoJoin:


使用Chrome開發者工具研究JavaScript裡函式的原生實現


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. )


使用Chrome開發者工具研究JavaScript裡函式的原生實現


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:  chromium.googlesource.com


使用Chrome開發者工具研究JavaScript裡函式的原生實現


要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":

使用Chrome開發者工具研究JavaScript裡函式的原生實現


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2703958/,如需轉載,請註明出處,否則將追究法律責任。

相關文章