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
   

   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