High Performance JavaScript 2011

Nicholas Zakas
Nicholas ZakasFront End Guy at Box
••
High Performance JavaScript,[object Object],Nicholas C. Zakas| nczonline.net,[object Object]
Who's this guy?,[object Object],Co-Creator csslint.net,[object Object],Contributor,,[object Object],Creator of YUI Test,[object Object],Ex-tech lead,[object Object],Yahoo!,[object Object],Author,[object Object],Lead Author,[object Object],Contributor,[object Object],Lead Author,[object Object]
@slicknet,[object Object],(complaints: @brendaneich),[object Object]
Does JavaScript performance matter?,[object Object]
High Performance JavaScript 2011
High Performance JavaScript 2011
High Performance JavaScript 2011
All browsers now haveoptimizing JavaScript engines,[object Object],Tracemonkey/,[object Object],JaegarMonkey,[object Object],(3.5+),[object Object],V8,[object Object],(all),[object Object],Nitro,[object Object],(4+),[object Object],Chakra,[object Object],(9+),[object Object],Karakan,[object Object],(10.5+),[object Object]
http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html,[object Object]
Old computers ran slow applications,[object Object],Small amounts of CPU power and memory,[object Object]
New computers are generally faster but,[object Object],slow applications still exist,[object Object],More CPU + more memory = less disciplined application development,[object Object]
High Performance JavaScript 2011
Oh yeah, one more thing,[object Object]
High Performance JavaScript 2011
High Performance JavaScript 2011
High Performance JavaScript 2011
It's still possible to write slow JavaScript,[object Object]
JavaScript performancedirectlyaffects user experience,[object Object]
The UI Threadaka Browser Event Loop,[object Object]
The browser UI thread is responsible for,[object Object],both UI updates and JavaScript execution,[object Object],Only one can happen at a time,[object Object]
Jobs for UI updates and JavaScript execution,[object Object],are added to a UI queue,[object Object],Each job must wait in line for its turn to execute,[object Object]
<button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button>,[object Object],<script type="text/javascript">,[object Object],window.onload = function(){,[object Object], document.getElementById("btn").onclick = function(){,[object Object],//do something,[object Object], };,[object Object],};,[object Object],</script>,[object Object]
Before Click,[object Object],UI Thread,[object Object],time,[object Object],UI Queue,[object Object]
When Clicked,[object Object],UI Thread,[object Object],time,[object Object],UI Queue,[object Object],UI Update,[object Object],onclick,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],onclick,[object Object],Draw down state,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],onclick,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],onclick,[object Object],UI Update,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],Draw up state,[object Object]
No UI updates while JavaScript is executing,[object Object]
JavaScript May Cause UI Update,[object Object],<button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button>,[object Object],<script type="text/javascript">,[object Object],window.onload = function(){,[object Object], document.getElementById("btn").onclick = function(){,[object Object], var div = document.createElement(“div”);,[object Object], div.className = “tip”;,[object Object], div.innerHTML = “You clicked me!”;,[object Object], document.body.appendChild(div);,[object Object], };,[object Object],};,[object Object],</script>,[object Object]
A UI update must use the latest info available,[object Object]
Long-running JavaScript=Unresponsive UI,[object Object]
Responsive UI,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],time,[object Object]
Unresponsive UI,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],time,[object Object]
The longer JavaScript runs,the worse the user experience,[object Object]
The runaway script timer prevents JavaScript,[object Object],from running for too long,[object Object],Each browser imposes its own limit (except Opera),[object Object]
Internet Explorer,[object Object]
Firefox,[object Object]
Safari,[object Object]
Chrome,[object Object]
High Performance JavaScript 2011
Runaway Script Timer Limits,[object Object],Internet Explorer: 5 million statements,[object Object],Firefox: 10 seconds,[object Object],Safari: 5 seconds,[object Object],Chrome: Unknown, hooks into normal crash control mechanism,[object Object],Opera: none,[object Object]
How Long Is Too Long?,[object Object],“0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.”,[object Object],- Jakob Nielsen,[object Object]
Translation:No single JavaScript job should execute for more than 100ms to ensure a responsive UI,[object Object]
Recommendation:Limit JavaScript execution to no more than 50msmeasured on IE6 :),[object Object]
Does JIT compiling help?,[object Object]
Interpreted JavaScript,[object Object],UI Thread,[object Object],Interpret,[object Object],time,[object Object]
JITed JavaScript (1st Run),[object Object],UI Thread,[object Object],Compile,[object Object],Execute,[object Object],time,[object Object]
JITed JavaScript (After 1st Run),[object Object],UI Thread,[object Object],Execute,[object Object],time,[object Object]
Loadtime TechniquesDon't let JavaScript interfere with page load performance,[object Object]
During page load, JavaScript takes more time on the UI thread,[object Object]
<!doctype html>,[object Object],<html>,[object Object],<head>,[object Object], <title>Example</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Hello world!</p>,[object Object],<script src="foo.js"></script>,[object Object], <p>See ya!</p>,[object Object],</body>,[object Object],</html>,[object Object]
Result,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],time,[object Object]
Result,[object Object],UI Thread,[object Object],foo.js,[object Object],See ya!,[object Object],Hello world!,[object Object],time,[object Object]
Result,[object Object],UI Thread,[object Object],Download,[object Object],See ya!,[object Object],Hello world!,[object Object],Parse,[object Object],Run,[object Object],time,[object Object],The UI thread needs to wait for the script to,[object Object],download, parse, and run before continuing,[object Object]
Result,[object Object],UI Thread,[object Object],Download,[object Object],See ya!,[object Object],Hello world!,[object Object],Parse,[object Object],Run,[object Object],Variable,[object Object],Constant,[object Object],Download time takes the longest and is variable,[object Object]
Translation:The page doesn't render while JavaScript is downloading, parsing, or executing during page load,[object Object]
<!doctype html>,[object Object],<html>,[object Object],<head>,[object Object], <title>Example</title>,[object Object],</head>,[object Object],<body>,[object Object],<script src="foo.js"></script>,[object Object], <p>Hello world!</p>,[object Object],<script src="bar.js"></script>,[object Object], <p>See ya!</p>,[object Object],<script src="baz.js"></script>,[object Object], <p>Uh oh!</p>,[object Object],</body>,[object Object],</html>,[object Object]
Result,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],JavaScript,[object Object],JavaScript,[object Object],time,[object Object],The more scripts to download in between UI,[object Object],updates, the longer the page takes to render,[object Object]
Technique #1: Put scripts at the bottom,[object Object]
High Performance JavaScript 2011
<!doctype html>,[object Object],<html>,[object Object],<head>,[object Object], <title>Example</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Hello world!</p>,[object Object], <p>See ya!</p>,[object Object],<script src="foo.js"></script>,[object Object],</body>,[object Object],</html>,[object Object]
Put Scripts at Bottom,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],JavaScript,[object Object],JavaScript,[object Object],time,[object Object],Even if there are multiple scripts, the page,[object Object],renders quickly,[object Object]
Technique #2: Combine JavaScript files,[object Object]
<!doctype html>,[object Object],<html>,[object Object],<head>,[object Object], <title>Example</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Hello world!</p>,[object Object], <p>See ya!</p>,[object Object],<script src="foo.js"></script>,[object Object], <script src="bar.js"></script>,[object Object], <script src="baz.js"></script>,[object Object],</body>,[object Object],</html>,[object Object]
UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],JavaScript,[object Object],JavaScript,[object Object],time,[object Object],Each script has overhead of downloading,[object Object]
UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],time,[object Object],Combining all of the files limits the network,[object Object],overhead and gets scripts onto the page faster,[object Object]
<!doctype html>,[object Object],<html>,[object Object],<head>,[object Object], <title>Example</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Hello world!</p>,[object Object], <p>See ya!</p>,[object Object], <script src="foo-and-bar-and-baz.js"></script>,[object Object],</body>,[object Object],</html>,[object Object]
Technique #3: Load scripts dynamically,[object Object]
Basic Technique,[object Object],var script = document.createElement("script"),,[object Object], body;,[object Object],script.type = "text/javascript";,[object Object],script.src = "foo.js";,[object Object],body.insertBefore(script, body.firstChild);,[object Object],Dynamically loaded scripts are non-blocking,[object Object]
Downloads no longer block the UI thread,[object Object]
<!doctype html>,[object Object],<html>,[object Object],<head>,[object Object], <title>Example</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Hello world!</p>,[object Object],<script src="foo.js"></script>,[object Object], <p>See ya!</p>,[object Object],</body>,[object Object],</html>,[object Object]
Using HTML <script>,[object Object],UI Thread,[object Object],Download,[object Object],See ya!,[object Object],Hello world!,[object Object],Parse,[object Object],Run,[object Object],time,[object Object]
<!doctype html>,[object Object],<html>,[object Object],<head>,[object Object], <title>Example</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Hello world!</p>,[object Object], <script>,[object Object], var script = document.createElement("script"),,[object Object], body = document.body;,[object Object], script.type = "text/javascript";,[object Object], script.src = "foo.js";,[object Object], body.insertBefore(script, body.firstChild);,[object Object], </script>,[object Object], <p>See ya!</p><!-- more content -->,[object Object],</body>,[object Object],</html>,[object Object]
Using Dynamic Scripts,[object Object],UI Thread,[object Object],See ya!,[object Object],Hello world!,[object Object],UI Update,[object Object],Run,[object Object],time,[object Object],Download,[object Object],Parse,[object Object],Only code execution happens on the UI thread,,[object Object],which means less blocking of UI updates,[object Object]
function loadScript(url, callback){var script = document.createElement("script"), body = document.body;script.type = "text/javascript";,[object Object],if (script.readyState){ //IE <= 8 script.onreadystatechange = function(){if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } };} else { //Others script.onload = function(){ callback(); };}script.src = url;body.insertBefore(script, body.firstChild);,[object Object],},[object Object]
Usage,[object Object],loadScript("foo.js", function(){,[object Object], alert("Loaded!");,[object Object],});,[object Object]
Timing Note:Script execution begins immediately after download and parse – timing of execution is not guaranteed,[object Object]
Technique #4: Defer scripts,[object Object]
<!doctype html>,[object Object],<html>,[object Object],<head>,[object Object], <title>Example</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Hello world!</p>,[object Object],<script defer src="foo.js"></script>,[object Object], <p>See ya!</p>,[object Object], <!-- even more markup -->,[object Object],</body>,[object Object],</html>,[object Object]
Support for <script defer>,[object Object],?,[object Object],5.0,[object Object],3.5,[object Object],7.0,[object Object],4.0,[object Object]
Deferred scripts begin to download immediately, but don't execute until all UI updates complete,[object Object]
Using <script defer>,[object Object],UI Thread,[object Object],See ya!,[object Object],Hello world!,[object Object],More UI,[object Object],Run,[object Object],More UI,[object Object],time,[object Object],Download,[object Object],Parse,[object Object],Similar to dynamic script nodes, but with a,[object Object],guarantee that execution will happen last,[object Object]
Timing Note:Although scripts always execute after UI updates complete, the order of multiple <script defer> scripts is not guaranteed across browsers,[object Object]
Technique #5: Asynchronous scripts,[object Object]
<!doctype html>,[object Object],<html>,[object Object],<head>,[object Object], <title>Example</title>,[object Object],</head>,[object Object],<body>,[object Object], <p>Hello world!</p>,[object Object],<script async src="foo.js"></script>,[object Object], <p>See ya!</p>,[object Object], <!-- even more markup -->,[object Object],</body>,[object Object],</html>,[object Object]
Support for <script async>,[object Object],?,[object Object],5.0,[object Object],3.6,[object Object],7.0,[object Object],10,[object Object]
Asynchronous scripts behave a lot like dynamic scripts,[object Object]
Using <script async>,[object Object],UI Thread,[object Object],See ya!,[object Object],Hello world!,[object Object],UI Update,[object Object],Run,[object Object],time,[object Object],Download,[object Object],Parse,[object Object],Download begins immediately and execution is,[object Object],slotted in at first available spot,[object Object]
Note:Order of execution is explicitly not preserved for asynchronous scripts,[object Object]
Runtime TechniquesWays to ensure JavaScript doesn't run away,[object Object]
function processArray(items, process, callback){,[object Object],for (var i=0,len=items.length; i < len; i++){,[object Object], process(items[i]);,[object Object], },[object Object], callback();,[object Object],},[object Object]
Technique #1: Timers,[object Object]
//create a new timer and delay by 500ms,[object Object],setTimeout(function(){,[object Object],//code to execute here,[object Object],}, 500);,[object Object],setTimeout() schedules a function to be added to the UI queue after a delay,[object Object]
function timedProcessArray(items, process, callback){,[object Object],//create a clone of the original var todo = items.concat();,[object Object], setTimeout(function(){,[object Object],var start = +new Date();,[object Object],do {,[object Object], process(todo.shift());,[object Object], } while (todo.length > 0 &&,[object Object], (+new Date() - start < 50));,[object Object],if (todo.length > 0){,[object Object], setTimeout(arguments.callee, 25);,[object Object], } else {,[object Object], callback(items);,[object Object], },[object Object], }, 25);,[object Object],},[object Object]
When Clicked,[object Object],UI Thread,[object Object],time,[object Object],UI Queue,[object Object],UI Update,[object Object],onclick,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],onclick,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],onclick,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object]
After 25ms,[object Object],UI Thread,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object],JavaScript,[object Object]
After 25ms,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object]
After Another 25ms,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object],JavaScript,[object Object]
After Another 25ms,[object Object],UI Thread,[object Object],JavaScript,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object]
Technique #2: Script Yielding,[object Object],NEW!,[object Object]
High Performance JavaScript 2011
//delay a function until after UI updates are done,[object Object],setImmediate(function(){,[object Object],//code to execute here,[object Object],});,[object Object],setImmediate() adds code to the UI queue after pending UI updates are finished,[object Object]
Support for Script Yielding,[object Object],?,[object Object],?,[object Object],?,[object Object],?,[object Object],10,[object Object],msSetIntermediate(),[object Object]
functionyieldingProcessArray(items, process, callback){,[object Object],//create a clone of the originalvartodo = items.concat();,[object Object],setImmediate(function(){,[object Object],var start = +new Date();,[object Object],do {,[object Object], process(todo.shift());,[object Object], } while (todo.length > 0 &&,[object Object], (+new Date() - start < 50));,[object Object],if (todo.length > 0){,[object Object],setImmediate(arguments.callee);,[object Object], } else {,[object Object], callback(items);,[object Object], },[object Object],});,[object Object],},[object Object]
When Clicked,[object Object],UI Thread,[object Object],time,[object Object],UI Queue,[object Object],UI Update,[object Object],onclick,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],onclick,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],onclick,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object]
After Last UI Update,[object Object],UI Thread,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object],JavaScript,[object Object]
After Last UI Update,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object]
No Other UI Updates,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object],JavaScript,[object Object]
No Other UI Updates,[object Object],UI Thread,[object Object],JavaScript,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object]
Technique #3: Web Workers,[object Object]
High Performance JavaScript 2011
Support for Web Workers,[object Object],10.6,[object Object],4.0,[object Object],3.5,[object Object],4.0,[object Object],10,[object Object]
Web Workers,[object Object],Asynchronous JavaScript execution,[object Object],Execution happens outside the UI thread,[object Object],Doesn’t block UI updates,[object Object],Data-Driven API,[object Object],Data is serialized going into and out of the worker,[object Object],No access to DOM or BOM,[object Object],Separate execution environment,[object Object]
//in page,[object Object],var worker = new Worker("process.js");,[object Object],worker.onmessage = function(event){,[object Object], useData(event.data);,[object Object],};,[object Object],worker.postMessage(values);,[object Object],//in process.js,[object Object],self.onmessage = function(event){,[object Object],var items = event.data;,[object Object],for (var i=0,len=items.length; i < len; i++){,[object Object], process(items[i]);,[object Object], },[object Object], self.postMessage(items);,[object Object],};,[object Object]
When Clicked,[object Object],UI Thread,[object Object],time,[object Object],UI Queue,[object Object],UI Update,[object Object],onclick,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],onclick,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],onclick,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],onclick,[object Object],UI Update,[object Object],time,[object Object],UI Queue,[object Object],Worker Thread,[object Object],UI Update,[object Object]
When Clicked,[object Object],UI Thread,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object],Worker Thread,[object Object],JavaScript,[object Object]
Worker Thread Complete,[object Object],UI Thread,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object],onmessage,[object Object]
Worker Thread Complete,[object Object],UI Thread,[object Object],onmessage,[object Object],UI Update,[object Object],UI Update,[object Object],onclick,[object Object],time,[object Object],UI Queue,[object Object]
Repaint and ReflowHidden performance costs of common operations,[object Object]
Long UI updates=Unresponsive UI,[object Object]
Unresponsive UI,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],time,[object Object]
JavaScript can cause long UI updates by triggeringrepaint and reflow,[object Object]
A repaint occurs when a visual change doesn't,[object Object],require recalculation of layout,[object Object],Changes to visibility, colors (text/background), background images, etc.,[object Object]
Repaint,[object Object],<button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button>,[object Object],<script type="text/javascript">,[object Object],window.onload = function(){,[object Object], document.getElementById("btn").onclick = function(){,[object Object], this.style.color = "#ff0";,[object Object], };,[object Object],};,[object Object],</script>,[object Object],Repaint!,[object Object]
A reflowoccurs when a visual change,[object Object],requires a change in layout,[object Object],Initial page load ▪ browser resize ▪ DOM structure change ▪ layout style change,[object Object],layout information retrieved,[object Object]
Reflow,[object Object],<button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button>,[object Object],<script type="text/javascript">,[object Object],window.onload = function(){,[object Object], document.getElementById("btn").onclick = function(){,[object Object], var div = document.createElement(“div”);,[object Object], div.className = “tip”;,[object Object], div.innerHTML = “You clicked me!”;,[object Object], document.body.appendChild(div);,[object Object], };,[object Object],};,[object Object],</script>,[object Object],Reflow!,[object Object]
Repaints and reflows are queued up as JavaScript executesand then executed in order,[object Object]
Reflow,[object Object],var list = document.getElementsByClassName("items")[0],,[object Object], i, item;,[object Object],for (i=0; i < 10; i++){,[object Object], item = document.createElement("li");,[object Object], item.innerHTML = "Item #" + i;,[object Object],list.appendChild(item);,[object Object],},[object Object],Reflow x 10!,[object Object]
Limiting repaints/reflows improves overall performance,[object Object]
Technique #1Perform DOM manipulations off-document,[object Object]
Off-Document Operations,[object Object],Fast because there's no repaint/reflow,[object Object],Techniques:,[object Object],Remove element from the document, make changes, insert back into document,[object Object],Set element's display to “none”, make changes, set display back to default,[object Object],Build up DOM changes on a DocumentFragment then apply all at once,[object Object]
DocumentFragment,[object Object],A document-like object,[object Object],Not visually represented,[object Object],Considered to be owned by the document from which it was created,[object Object],When passed to appendChild(), appends all of its children rather than itself,[object Object]
DocumentFragment,[object Object],var list = document.getElementsByClassName("items")[0],,[object Object], fragment = document.createDocumentFragment(),,[object Object], i, item;,[object Object],for (i=0; i < 10; i++){,[object Object], item = document.createElement("li");,[object Object], item.innerHTML = "Item #" + i;,[object Object], fragment.appendChild(item);,[object Object],},[object Object],list.appendChild(fragment);,[object Object],1 Reflow,[object Object]
Technique #2Group Style Changes,[object Object]
Repaint!,[object Object],Reflow!,[object Object],element.style.color = "red";,[object Object],element.style.height = "100px";,[object Object],element.style.fontSize = "25px";,[object Object],element.style.backgroundColor = "white";,[object Object],Reflow!,[object Object],Repaint!,[object Object]
Grouping Style Changes,[object Object],.active {,[object Object], color: red;,[object Object], height: 100px;,[object Object], fontSize: 25px;,[object Object], background-color: white;,[object Object],},[object Object],element.className = "active";,[object Object],Reflow!,[object Object]
Grouping Style Changes,[object Object],var item = document.getElementById("myItem");,[object Object],item.style.cssText = "color:red;height:100px;" +,[object Object], "font-size:25px;background-color: white");,[object Object],Reflow!,[object Object]
Technique #3Avoid Accidental Reflow,[object Object]
Accidental Reflow,[object Object],element.style.width= "100px";,[object Object],var width = element.offsetWidth;,[object Object],Reflow!,[object Object]
What to do?,[object Object], Minimize access to layout information,[object Object],offsetTop, offsetLeft, offsetWidth, offsetHeight,[object Object],scrollTop, scrollLeft, scrollWidth, scrollHeight,[object Object],clientTop, clientLeft, clientWidth, clientHeight,[object Object],Most computed styles,[object Object], If a value is used more than once, store in local variable,[object Object]
Does hardware acceleration help?,[object Object]
Traditional Rendering,[object Object],UI Thread,[object Object],Compositing,[object Object],Drawing,[object Object],time,[object Object]
Hardware Acceleration,[object Object],UI Thread,[object Object],Prep,[object Object],Wait,[object Object],time,[object Object],Rendering info,[object Object],Signal complete,[object Object],Compositing,[object Object],Drawing,[object Object],GPU,[object Object]
Recap,[object Object]
The browser UI thread is responsible for,[object Object],both UI updates and JavaScript execution,[object Object],Only one can happen at a time,[object Object]
Responsive UI,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],time,[object Object]
1 of 155

High Performance JavaScript 2011

••
Download to read offline
Technology

For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there’s still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.

Nicholas Zakas
Nicholas ZakasFront End Guy at Box

Recommended

Efficient JavaScript Unit Testing, May 2012 by
Efficient JavaScript Unit Testing, May 2012Efficient JavaScript Unit Testing, May 2012
Efficient JavaScript Unit Testing, May 2012Hazem Saleh
10.1K views•50 slides
Test-Driven JavaScript Development (JavaZone 2010) by
Test-Driven JavaScript Development (JavaZone 2010)Test-Driven JavaScript Development (JavaZone 2010)
Test-Driven JavaScript Development (JavaZone 2010)Christian Johansen
6K views•111 slides
Browser Automated Testing Frameworks - Nightwatch.js by
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsLuís Bastião Silva
7K views•20 slides
Testing nightwatch, by David Torroija by
Testing nightwatch, by David TorroijaTesting nightwatch, by David Torroija
Testing nightwatch, by David TorroijaDavid Torroija
1.3K views•28 slides
Front-End Testing: Demystified by
Front-End Testing: DemystifiedFront-End Testing: Demystified
Front-End Testing: DemystifiedSeth McLaughlin
9.9K views•43 slides
Automated Frontend Testing by
Automated Frontend TestingAutomated Frontend Testing
Automated Frontend TestingNeil Crosby
11.6K views•57 slides

More Related Content

What's hot

High Performance JavaScript - jQuery Conference SF Bay Area 2010 by
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
47.7K views•103 slides
Front-end Automated Testing by
Front-end Automated TestingFront-end Automated Testing
Front-end Automated TestingRuben Teijeiro
4.5K views•45 slides
High Performance JavaScript - WebDirections USA 2010 by
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
59.7K views•105 slides
Nightwatch JS for End to End Tests by
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End TestsSriram Angajala
691 views•13 slides
High Performance Snippets by
High Performance SnippetsHigh Performance Snippets
High Performance SnippetsSteve Souders
5.9K views•33 slides
JavaScript Timers, Power Consumption, and Performance by
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas Zakas
54.4K views•128 slides

What's hot(20)

High Performance JavaScript - jQuery Conference SF Bay Area 2010 by Nicholas Zakas
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
Nicholas Zakas•47.7K views
Front-end Automated Testing by Ruben Teijeiro
Front-end Automated TestingFront-end Automated Testing
Front-end Automated Testing
Ruben Teijeiro•4.5K views
High Performance JavaScript - WebDirections USA 2010 by Nicholas Zakas
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas•59.7K views
Nightwatch JS for End to End Tests by Sriram Angajala
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End Tests
Sriram Angajala•691 views
High Performance Snippets by Steve Souders
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
Steve Souders•5.9K views
JavaScript Timers, Power Consumption, and Performance by Nicholas Zakas
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas•54.4K views
Nightwatch at Tilt by Dave King
Nightwatch at TiltNightwatch at Tilt
Nightwatch at Tilt
Dave King•5K views
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton) by Cogapp
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Test-driven Development with Drupal and Codeception (DrupalCamp Brighton)
Cogapp•3K views
20160905 - BrisJS - nightwatch testing by Vladimir Roudakov
20160905 - BrisJS - nightwatch testing20160905 - BrisJS - nightwatch testing
20160905 - BrisJS - nightwatch testing
Vladimir Roudakov•756 views
Node.js and Selenium Webdriver, a journey from the Java side by Mek Srunyu Stittri
Node.js and Selenium Webdriver, a journey from the Java sideNode.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java side
Mek Srunyu Stittri•25.9K views
Real World Selenium Testing by Mary Jo Sminkey
Real World Selenium TestingReal World Selenium Testing
Real World Selenium Testing
Mary Jo Sminkey•2K views
Introducing Playwright's New Test Runner by Applitools
Introducing Playwright's New Test RunnerIntroducing Playwright's New Test Runner
Introducing Playwright's New Test Runner
Applitools•3.6K views
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016 by Gavin Pickin
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
Gavin Pickin•427 views
Protractor Tutorial Quality in Agile 2015 by Andrew Eisenberg
Protractor Tutorial Quality in Agile 2015Protractor Tutorial Quality in Agile 2015
Protractor Tutorial Quality in Agile 2015
Andrew Eisenberg•2.1K views
Fullstack End-to-end test automation with Node.js, one year later by Mek Srunyu Stittri
Fullstack End-to-end test automation with Node.js, one year laterFullstack End-to-end test automation with Node.js, one year later
Fullstack End-to-end test automation with Node.js, one year later
Mek Srunyu Stittri•4.9K views
Java script unit testing by Mats Bryntse
Java script unit testingJava script unit testing
Java script unit testing
Mats Bryntse•3K views
#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015 by Matt Raible
#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015
#NoXML: Eliminating XML in Spring Projects - SpringOne 2GX 2015
Matt Raible•37.4K views
Performance on the Yahoo! Homepage by Nicholas Zakas
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas•7.9K views
Selenium Automation Using Ruby by Kumari Warsha Goel
Selenium Automation Using RubySelenium Automation Using Ruby
Selenium Automation Using Ruby
Kumari Warsha Goel•4.3K views
Testing Mobile JavaScript by jeresig
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScript
jeresig•215.2K views

Viewers also liked

Scalable JavaScript Application Architecture by
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureNicholas Zakas
176.2K views•108 slides
Maintainable JavaScript 2011 by
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
12.1K views•53 slides
Test your Javascript! v1.1 by
Test your Javascript! v1.1Test your Javascript! v1.1
Test your Javascript! v1.1Eric Wendelin
10.7K views•33 slides
Agile JavaScript Testing by
Agile JavaScript TestingAgile JavaScript Testing
Agile JavaScript TestingScott Becker
6.2K views•48 slides
Browser Wars Episode 1: The Phantom Menace by
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceNicholas Zakas
77.4K views•168 slides
AngularJS Deep Dives (NYC GDG Apr 2013) by
AngularJS Deep Dives (NYC GDG Apr 2013)AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)Nitya Narasimhan
108.8K views•28 slides

Viewers also liked(20)

Scalable JavaScript Application Architecture by Nicholas Zakas
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
Nicholas Zakas•176.2K views
Maintainable JavaScript 2011 by Nicholas Zakas
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
Nicholas Zakas•12.1K views
Test your Javascript! v1.1 by Eric Wendelin
Test your Javascript! v1.1Test your Javascript! v1.1
Test your Javascript! v1.1
Eric Wendelin•10.7K views
Agile JavaScript Testing by Scott Becker
Agile JavaScript TestingAgile JavaScript Testing
Agile JavaScript Testing
Scott Becker•6.2K views
Browser Wars Episode 1: The Phantom Menace by Nicholas Zakas
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas•77.4K views
AngularJS Deep Dives (NYC GDG Apr 2013) by Nitya Narasimhan
AngularJS Deep Dives (NYC GDG Apr 2013)AngularJS Deep Dives (NYC GDG Apr 2013)
AngularJS Deep Dives (NYC GDG Apr 2013)
Nitya Narasimhan•108.8K views
Enterprise JavaScript Error Handling (Ajax Experience 2008) by Nicholas Zakas
Enterprise JavaScript Error Handling (Ajax Experience 2008)Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Nicholas Zakas•72.4K views
The Art of AngularJS - DeRailed 2014 by Matt Raible
The Art of AngularJS - DeRailed 2014The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014
Matt Raible•146.5K views
Javascript Best Practices by Christian Heilmann
Javascript Best PracticesJavascript Best Practices
Javascript Best Practices
Christian Heilmann•129.9K views
Maintainable JavaScript 2012 by Nicholas Zakas
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
Nicholas Zakas•90.8K views
Professional JavaScript: AntiPatterns by Mike Wilcox
Professional JavaScript: AntiPatternsProfessional JavaScript: AntiPatterns
Professional JavaScript: AntiPatterns
Mike Wilcox•4K views
Nicholas' Performance Talk at Google by Nicholas Zakas
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
Nicholas Zakas•4.6K views
JavaScript Variable Performance by Nicholas Zakas
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
Nicholas Zakas•5.2K views
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011) by Nicholas Zakas
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas•10.1K views
High Performance JavaScript (Amazon DevCon 2011) by Nicholas Zakas
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas•4.6K views
Responsive interfaces by Nicholas Zakas
Responsive interfacesResponsive interfaces
Responsive interfaces
Nicholas Zakas•18.2K views
Test Driven Development With YUI Test (Ajax Experience 2008) by Nicholas Zakas
Test Driven Development With YUI Test (Ajax Experience 2008)Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)
Nicholas Zakas•31.1K views
Mobile Web Speed Bumps by Nicholas Zakas
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas•13.4K views
Unit testing JavaScript using Mocha and Node by Josh Mock
Unit testing JavaScript using Mocha and NodeUnit testing JavaScript using Mocha and Node
Unit testing JavaScript using Mocha and Node
Josh Mock•11.2K views
Becoming Node.js ninja on Cloud Foundry by Raja Rao DV
Becoming Node.js ninja on Cloud FoundryBecoming Node.js ninja on Cloud Foundry
Becoming Node.js ninja on Cloud Foundry
Raja Rao DV•14K views

Similar to High Performance JavaScript 2011

High Performance JavaScript (CapitolJS 2011) by
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
57.5K views•125 slides
High Performance JavaScript (YUIConf 2010) by
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
61.8K views•148 slides
High Performance JavaScript - Fronteers 2010 by
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010Nicholas Zakas
4.2K views•128 slides
Even Faster Web Sites at jQuery Conference '09 by
Even Faster Web Sites at jQuery Conference '09Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09Steve Souders
1.2K views•66 slides
jQuery introduction by
jQuery introductionjQuery introduction
jQuery introductionTomi Juhola
32.3K views•28 slides
jQuery and_drupal by
jQuery and_drupaljQuery and_drupal
jQuery and_drupalBlackCatWeb
352 views•29 slides

Similar to High Performance JavaScript 2011(20)

High Performance JavaScript (CapitolJS 2011) by Nicholas Zakas
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas•57.5K views
High Performance JavaScript (YUIConf 2010) by Nicholas Zakas
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
Nicholas Zakas•61.8K views
High Performance JavaScript - Fronteers 2010 by Nicholas Zakas
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
Nicholas Zakas•4.2K views
Even Faster Web Sites at jQuery Conference '09 by Steve Souders
Even Faster Web Sites at jQuery Conference '09Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09
Steve Souders•1.2K views
jQuery introduction by Tomi Juhola
jQuery introductionjQuery introduction
jQuery introduction
Tomi Juhola•32.3K views
jQuery and_drupal by BlackCatWeb
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
BlackCatWeb•352 views
Ajax to the Moon by davejohnson
Ajax to the MoonAjax to the Moon
Ajax to the Moon
davejohnson•1.4K views
Extjs Howto by Greg Hendricks
Extjs HowtoExtjs Howto
Extjs Howto
Greg Hendricks•2.1K views
JavaScript Performance Patterns by Stoyan Stefanov
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
Stoyan Stefanov•4.9K views
Developing High Performance Web Apps by Timothy Fisher
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
Timothy Fisher•1.3K views
Ta Javaserverside Eran Toch by Adil Jafri
Ta Javaserverside Eran TochTa Javaserverside Eran Toch
Ta Javaserverside Eran Toch
Adil Jafri•487 views
High-Speed HTML5 by Peter Lubbers
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
Peter Lubbers•7.9K views
Selenium by Adam Goucher
SeleniumSelenium
Selenium
Adam Goucher•12.2K views
Building performance into the new yahoo homepage presentation by masudakram
Building performance into the new yahoo homepage presentationBuilding performance into the new yahoo homepage presentation
Building performance into the new yahoo homepage presentation
masudakram•4.4K views
Developing High Performance Web Apps - CodeMash 2011 by Timothy Fisher
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
Timothy Fisher•9.6K views
Google在Web前端方面的经验 by yiditushe
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验
yiditushe•1.2K views
Sxsw 20090314 by guestcabcf63
Sxsw 20090314Sxsw 20090314
Sxsw 20090314
guestcabcf63•726 views
SXSW: Even Faster Web Sites by Steve Souders
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web Sites
Steve Souders•9.4K views
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers by Todd Anglin
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin•5.3K views
node.js 실무 - node js in practice by Jesang Yoon by Jesang Yoon
node.js 실무 - node js in practice by Jesang Yoonnode.js 실무 - node js in practice by Jesang Yoon
node.js 실무 - node js in practice by Jesang Yoon
Jesang Yoon•508 views

More from Nicholas Zakas

Enough with the JavaScript already! by
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!Nicholas Zakas
260K views•84 slides
The Pointerless Web by
The Pointerless WebThe Pointerless Web
The Pointerless WebNicholas Zakas
7K views•64 slides
JavaScript APIs you’ve never heard of (and some you have) by
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)Nicholas Zakas
51.4K views•67 slides
Scalable JavaScript Application Architecture 2012 by
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
94K views•114 slides
Progressive Enhancement 2.0 (Conference Agnostic) by
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
42.5K views•125 slides
YUI Test The Next Generation (YUIConf 2010) by
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)Nicholas Zakas
3.7K views•73 slides

More from Nicholas Zakas(11)

Enough with the JavaScript already! by Nicholas Zakas
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas•260K views
The Pointerless Web by Nicholas Zakas
The Pointerless WebThe Pointerless Web
The Pointerless Web
Nicholas Zakas•7K views
JavaScript APIs you’ve never heard of (and some you have) by Nicholas Zakas
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)
Nicholas Zakas•51.4K views
Scalable JavaScript Application Architecture 2012 by Nicholas Zakas
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
Nicholas Zakas•94K views
Progressive Enhancement 2.0 (Conference Agnostic) by Nicholas Zakas
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas•42.5K views
YUI Test The Next Generation (YUIConf 2010) by Nicholas Zakas
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
Nicholas Zakas•3.7K views
Extreme JavaScript Compression With YUI Compressor by Nicholas Zakas
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
Nicholas Zakas•43.4K views
Writing Efficient JavaScript by Nicholas Zakas
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
Nicholas Zakas•88.3K views
Speed Up Your JavaScript by Nicholas Zakas
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
Nicholas Zakas•17.6K views
Maintainable JavaScript by Nicholas Zakas
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
Nicholas Zakas•10.2K views
The New Yahoo! Homepage and YUI 3 by Nicholas Zakas
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3
Nicholas Zakas•4.7K views

Recently uploaded

What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueShapeBlue
131 views•23 slides
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveNetwork Automation Forum
46 views•35 slides
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineShapeBlue
102 views•19 slides
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueShapeBlue
96 views•7 slides
The Research Portal of Catalonia: Growing more (information) & more (services) by
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)CSUC - Consorci de Serveis Universitaris de Catalunya
136 views•25 slides
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti... by
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...ShapeBlue
46 views•29 slides

Recently uploaded(20)

What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue•131 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Network Automation Forum•46 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue•102 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue•96 views
The Research Portal of Catalonia: Growing more (information) & more (services) by CSUC - Consorci de Serveis Universitaris de Catalunya
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)
CSUC - Consorci de Serveis Universitaris de Catalunya•136 views
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti... by ShapeBlue
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
DRaaS using Snapshot copy and destination selection (DRaaS) - Alexandre Matti...
ShapeBlue•46 views
20231123_Camunda Meetup Vienna.pdf by Phactum Softwareentwicklung GmbH
20231123_Camunda Meetup Vienna.pdf20231123_Camunda Meetup Vienna.pdf
20231123_Camunda Meetup Vienna.pdf
Phactum Softwareentwicklung GmbH•46 views
MVP and prioritization.pdf by rahuldharwal141
MVP and prioritization.pdfMVP and prioritization.pdf
MVP and prioritization.pdf
rahuldharwal141•38 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Jasper Oosterveld•28 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson•133 views
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by ShapeBlue
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
ShapeBlue•56 views
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
IttrainingIttraining•80 views
Ransomware is Knocking your Door_Final.pdf by Security Bootcamp
Ransomware is Knocking your Door_Final.pdfRansomware is Knocking your Door_Final.pdf
Ransomware is Knocking your Door_Final.pdf
Security Bootcamp•76 views
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue by ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueVNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
ShapeBlue•85 views
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by ShapeBlue
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
ShapeBlue•54 views
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by ShapeBlue
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
ShapeBlue•48 views
Uni Systems for Power Platform.pptx by Uni Systems S.M.S.A.
Uni Systems for Power Platform.pptxUni Systems for Power Platform.pptx
Uni Systems for Power Platform.pptx
Uni Systems S.M.S.A.•58 views
Scaling Knowledge Graph Architectures with AI by Enterprise Knowledge
Scaling Knowledge Graph Architectures with AIScaling Knowledge Graph Architectures with AI
Scaling Knowledge Graph Architectures with AI
Enterprise Knowledge•53 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software•344 views
DRBD Deep Dive - Philipp Reisner - LINBIT by ShapeBlue
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBIT
ShapeBlue•62 views

High Performance JavaScript 2011

  • 1.
  • 2.
  • 3.
  • 4.
  • 8.
  • 9.
  • 10.
  • 11.
  • 13.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 162.
  • 163.
  • 164.

Editor's Notes

  1. Over the past couple of years, we&apos;ve seen JavaScript development earn recognition as a true discipline. The idea that you should architect your code, use patterns and good programming practices has really elevated the role of the front end engineer. In my opinion, part of this elevation has been the adoption of what has traditionally been considered back end methodologies. We now focus on performance and algorithms, there&apos;s unit testing for JavaScript, and so much more. One of the areas that I&apos;ve seen a much slower than adoption that I&apos;d like is in the area of error handling.How many people have an error handling strategy for their backend? How many have dashboards that display problems with uptime and performance? How many have anything similar for the front end?Typically, the front end has been this black hole of information. You may get a few customer reports here and there, but you have no information about what&apos;s going on, how often it&apos;s occurring, or how many people have been affected.
  2. So what have we talked about? Maintainable JavaScript is made up of four components.First is Code Conventions that describe the format of the code you’re writing.Second is Loose Coupling – keeping HTML, JavaScript, and CSS on separate layers and keeping application logic out of event handlers.Third is Programming Practices that ensure your code is readable and easily debugged.Fourth is creating a Build Process