JavaScript and the Browser: Under the Hood

0284b8950e0f4a57bcc092d4dbb98d97?s=47 Ariya Hidayat
September 13, 2014

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!

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

September 13, 2014
Tweet

Transcript

  1. JavaScript and the Browser Under the Hood @ariyahidayat Sep 13,

    2014
  2. None
  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
  34. None
  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