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

JavaScript and the Browser: Under the Hood

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. JavaScript and the Browser
    Under the Hood
    @ariyahidayat
    Sep 13, 2014

    View Slide

  2. View Slide

  3. JavaScript Engine
    1
    Browser Environment
    2

    View Slide

  4. JavaScript Engine

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. Interpreter
    Syntax Tree

    View Slide

  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

    View Slide

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

    View Slide

  15. Performance Improvement
    Syntax Tree
    Bytecodes

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  24. Standard Run-time Libraries
    Array
    Date
    String
    Math
    Error

    View Slide

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

    View Slide

  26. Browser Environment

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. “Print” in Node.js

    View Slide

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

    View Slide

  34. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. Final Words

    View Slide

  40. Object Bindings
    Parser
    Interpreter
    Run-time
    Libraries

    View Slide

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

    View Slide

  42. shapesecurity.com
    @ariyahidayat
    Thank You

    View Slide