Slide 1

Slide 1 text

JavaScript and the Browser Under the Hood @ariyahidayat Sep 13, 2014

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

JavaScript Engine 1 Browser Environment 2

Slide 4

Slide 4 text

JavaScript Engine

Slide 5

Slide 5 text

Parser Interpreter Run-time Libraries var answer = 42; alert(answer);

Slide 6

Slide 6 text

Parsing English “jQuery is cool” jQuery is cool separator word jQuery is cool Subject Adjective Verb

Slide 7

Slide 7 text

Tokenizing JavaScript var answer = 42; keyword identifier equal sign number semicolon

Slide 8

Slide 8 text

Spaces are Ignored var answer = 42; var answer = 42; var answer = 42 ; var answer = 42 ; same tokens

Slide 9

Slide 9 text

Parsing JavaScript Statement var answer = 42; Variable Declaration Initializer Identifier syntax tree

Slide 10

Slide 10 text

Parsing JavaScript Program var answer = 42; alert(answer); Program Variable Declaration Call Expression Initializer Identifier answer 42 Arguments Identifier alert answer

Slide 11

Slide 11 text

Syntax Tree Online Demo http://esprima.org/demo/parse.html

Slide 12

Slide 12 text

Interpreter Syntax Tree

Slide 13

Slide 13 text

Interpreting via Tree Traversal var answer = 6 * 7 Variable Declaration Initializer Identifier Multiply 6 7 Variable Declaration Initializer Multiply 6 7 Identifier answer: answer: 42

Slide 14

Slide 14 text

Execution Visualization http://int3.github.com/metajs

Slide 15

Slide 15 text

Performance Improvement Syntax Tree Bytecodes

Slide 16

Slide 16 text

Stack-based Virtual Machine var answer = 6 * 7 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 hypothetical bytecodes

Slide 17

Slide 17 text

Bytecode Execution PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 #11 #12 Stack Locals #0 #1

Slide 18

Slide 18 text

Bytecode Execution: Step 1 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 6 #11 #12 Stack Locals #0 #1

Slide 19

Slide 19 text

Bytecode Execution: Step 2 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 6 #11 7 #12 Stack Locals #0 #1

Slide 20

Slide 20 text

Bytecode Execution: Step 3 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 42 #11 #12 Stack Locals #0 #1

Slide 21

Slide 21 text

Bytecode Execution: Step 4 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 #11 #12 Stack Locals #0 42 #1

Slide 22

Slide 22 text

Reducing Work via Constant Folding var answer = 6 * 7 var answer = 42 What you wrote What happens under the hood PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 PUSH 42 SETLOCAL #0 Optimizer

Slide 23

Slide 23 text

Even More Speed-Up Syntax Tree Bytecodes Machine Code JIT (Just-in Time) compilation

Slide 24

Slide 24 text

Standard Run-time Libraries Array Date String Math Error

Slide 25

Slide 25 text

String#trim for Convenience ' jqcon ' 'jqcon' var msg = ' jqcon '; msg = msg.replace(/^\s+|\s+$/g, ''); var msg = ' jqcon '; msg = msg.trim();

Slide 26

Slide 26 text

Browser Environment

Slide 27

Slide 27 text

Firefox SpiderMonkey Internet Explorer JScript, Chakra Safari JavaScriptCore, Nitro Chrome V8

Slide 28

Slide 28 text

http://ariya.ofilabs.com/2011/05/on-the-story-of-browser-names.html Navigator Spyglass Mosaic KHTML + KJS Internet Explorer Konqueror Safari WebKit

Slide 29

Slide 29 text

JavaScript Engine inside Browser JavaScript Engine Web Browser DOM (Document Object Model)

Slide 30

Slide 30 text

The Curious Case of “Print” BASIC: PRINT "jqcon" Python: print 'jqcon' jqcon

Slide 31

Slide 31 text

“Print” in the Browser print('jqcon');

Slide 32

Slide 32 text

“Print” in Node.js

Slide 33

Slide 33 text

Global Object ‘window’ print('jqcon') → window.print('jqcon') alert('jqcon') → window.alert('jqcon') only exists in the browser

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

One Object, Two (Different) Worlds JavaScript Native window window alert(42) alert(42) window.alert('jqcon')

Slide 36

Slide 36 text

User Interaction JavaScript Native window window prompt(msg) prompt(msg) window.prompt('What’s your name')

Slide 37

Slide 37 text

Sychronized Object Model JavaScript Native window window document document title title window.document.title = 'Hello'

Slide 38

Slide 38 text

DOM Element Manipulation $('#caption').text('Hello') this.textContent = 'Hello' [object HTMLDivElement]

Slide 39

Slide 39 text

Final Words

Slide 40

Slide 40 text

Object Bindings Parser Interpreter Run-time Libraries

Slide 41

Slide 41 text

http://www.trollquotes.org/619-super-spider-bat-troll-quote/

Slide 42

Slide 42 text

shapesecurity.com @ariyahidayat Thank You