Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript and the Browser: Under the Hood

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!

Ariya Hidayat

September 13, 2014
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

  1. Spaces are Ignored var answer = 42; var answer =

    42; var answer = 42 ; var answer = 42 ; same tokens
  2. Parsing JavaScript Program var answer = 42; alert(answer); Program Variable

    Declaration Call Expression Initializer Identifier answer 42 Arguments Identifier alert answer
  3. 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
  4. Stack-based Virtual Machine var answer = 6 * 7 PUSH

    6 PUSH 7 MULTIPLY SETLOCAL #0 hypothetical bytecodes
  5. Bytecode Execution: Step 1 PUSH 6 PUSH 7 MULTIPLY SETLOCAL

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

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

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

    #0 Bytecodes #10 #11 #12 Stack Locals #0 42 #1
  9. 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
  10. String#trim for Convenience ' jqcon ' 'jqcon' var msg =

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