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
Slide 23
Slide 23 text
Even More Speed-Up
Syntax Tree
Bytecodes Machine Code
JIT (Just-in Time)
compilation
Slide 24
Slide 24 text
Standard Run-time Libraries
Array
Date
String
Math
Error
Slide 25
Slide 25 text
String#trim for Convenience
' jqcon '
'jqcon'
var msg = ' jqcon ';
msg = msg.replace(/^\s+|\s+$/g, '');
var msg = ' jqcon ';
msg = msg.trim();
Slide 26
Slide 26 text
Browser Environment
Slide 27
Slide 27 text
Firefox SpiderMonkey
Internet Explorer JScript, Chakra
Safari JavaScriptCore, Nitro
Chrome V8
Slide 28
Slide 28 text
http://ariya.ofilabs.com/2011/05/on-the-story-of-browser-names.html
Navigator
Spyglass Mosaic
KHTML + KJS
Internet Explorer
Konqueror
Safari
WebKit
Slide 29
Slide 29 text
JavaScript Engine inside Browser
JavaScript
Engine
Web Browser
DOM
(Document Object
Model)
Slide 30
Slide 30 text
The Curious Case of “Print”
BASIC:
PRINT "jqcon"
Python:
print 'jqcon'
jqcon
Slide 31
Slide 31 text
“Print” in the Browser
print('jqcon');
Slide 32
Slide 32 text
“Print” in Node.js
Slide 33
Slide 33 text
Global Object ‘window’
print('jqcon') → window.print('jqcon')
alert('jqcon') → window.alert('jqcon')
only exists in the browser
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
One Object, Two (Different) Worlds
JavaScript Native
window window
alert(42) alert(42)
window.alert('jqcon')
Slide 36
Slide 36 text
User Interaction
JavaScript Native
window window
prompt(msg) prompt(msg)
window.prompt('What’s your name')
Slide 37
Slide 37 text
Sychronized Object Model
JavaScript Native
window window
document document
title title
window.document.title = 'Hello'
Slide 38
Slide 38 text
DOM Element Manipulation
$('#caption').text('Hello')
this.textContent = 'Hello'
[object HTMLDivElement]