JavaScript and the Browser: Under the Hood

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