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. 2.
  2. 8.

    Spaces are Ignored var answer = 42; var answer =

    42; var answer = 42 ; var answer = 42 ; same tokens
  3. 10.

    Parsing JavaScript Program var answer = 42; alert(answer); Program Variable

    Declaration Call Expression Initializer Identifier answer 42 Arguments Identifier alert answer
  4. 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
  5. 16.

    Stack-based Virtual Machine var answer = 6 * 7 PUSH

    6 PUSH 7 MULTIPLY SETLOCAL #0 hypothetical bytecodes
  6. 18.

    Bytecode Execution: Step 1 PUSH 6 PUSH 7 MULTIPLY SETLOCAL

    #0 Bytecodes #10 6 #11 #12 Stack Locals #0 #1
  7. 19.

    Bytecode Execution: Step 2 PUSH 6 PUSH 7 MULTIPLY SETLOCAL

    #0 Bytecodes #10 6 #11 7 #12 Stack Locals #0 #1
  8. 20.

    Bytecode Execution: Step 3 PUSH 6 PUSH 7 MULTIPLY SETLOCAL

    #0 Bytecodes #10 42 #11 #12 Stack Locals #0 #1
  9. 21.

    Bytecode Execution: Step 4 PUSH 6 PUSH 7 MULTIPLY SETLOCAL

    #0 Bytecodes #10 #11 #12 Stack Locals #0 42 #1
  10. 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
  11. 25.

    String#trim for Convenience ' jqcon ' 'jqcon' var msg =

    ' jqcon '; msg = msg.replace(/^\s+|\s+$/g, ''); var msg = ' jqcon '; msg = msg.trim();
  12. 34.