JavaScript Engines: Under the Hood

JavaScript Engines
Under the Hood

ARIYA HIDAYAT
ENGINEERING DIRECTOR, SENCHA

Monday, November 29, 2010

JavaScript Engines

Get It
See It
Tweak It


JavaScript Engines


JavaScript Engines
SpiderMonkey Opera Carakan
JavaScriptCore Microsoft JScript
V8 ...

Open Closed


JavaScript Engines
SpiderMonkey
JavaScriptCore
V8

Open


SpiderMonkey
First JavaScript engine
created by Brendan Eich

Written in C
Mostly used in Mozilla, Firefox, ...

License: MPL/LGPL/GPL


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

License: LGPL


Other Names of JSC
SquirrelFish
byte-code interpreter

SquirrelFish Extreme (SFX)
native/machine code

Nitro, Nitro Extreme
Apple’s marketing terms


Google V8
Written in C++
License: BSD

Used in Chromium (Google Chrome)


Qt Script
Uses JSC as the back-end
Does not power any web browser

Powerful bindings, debugger
Useful to make applications scriptable


Let’s Go
UNDER THE HOOD

Let’s Go Platform +
Compiler
UNDER THE HOOD

Get the real V8
svn checkout http://v8.googlecode.com/svn/trunk v8
cd v8

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


Build V8

scons sample=shell mode=release snapshot=on


Build V8


--jobs 4


Build V8


--jobs 4

arch=x64


Run your-favorite-
benchmark

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


Run your-favorite-
benchmark


garbage collector


Let’s Get DIRTY


Building Blocks

Parser
Runtime

Interpreter


Parser


Tokenize

var answer = 42;


Tokenize
identiﬁer number

var answer = 42;
keyword equal sign
semicolon


Look Ahead

greater than
>
>> right shift

>>> zero-ﬁlled right shift


Look Ahead

greater than >=
>
>> right shift >>=
>>> >>>=
zero-ﬁlled right shift


Tokenizer on V8

src/scanner.*


Tokenizer on V8

src/scanner.*

hand-written
state machine


Keyword vs Identiﬁer

instanceof instanceComponent

requires checking
9 chars


Keyword vs Identiﬁer

instanceof instanceComponent

requires checking
9 chars

a g h j klmopqxyz

Grammar
SourceElement :: (Statement)*

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


Syntax Tree
Variable Declaration

Identiﬁer
Literal Constant

answer 42

Another Syntax Tree
Branch

Condition Alternate
Consequent
age < 25 “old”
“young”

Parser on V8

src/parser.*


Parser on V8

src/parser.*

hand-written
recursive descent


Code Trace
Script::Compile

Script::New

internal::Compiler::Compile

internal::MakeFunctionInfo

internal::ParserApi::Parse


Interpreter


From Code to Execution

var answer = 42;
Declare a local object
Call it “answer”
Create a (small integer) number 42
Assign it to “answer”

Traverse and Run
Variable Declaration

Identiﬁer
Literal Constant

answer 42

Bytecode

Serialize tree traversal into
a list of “actions”


Machine Code

Compile the bytecodes into
machine instructions


Machine Code

Compile the bytecodes into
machine instructions

JIT (=just-in-time) compile


Machine Code on V8
Global

shell_g --print-code

When needed

shell_g --expose-debug-as deb


Machine Code on V8
Global

shell_g --print-code

When needed
deb.Debug.disassemble(f)

shell_g --expose-debug-as deb


“Lazy” Approach
foobar = function(x, y, z)
{
....
}

foobar(x, y, z);


“Lazy” Approach
foobar = function(x, y, z) Analyze the syntax
{
....
Mark the position of
} function ‘foobar’
foobar(x, y, z);


“Lazy” Approach
foobar = function(x, y, z) Analyze the syntax
{
....
Mark the position of
} function ‘foobar’
foobar(x, y, z);

Compile and run the
function ‘foobar’

Runtime


Date.now()

“native” JavaScript
world world


Let’s Go
OFF ROAD


Bridge


V8 Embedder’s Guide

http://code.google.com/apis/v8/embed.html

Handle: Local vs Persistent

{
HandleScope scope;

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

short lived

Handle: Local vs Persistent
long lived

{
HandleScope scope;

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

C++-side of Objects
Value Primitive Boolean
Date String
Object Number

Array
Function
External

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();
}


Demo
Code Formatter


Demo
Syntax Checker


Demo
Canvas-based Game


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

Demo
Syntax Parser


Ext.extend

declare

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

depend


Demo
Code Analyzer


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


"type": "IfStatement",
"test": {
"type": "BinaryExpression",
"operator": "==",
"left": {
"name": "x"
},
"right": {
"name": "y"
}
if (x == y) foo(); },
"consequent": {
"type": "ExpressionStatement",
"expression": {
Danger! "type": "CallExpression",
"callee": {
"name": "foo"
},
"arguments": []
}
},
"alternate": null


Debugging


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

(Remote) Debugging

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


(Remote) Debugging
application name

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

listening port


Proﬁling


Activate Proﬁler

scons prof=on ...

shell --prof ....

tools/mac-tick-processor v8.log


Function-Level Proﬁle
[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

ariya.blogspot.com

ariyahidayat


ADDENDUM


Get SpiderMonkey

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


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

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


Build SpiderMonkey
autoconf213
./configure --disable-debug --enable-optimize
make


Build JavaScriptCore

JavaScriptCore/JavaScriptCore.xcodeproj

JavaScriptCore

jsc


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

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



Run your-favorite-
benchmark
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 JavaScriptCore
qmake -r DerivedSources.pro
cd JavaScriptCore
make -f Makefile.DerivedSources
qmake && make
qmake jsc.pro && make


JavaScript Engines: Under the Hood

Recommended

Recommended

More Related Content

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

JavaScript Engines: Under the Hood