JavaScript and the Browser: Under the Hood

Presented at jQuery Conference Chicago, Sep 13, 2014.

A browser's JavaScript engine can seem like a magical black box. During this session, we'll show you how it works from 10,000 feet and give you the understanding of the main building blocks of a JavaScript engine: the parser, the virtual machine, and the run-time libraries. In addition, the complicated relationship with the web browser with a JavaScript environment will be exposed. If you are curious as to what happens under the hood when the browser modifies the DOM, handles scripted user interaction, or executes a piece of jQuery code, don’t miss this session!

Transcript

1. JavaScript and the Browser Under the Hood @ariyahidayat Sep 13, 2014
3. JavaScript Engine 1 Browser Environment 2
4. JavaScript Engine
5. Parser Interpreter Run-time Libraries var answer = 42; alert(answer);
6. Parsing English “jQuery is cool” jQuery is cool separator word jQuery is cool Subject Adjective Verb
7. Tokenizing JavaScript var answer = 42; keyword identifier equal sign number semicolon
8. Spaces are Ignored var answer = 42; var answer = 42; var answer = 42 ; var answer = 42 ; same tokens
9. Parsing JavaScript Statement var answer = 42; Variable Declaration Initializer Identifier syntax tree
10. Parsing JavaScript Program var answer = 42; alert(answer); Program Variable Declaration Call Expression Initializer Identifier answer 42 Arguments Identifier alert answer
11. Syntax Tree Online Demo http://esprima.org/demo/parse.html
12. Interpreter Syntax Tree
13. 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
14. Execution Visualization http://int3.github.com/metajs
15. Performance Improvement Syntax Tree Bytecodes
16. Stack-based Virtual Machine var answer = 6 * 7 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 hypothetical bytecodes
17. Bytecode Execution PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 #11 #12 Stack Locals #0 #1
18. Bytecode Execution: Step 1 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 6 #11 #12 Stack Locals #0 #1
19. Bytecode Execution: Step 2 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 6 #11 7 #12 Stack Locals #0 #1
20. Bytecode Execution: Step 3 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 42 #11 #12 Stack Locals #0 #1
21. Bytecode Execution: Step 4 PUSH 6 PUSH 7 MULTIPLY SETLOCAL #0 Bytecodes #10 #11 #12 Stack Locals #0 42 #1
22. 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
23. Even More Speed-Up Syntax Tree Bytecodes Machine Code JIT (Just-in Time) compilation
24. Standard Run-time Libraries Array Date String Math Error
25. String#trim for Convenience ' jqcon ' 'jqcon' var msg = ' jqcon '; msg = msg.replace(/^\s+|\s+$/g, ''); var msg = ' jqcon '; msg = msg.trim();
26. Browser Environment
27. Firefox SpiderMonkey Internet Explorer JScript, Chakra Safari JavaScriptCore, Nitro Chrome V8
28. http://ariya.ofilabs.com/2011/05/on-the-story-of-browser-names.html Navigator Spyglass Mosaic KHTML + KJS Internet Explorer Konqueror Safari WebKit
29. JavaScript Engine inside Browser JavaScript Engine Web Browser DOM (Document Object Model)
30. The Curious Case of “Print” BASIC: PRINT "jqcon" Python: print 'jqcon' jqcon
31. “Print” in the Browser print('jqcon');
32. “Print” in Node.js
33. Global Object ‘window’ print('jqcon') → window.print('jqcon') alert('jqcon') → window.alert('jqcon') only exists in the browser
35. One Object, Two (Different) Worlds JavaScript Native window window alert(42) alert(42) window.alert('jqcon')
36. User Interaction JavaScript Native window window prompt(msg) prompt(msg) window.prompt('What’s your name')
37. Sychronized Object Model JavaScript Native window window document document title title window.document.title = 'Hello'
38. DOM Element Manipulation $('#caption').text('Hello') this.textContent = 'Hello' [object HTMLDivElement]
39. Final Words
40. Object Bindings Parser Interpreter Run-time Libraries
41. http://www.trollquotes.org/619-super-spider-bat-troll-quote/
42. shapesecurity.com @ariyahidayat Thank You