High Performance JavaScript (CapitolJS 2011)

Nicholas Zakas
Nicholas ZakasFront End Guy at Box
••
High Performance JavaScript,[object Object],Nicholas C. Zakas| CapitolJS | September 18, 2011,[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: @voodootikigod),[object Object]
Does JavaScript performance matter?,[object Object]
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 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 (CapitolJS 2011)
Oh yeah, one more thing,[object Object]
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 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 (CapitolJS 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]
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: 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 #2: 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 #3: 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 (CapitolJS 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 (CapitolJS 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]
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]
Unresponsive UI,[object Object],UI Thread,[object Object],JavaScript,[object Object],UI Update,[object Object],UI Update,[object Object],time,[object Object]
Avoid Slow Loading JavaScript,[object Object],Dynamically created scripts,[object Object],Deferred scripts,[object Object],Asynchronous scripts,[object Object]
Avoid Slow JavaScript,[object Object],Don't allow JavaScript to execute for more than 50ms,[object Object],Break up long JavaScript processes using:,[object Object],Timers,[object Object],Script Yielding (future),[object Object],Web Workers,[object Object]
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Etcetera,[object Object],My blog: www.nczonline.net,[object Object],Twitter: @slicknet,[object Object],These Slides: slideshare.net/nzakas,[object Object],Hire us: projects@stubbornella.org,[object Object]
Questions?,[object Object]
Creative Commons Images Used,[object Object],http://www.flickr.com/photos/lrargerich/3115367361/,[object Object],http://www.flickr.com/photos/hippie/2406411610/,[object Object],http://www.flickr.com/photos/55733754@N00/3325000738/,[object Object],http://www.flickr.com/photos/eurleif/255241547/,[object Object],http://www.flickr.com/photos/off_the_wall/3444915939/,[object Object],http://www.flickr.com/photos/wwarby/3296379139/,[object Object],http://www.flickr.com/photos/derekgavey/4358797365/,[object Object],http://www.flickr.com/photos/mulad/286641998/,[object Object],http://www.flickr.com/photos/torley/2361164281/,[object Object],http://www.flickr.com/photos/ottoman42/455242/,[object Object],http://www.flickr.com/photos/goincase/3843348908/,[object Object]
1 of 125

High Performance JavaScript (CapitolJS 2011)

••
Download to read offline
TechnologyEducation
Nicholas Zakas
Nicholas ZakasFront End Guy at Box

Recommended

What is HTML 5?What is HTML 5?
What is HTML 5?Susan Winters
19K views•29 slides
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
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
47.6K views•102 slides
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
59.7K views•105 slides
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
4.6K views•155 slides
Keypoints html5Keypoints html5
Keypoints html5dynamis
29.7K views•243 slides

More Related Content

What's hot

Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
13.4K views•101 slides
WordPress and AjaxWordPress and Ajax
WordPress and AjaxRonald Huereca
40.5K views•67 slides

What's hot(20)

High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
Nicholas Zakas•10.1K views
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas•42.5K views
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas•13.4K views
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
Ronald Huereca•40.5K views
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
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
Steve Souders•5.9K views
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
Stoyan Stefanov•20.6K views
Building an HTML5 Video PlayerBuilding an HTML5 Video Player
Building an HTML5 Video Player
Jim Jeffers•84.6K views
Ajax SecurityAjax Security
Ajax Security
Joe Walker•42.6K views
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScript
jeresig•215.2K views
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
Simon Willison•4K views
FavFav
Fav
helloppt•880 views
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Julien Lecomte•56.7K views
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Pablo Godel•13.5K views
jQuery Proven Performance Tips & TricksjQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
Addy Osmani•175.6K views
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
David Kaneda•2.3K views
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas•54.4K views
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Matt Raible•68.4K views
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
Peter Drinnan•7.3K views
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
Nicholas Zakas•61.8K views

Viewers also liked

Timers and pwmTimers and pwm
Timers and pwmSaideep Kamishetty
8.2K views•32 slides

Viewers also liked(20)

Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
Nicholas Zakas•90.8K views
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
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
Nicholas Zakas•88.3K views
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
Nicholas Zakas•4.2K views
Timers and pwmTimers and pwm
Timers and pwm
Saideep Kamishetty•8.2K views
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
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
Nicholas Zakas•12.1K views
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas•260K views
8051 Timers / Counters8051 Timers / Counters
8051 Timers / Counters
Patricio Lima•53.1K views
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
Nicholas Zakas•43.4K views
Excellence land roverExcellence land rover
Excellence land rover
nirmal francis•720 views
Mt on leadership and its effects on employees performanceMt on leadership and its effects on employees performance
Mt on leadership and its effects on employees performance
Shashi Chandra•1.7K views
Report..costing..Report..costing..
Report..costing..
Nur Dalila Zamri•705 views
srthsrthsrthsrth
srthsrth
nn2141485•400 views
GhgfhgfhGhgfhgfh
Ghgfhgfh
sam-i-am2222•368 views
nullcon 2011 - Buffer UnderRun Exploitsnullcon 2011 - Buffer UnderRun Exploits
nullcon 2011 - Buffer UnderRun Exploits
n|u - The Open Security Community•1K views
Proactive Professionalism Networking Today Nj 1Proactive Professionalism Networking Today Nj 1
Proactive Professionalism Networking Today Nj 1
Suzanne Carbonaro•390 views
Transactional learning and simulations: how far can we go in professional leg...Transactional learning and simulations: how far can we go in professional leg...
Transactional learning and simulations: how far can we go in professional leg...
York University - Osgoode Hall Law School•1K views
Prescrition co-owners- pdfPrescrition co-owners- pdf
Prescrition co-owners- pdf
sahib rox•3.6K views
Good prescribingGood prescribing
Good prescribing
Resti Cahyani•1K views

Similar to High Performance JavaScript (CapitolJS 2011)

jQuery and_drupaljQuery and_drupal
jQuery and_drupalBlackCatWeb
352 views•29 slides
J Query PresentationJ Query Presentation
J Query PresentationVishal Kumar
2.3K views•31 slides

Similar to High Performance JavaScript (CapitolJS 2011)(20)

Responsive interfacesResponsive interfaces
Responsive interfaces
Nicholas Zakas•18.2K views
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 and_drupaljQuery and_drupal
jQuery and_drupal
BlackCatWeb•352 views
Ta Javaserverside Eran TochTa Javaserverside Eran Toch
Ta Javaserverside Eran Toch
Adil Jafri•487 views
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
Stoyan Stefanov•4.9K views
J Query PresentationJ Query Presentation
J Query Presentation
Vishal Kumar•2.3K views
Basic testing with seleniumBasic testing with selenium
Basic testing with selenium
Søren Lund•5.1K views
Implementing Comet using PHPImplementing Comet using PHP
Implementing Comet using PHP
King Foo•30.4K views
SeleniumSelenium
Selenium
Adam Goucher•12.2K views
Rapid JCR Applications Development with SlingRapid JCR Applications Development with Sling
Rapid JCR Applications Development with Sling
Felix Meschberger•4.2K views
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
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验
yiditushe•1.2K views
Sxsw 20090314Sxsw 20090314
Sxsw 20090314
guestcabcf63•726 views
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web Sites
Steve Souders•9.4K views
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
Node js presentationNode js presentation
Node js presentation
martincabrera•9.2K views
Wookie MeetupWookie Meetup
Wookie Meetup
scottw•639 views
Wookie MeetupWookie Meetup
Wookie Meetup
scottw•1K views
WebTest - Efficient Functional Web Testing with HtmlUnit and BeyondWebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
WebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
mguillem•5.1K views
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas•7.9K views

More from Nicholas Zakas

More from Nicholas Zakas(11)

The Pointerless WebThe Pointerless Web
The Pointerless Web
Nicholas Zakas•7K views
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
Nicholas Zakas•94K views
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
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
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
Nicholas Zakas•4.6K views
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
Nicholas Zakas•176.2K views
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
Nicholas Zakas•17.6K views
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
Nicholas Zakas•10.2K views
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
Nicholas Zakas•5.2K views
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
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

Recently uploaded

Recently uploaded(20)

"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur
"Thriving Culture in a Product Company — Practical Story", Volodymyr Tsukur
Fwdays•39 views
Microchip: CXL Use Cases and Enabling EcosystemMicrochip: CXL Use Cases and Enabling Ecosystem
Microchip: CXL Use Cases and Enabling Ecosystem
CXL Forum•118 views
TE Connectivity: Card Edge InterconnectsTE Connectivity: Card Edge Interconnects
TE Connectivity: Card Edge Interconnects
CXL Forum•95 views
Business Analyst Series 2023 - Week 3 Session 5Business Analyst Series 2023 - Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10•94 views
Green Leaf Consulting: Capabilities DeckGreen Leaf Consulting: Capabilities Deck
Green Leaf Consulting: Capabilities Deck
GreenLeafConsulting•177 views
PyCon ID 2023 - Ridwan Fadjar Septian.pdfPyCon ID 2023 - Ridwan Fadjar Septian.pdf
PyCon ID 2023 - Ridwan Fadjar Septian.pdf
Ridwan Fadjar•165 views
"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ..."Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ...
"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ...
Fwdays•32 views
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV
Splunk•82 views
[2023] Putting the R! in R&D.pdf[2023] Putting the R! in R&D.pdf
[2023] Putting the R! in R&D.pdf
Eleanor McHugh•36 views
"Fast Start to Building on AWS", Igor Ivaniuk"Fast Start to Building on AWS", Igor Ivaniuk
"Fast Start to Building on AWS", Igor Ivaniuk
Fwdays•34 views
"AI Startup Growth from Idea to 1M ARR", Oleksandr Uspenskyi"AI Startup Growth from Idea to 1M ARR", Oleksandr Uspenskyi
"AI Startup Growth from Idea to 1M ARR", Oleksandr Uspenskyi
Fwdays•25 views
JCon Live 2023 - Lice coding some integration problemsJCon Live 2023 - Lice coding some integration problems
JCon Live 2023 - Lice coding some integration problems
Bernd Ruecker•62 views
AI: mind, matter, meaning, metaphors, being, becoming, life valuesAI: mind, matter, meaning, metaphors, being, becoming, life values
AI: mind, matter, meaning, metaphors, being, becoming, life values
Twain Liu 刘秋艳•32 views
MemVerge: Gismo (Global IO-free Shared Memory Objects)MemVerge: Gismo (Global IO-free Shared Memory Objects)
MemVerge: Gismo (Global IO-free Shared Memory Objects)
CXL Forum•112 views
Astera Labs: Intelligent Connectivity for Cloud and AI InfrastructureAstera Labs: Intelligent Connectivity for Cloud and AI Infrastructure
Astera Labs: Intelligent Connectivity for Cloud and AI Infrastructure
CXL Forum•125 views
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad..."Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...
Fwdays•38 views
.conf Go 2023 - Data analysis as a routine.conf Go 2023 - Data analysis as a routine
.conf Go 2023 - Data analysis as a routine
Splunk•85 views
Samsung: CMM-H Tiered Memory Solution with Built-in DRAMSamsung: CMM-H Tiered Memory Solution with Built-in DRAM
Samsung: CMM-H Tiered Memory Solution with Built-in DRAM
CXL Forum•101 views
Level-up Your Cloud Visibility Into AWS With ThousandEyesLevel-up Your Cloud Visibility Into AWS With ThousandEyes
Level-up Your Cloud Visibility Into AWS With ThousandEyes
ThousandEyes•88 views
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•59 views

High Performance JavaScript (CapitolJS 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.
  • 60.
  • 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.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 123.
  • 124.
  • 125.

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