使用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的原創文章,請關注公眾號"汪子熙":
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2703958/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 使用Chrome開發者工具研究JavaScript的垃圾回收機制ChromeJavaScript
- chrome開發者工具的使用Chrome
- 透過使用Chrome的開發者工具來學習JavaScriptChromeJavaScript
- chrome開發者工具使用Chrome
- Chrome 開發者工具裡的 CSS grid editorChromeCSS
- 原生javascript實現的節點複製cloneNode()函式用法JavaScript函式
- JavaScript裡的函式JavaScript函式
- javascript中的原生函式JavaScript函式
- chrome 開發者工具使用技巧Chrome
- Chrome DevTools:在 Profile 效能分析中顯示原生 javascript 函式ChromedevJavaScript函式
- Chrome開發者工具裡的一個隱藏技能:chrome://net-internalsChrome
- 使用原生javascript實現jquery的$(function(){ })JavaScriptjQueryFunction
- Chrome 開發者工具裡 JavaScript 檔名後面跟的 'eval' 是什麼含義ChromeJavaScript
- JavaScript的迭代函式與迭代函式的實現JavaScript函式
- Chrome開發者工具之JavaScript記憶體分析ChromeJavaScript記憶體
- javascript函式過載的實現JavaScript函式
- chrome開發者工具Chrome
- Chrome 開發者工具 Performances 皮膚裡的引數解讀ChromeORM
- Chrome 開發者工具的技巧Chrome
- 如何更專業的使用Chrome開發者工具Chrome
- 使用Chrome 開發者工具提取對應的字串Chrome字串
- 利用 Chrome 開發者工具遠端除錯 Android 中的原生 WebViewChrome除錯AndroidWebView
- 深入探索Chrome開發者工具:開發者的利器Chrome
- Chrome 開發者工具 workspace 的概念Chrome
- Chrome開發者工具的小技巧Chrome
- JavaScript學習筆記 - 原生函式JavaScript筆記函式
- 學習並運用JavaScript的原生函式JavaScript函式
- javascript如何實現函式過載JavaScript函式
- 什麼是 Chrome 開發者工具 performance 皮膚 Experience 裡的 Layout shiftChromeORM
- java如何實現javascript中的eval函式JavaScript函式
- 原生Javascript實現BindJavaScript
- Selenium系列教程-02 使用Chrome開發者工具Chrome
- chrome 開發者工具——前端實用功能總結Chrome前端
- 用表函式實現OTOP 工具函式
- chrome開發者工具 - 00 概述Chrome
- WEB開發者必備的7個JavaScript函式WebJavaScript函式
- JavaScript 工具函式大全(新)JavaScript函式
- 開個腦洞,如何使用 javascript 實現“仿函式”(Functor)?JavaScript函式