Download pdf - Hacking Webkit & Its JavaScript Engines

Thursday, November 3, 2011

forget to run

the tests

Typical Scenario

This is awesome!


Ariya Hidayat & Jarred NichollsSencha

Twitter: @ariyahidayat @jarrednicholls

HACKING WEBKIT & ITS JAVASCRIPT ENGINES


What is WebKit?


Browser at a High LevelUser Interface

Browser Engine

Graphics Stack

Data P

ersistence

Render Engine

JavaScript Engine

Networking I/O


Browser at a High LevelUser Interface

Browser Engine

Graphics Stack

Data P

ersistence

JavaScript Engine

Networking I/O

Render Engine

WebKit


≠Thursday, November 3, 2011

⊂Thursday, November 3, 2011

WebKit isEVERYWHERE!


Even in your living room!


How?


Client InterfaceThursday, November 3, 2011

WebKit ComponentsRender Engine

WebCore

JavaScript Engine (JSC/V8)Client Interface

HTML

DOMCSS

SVG

Canvas


Port Abstraction

Client Interface

Networking I/O

GraphicsThemeEventsClipboard

Thread Geolocation Timer

API CallsEvents

Port(Chrome, Safari, etc.)


<input type=”number” />

WebKit Port

Paint me some spin

buttons, STAT!

I know how to do that!



WebKit

right there

please, kthx



Port

Piece of cake!

lookin’ sexy!



Theme Interfacebool paintInnerSpinButton(RenderObject*, const PaintInfo&, const IntRect&);



bool paintInnerSpinButton(RenderObject*, const PaintInfo&, const IntRect&);

Theme Interface

Client Interface

Theme

RenderTheme->paint()

PortpaintInnerSpinButton


Command LineWebKit


Demo


How’d you do that!?


Headless WebKit


“Headless”


Display

Paint

Layout

Normal Browser


Display

Paint

Layout

Headless

X


What’s in it for me?


What’s in it for me?Automated “smoke” tests

Continuous integration

Pixel-perfect regression tests

Web scraping

...


Demo


JavaScript Optimizations & Best

Practices


Benchmark.jsRobust benchmarking libraryCreated by Mathias Bynens and John-David Dalton

Platform/Browser independent

Supports high-precision timers

http://benchmarkjs.com


var suite = new Benchmark.Suite;// add testssuite.add('RegExp#test', function() { /o/.test('Hello World!');}).add('String#indexOf', function() { 'Hello World!'.indexOf('o') > -1;}).add('String#match', function() { !!'Hello World!'.match(/o/);})// add listeners.on('complete', function() { console.log('Fastest is ' + this.filter('fastest').pluck('name'));})// run.run();


jsperf.comOnline JavaScript benchmarking toolCreated by Mathias Bynens

Powered by Benchmark.js

Integrated with Browserscopehttp://www.browserscope.org/

Easy benchmark suite setup / teardown

http://jsperf.com


http://www.browserscope.org/

http://www.browserscope.org/

http://jsperf.com

http://jsperf.com

Best PracticesBatching DOM Operations

Reuse & Recycle DOM

Cache Variables

Optimal Enumeration

Dirty Math Hack


Batch DOM Operations


<span id="test"></span>var span = document.getElementById('test');

setup


span.innerHTML = '';for (var i = 0; i < 10; i++) { span.innerHTML += 'Line #' + (i+1) + '<br />';}

span.innerHTML = '';var buffer = '';for (var i = 0; i < 10; i++) { buffer += 'Line #' + (i+1) + '<br />';}span.innerHTML = buffer;

multiple ops

single op


span.innerHTML = '';for (var i = 0; i < 10; i++) { span.innerHTML += 'Line #' + (i+1) + '<br />';}

span.innerHTML = '';var buffer = '';for (var i = 0; i < 10; i++) { buffer += 'Line #' + (i+1) + '<br />';}span.innerHTML = buffer;

multiple ops

single op

fast

slow


Batch DOM Operations

http://jsperf.com/batch-dom-operations




Reuse & Recycle


Netflix Video Carousel


current pane

current pane


current pane

transition pane

transition pane current pane


That gives us...Lightweight DOM

Persistent JS References to DOM Elements

Faster / Less-Frequent Mark & Sweep by GC

Fewer Memory Leaks


Variable Caching


<script>Some = { Deeply: { Nested: { array: [1, 2, 3, 4, 5] } }};</script>

setup


for (var i = 0, x; i < Some.Deeply.Nested.array.length; i++) { x = Some.Deeply.Nested.array[i];}

var arr = Some.Deeply.Nested.array, ln = arr.length;for (var i = 0, x; i < ln; i++) { x = arr[i];}

no cache

cached var


for (var i = 0, x; i < Some.Deeply.Nested.array.length; i++) { x = Some.Deeply.Nested.array[i];}

var arr = Some.Deeply.Nested.array, ln = arr.length;for (var i = 0, x; i < ln; i++) { x = arr[i];}

no cache

cached var

fast

slow


Variable Caching

http://jsperf.com/variable-reference-caching




Enumeration


var i = 0, ln = myArray.length, x;for (; i < ln; i++) { x = myArray[i];}

for (var x in myArray) {

}

var i = 0, x;for (; x = myArray[i]; i++) {

}

var i = myArray.length, x;while (i--) { x = myArray[i];}

index < length

for in

test value truthiness test index truthiness


var i = 0, ln = myArray.length, x;for (; i < ln; i++) { x = myArray[i];}

for (var x in myArray) {

}

var i = 0, x;for (; x = myArray[i]; i++) {

}

var i = myArray.length, x;while (i--) { x = myArray[i];}

slowest

depends...? depends...?

index < length

for in

test value truthiness test index truthiness

fastest


Enumeration

http://jsperf.com/optimal-array-enumeration




Dirty Math Hack


<script>var myArray = [];for (var i = 0; i < 65535; i++) { myArray.push(Math.random() * 10000);}</script>

setup


var i = 0, ln = myArray.length;for (var x; i < ln; i++) { x = Math.round(myArray[i]);}

var i = 0, ln = myArray.length;for (var x; i < ln; i++) { x = (0.5 + myArray[i]) << 0;}

Math.round in loop

inline left bit shift


var i = 0, ln = myArray.length;for (var x; i < ln; i++) { x = Math.round(myArray[i]);}

var i = 0, ln = myArray.length;for (var x; i < ln; i++) { x = (0.5 + myArray[i]) << 0;}

Math.round in loop

inline left bit shift

fastslow


Math

http://jsperf.com/jit-part-2


http://jsperf.com/jit-part-2/2

http://jsperf.com/jit-part-2/2

Math - Inline Equivalents

Math.floor(x) === (x << 0)Math.round(x) === (0.5 + x << 0)Math.ceil(x) === (x === x << 0 ? x : x + 1 << 0)...


Don’t Trust Intuition!


Code Analysis


Demo


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



if (x == y) foo();



if (x == y) foo();

Danger!


Wrap Up


THANK YOU!


QUESTIONS?

ariya @ sencha.com

ariyahidayat

ariya.ofilabs.com

jarred @ sencha.com

jarrednicholls

about.me/jarrednicholls


Hardware AccelerationToday 3:00pm


Typical Dynamic Lang.

Parser Runtime

Interpreter


How does JavaScript talk to the DOM?


How does JavaScript talk to the DOM?

BINDINGS!


window.location.href


window.location.href
