Download - JavaScript Engines: Under the Hood

Monday, November 29, 2010

JavaScript EnginesUnder the Hood

ARIYA HIDAYATENGINEERING DIRECTOR, SENCHA


Get It

See It

Tweak It

JavaScript Engines


JavaScript Engines


SpiderMonkeyJavaScriptCore

V8

JavaScript Engines

Open

Opera CarakanMicrosoft JScript...

Closed


SpiderMonkeyJavaScriptCore

V8

JavaScript Engines

Open


SpiderMonkeyFirst JavaScript enginecreated by Brendan Eich

Written in CMostly used in Mozilla, Firefox, ...

License: MPL/LGPL/GPL


JavaScriptCore (JSC)Built into WebKitForked from KDE’s KJS a long time ago

License: LGPL


Other Names of JSCSquirrelFishbyte-code interpreter

SquirrelFish Extreme (SFX)native/machine code

Nitro, Nitro ExtremeApple’s marketing terms


Google V8Written in C++License: BSD

Used in Chromium (Google Chrome)


Qt ScriptUses JSC as the back-endDoes not power any web browser

Powerful bindings, debuggerUseful to make applications scriptable


Let’s Go UNDER THE HOOD


Let’s Go UNDER THE HOOD

Platform +Compiler


Get the real V8

svn checkout http://v8.googlecode.com/svn/trunk v8cd v8

git clone git://github.com/v8/v8.git v8cd v8


Build V8

scons sample=shell mode=release snapshot=on


Build V8


--jobs 4


Build V8


--jobs 4

arch=x64


perl sunspider --shell=/path/to/v8/directory/shell --args=-expose-gc

Run your-favorite-benchmark




garbage collector


Let’s Get DIRTY


Building Blocks

Parser

Interpreter

Runtime


Parser


Tokenize

var answer = 42;


Tokenize

var answer = 42;keyword equal sign

semicolon

identifier number


>>>

>>>

Look Ahead

greater than

right shift

zero-filled right shift


>>>

>>>

Look Ahead

greater than

right shift

zero-filled right shift

>=>>=>>>=


Tokenizer on V8

src/scanner.*


Tokenizer on V8

src/scanner.*

hand-writtenstate machine


Keyword vs Identifier

instanceof instanceComponent

requires checking 9 chars


Keyword vs Identifier

instanceof instanceComponent

requires checking 9 chars

a g h j k l m o p q x y zMonday, November 29, 2010

Grammar

SourceElement :: (Statement)*

FunctionDeclaration :: 'function' Identifier '(' FormalParameters ')' '{' FunctionBody '}'


Syntax Tree

Variable Declaration

IdentifierLiteral Constant

answer 42Monday, November 29, 2010

Another Syntax Tree

Condition Consequent

age < 25 “young”

Alternate

“old”

Branch


Parser on V8

src/parser.*


Parser on V8

src/parser.*

hand-writtenrecursive descent


Code Trace

Script::Compile

Script::New

internal::Compiler::Compile

internal::MakeFunctionInfo

internal::ParserApi::Parse


Interpreter


From Code to Execution

Declare a local objectCall it “answer”

Create a (small integer) number 42Assign it to “answer”

var answer = 42;


Traverse and Run

Variable Declaration

IdentifierLiteral Constant

answer 42Monday, November 29, 2010

Bytecode

Serialize tree traversal intoa list of “actions”


Machine Code

Compile the bytecodes intomachine instructions


Machine Code

JIT (=just-in-time) compile

Compile the bytecodes intomachine instructions


Machine Code on V8

shell_g --print-code

Global

When needed

shell_g --expose-debug-as deb


Machine Code on V8

shell_g --print-code

Global

When needed

shell_g --expose-debug-as deb

deb.Debug.disassemble(f)


“Lazy” Approach

foobar = function(x, y, z){....}

foobar(x, y, z);


“Lazy” Approach


foobar(x, y, z);

Analyze the syntaxMark the position of

function ‘foobar’


“Lazy” Approach


foobar(x, y, z);

Analyze the syntaxMark the position of

function ‘foobar’

Compile and run the function ‘foobar’


Runtime


Date.now()

JavaScriptworld

“native”world


Let’s GoOFF ROAD


Bridge


V8 Embedder’s Guide

http://code.google.com/apis/v8/embed.htmlMonday, November 29, 2010

Handle: Local vs Persistent

{ HandleScope scope;

Handle<Value> foobar = .... .... ....}


Handle: Local vs Persistent

{ HandleScope scope;

Handle<Value> foobar = .... .... ....}

long lived

short lived


C++-side of Objects

Value Primitive BooleanStringNumber

Date

Object

Array

Function

ExternalMonday, November 29, 2010

Expose a Variable

Handle<ObjectTemplate> global = ObjectTemplate::New();global->Set("foobar", String::New(“Hello”));


Expose a Function

Handle<FunctionTemplate> systemObject = FunctionTemplate::New();systemObject->Set(String::New("exit"), FunctionTemplate::New(system_exit)->GetFunction());

static Handle<Value> system_exit(const Arguments& args){ int status = args[0]->Int32Value(); ::exit(status); return Undefined();}


DemoCode Formatter


DemoSyntax Checker


DemoCanvas-based Game


http://10k.aneventapart.com/Entry/392




DemoSyntax Parser


Ext.extend

Ext.ComponentFoo = Ext.extend(Ext.ComponentBar, ....

depend

declare


DemoCode Analyzer


"type": "IfStatement","test": { "type": "BinaryExpression", "operator": "==", "left": { "type": "Identifier", "name": "x" }, "right": { "type": "Identifier", "name": "y" } }, "consequent": { "type": "ExpressionStatement", "expression": { "type": "CallExpression", "callee": { "type": "Identifier", "name": "foo" }, "arguments": [] } }, "alternate": null

if (x == y) foo();


"type": "IfStatement","test": { "type": "BinaryExpression", "operator": "==", "left": { "type": "Identifier", "name": "x" }, "right": { "type": "Identifier", "name": "y" } }, "consequent": { "type": "ExpressionStatement", "expression": { "type": "CallExpression", "callee": { "type": "Identifier", "name": "foo" }, "arguments": [] } }, "alternate": null

if (x == y) foo();

Danger!


Debugging


http://code.google.com/p/chromedevtoolsMonday, November 29, 2010

http://code.google.com/p/chromedevtools

http://code.google.com/p/chromedevtools

(Remote) Debugging

v8::Debug::EnableAgent("foobar", 5858);


(Remote) Debugging

v8::Debug::EnableAgent("foobar", 5858);

listening port

application name


Profiling


Activate Profiler

scons prof=on ...

shell --prof ....

tools/mac-tick-processor v8.log


Function-Level Profile [JavaScript]: ticks total nonlib name 3125 5.9% 5.9% LazyCompile: am3 crypto.js:108 1036 2.0% 2.0% KeyedLoadIC: A keyed load IC from the snapshot 386 0.7% 0.7% LazyCompile: StringReplaceRegExp native string.js:243 362 0.7% 0.7% LazyCompile: Scheduler.schedule richards.js:188 326 0.6% 0.6% LazyCompile: one_way_unify1_nboyer earley-boyer.js:3635 301 0.6% 0.6% LazyCompile: exec native regexp.js:156 280 0.5% 0.5% LazyCompile: TaskControlBlock.isHeldOrSuspended richards.js:309 279 0.5% 0.5% KeyedStoreIC: A keyed store IC from the snapshot 278 0.5% 0.5% LazyCompile: rewrite_nboyer earley-boyer.js:3604 259 0.5% 0.5% LazyCompile: BuildResultFromMatchInfo native regexp.js:121 244 0.5% 0.5% LazyCompile: TaskControlBlock.run richards.js:324 186 0.4% 0.4% Stub: Instanceof


THANK YOU!


QUESTIONS?

ariya @ sencha.com

ariyahidayat

ariya.blogspot.com


ADDENDUM


Get SpiderMonkey

hg clone http://hg.mozilla.org/mozilla-central/cd mozilla-central/js/src


Get JavaScriptCoresvn checkout http://svn.webkit.org/repository/webkit/trunk webkitcd webkit/JavaScriptCore

git clone git://git.webkit.org/WebKit.gitcd WebKit/JavaScriptCore


Build SpiderMonkey

autoconf213./configure --disable-debug --enable-optimizemake


Build JavaScriptCore

JavaScriptCore/JavaScriptCore.xcodeproj

JavaScriptCore

jsc


perl sunspider --shell=/path/to/mozilla-central/js/src/build-release/js --args=-j

perl sunspider --shell=/path/to/webkit/JavaScriptCore/jsc




perl sunspider --shell=/path/to/mozilla-central/js/src/build-release/js --args=-j

perl sunspider --shell=/path/to/webkit/JavaScriptCore/jsc



garbage collector


Build JavaScriptCoreqmake -r DerivedSources.procd JavaScriptCoremake -f Makefile.DerivedSourcesqmake && makeqmake jsc.pro && make


Download - JavaScript Engines: Under the Hood

Top Related