Download - jQuery Conference Toronto
![Page 1: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/1.jpg)
jQuery and Web Performance
Dave MethvinPresident, jQuery FoundationLead Developer, jQuery Core
![Page 2: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/2.jpg)
![Page 3: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/3.jpg)
![Page 4: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/4.jpg)
![Page 5: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/5.jpg)
March 5, 2014
![Page 6: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/6.jpg)
![Page 7: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/7.jpg)
![Page 8: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/8.jpg)
April 8, 2014: So Long, Windows XP!
![Page 9: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/9.jpg)
What that means...
● IE6 is dead (well maybe not in China)○ ie6countdown.com
● IE7 is supported on Windows Vista○ so realistically, it's dead
● IE8 is the new baseline for dinosaur apps○ it ain't pretty but it generally works
![Page 10: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/10.jpg)
PERFORMANCE
![Page 11: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/11.jpg)
![Page 12: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/12.jpg)
![Page 13: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/13.jpg)
"JavaScript / jQuery / browsers are a bad
developer environment!"
![Page 14: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/14.jpg)
![Page 15: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/15.jpg)
A poor workman blames his tools
![Page 16: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/16.jpg)
How the Programmer Sees It
JavaScript Browser
![Page 17: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/17.jpg)
Web Developer's Reality
Browser JavaScript
Mouse
CSSHTMLContent caching
KeyboardTouch
Screen paints
Layout calculation Image decoding
Focus management
Network requests
![Page 18: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/18.jpg)
Web Developer's Reality
Browser JavaScript
Mouse
CSSHTMLContent caching
KeyboardTouch
Screen paints
Layout calculation Image decoding
Focus management
Network requests
Optional
![Page 19: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/19.jpg)
How Do I Make My Page Fast?
![Page 20: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/20.jpg)
How Do I Make My Page Fast?
1) Find slow stuff2) Make it not slow
![Page 21: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/21.jpg)
What you can measure using tools today
How Do I Find the Slow Stuff?
![Page 22: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/22.jpg)
What you can measure using tools today
What you should measure
How Do I Find the Slow Stuff?
![Page 23: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/23.jpg)
JavaScript Loop Optimization
![Page 24: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/24.jpg)
JavaScript Loop Optimization
Slowest looping style still only takes 140 microseconds to do 10 iterations of a loop
![Page 25: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/25.jpg)
“Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time; premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.”
--Donald Knuth
![Page 26: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/26.jpg)
“Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time; premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.”
--Donald Knuth
![Page 27: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/27.jpg)
This Should Be You, 97% of the Time
![Page 28: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/28.jpg)
● Client-side issues often can be solved by "peephole" optimizations and don't require massive architecture changes
● Many — most! — speedups can be done near the end of the project (or even after deployment, cough)
Finding and Fixing the 3 Percent
![Page 29: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/29.jpg)
Page Load Performance
![Page 30: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/30.jpg)
How the Browser Loads Pages
1) Pre-fetcher scans HTML for resources (images, CSS, scripts) and requests them immediately
2) Browser loads CSS and runs JavaScript during parsing
3) After </html>, browser calls DOMContentLoaded
4) Browser does initial rendering of the page
5) Finally the user sees something!
6) Other resources may load after this, e.g. images
![Page 31: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/31.jpg)
Now It May Seem Obvious, But...
● Resources not in the HTML file can't be prefetched, resulting in further delays○ e.g. stuff injected by your JavaScript/jQuery
● Initial content rendered by JS from client-side templates can make the prefetcher useless (e.g., Backbone, Angular, Ember)○ "Browser call YOU"
![Page 32: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/32.jpg)
Manual Prefetching
Lets the browser get a running start on templates or deeper pages in the site.
<link rel="dns-prefetch" href="media.mysite.com">
<link rel="prefetch" href="/img/kitten.jpg">
<link rel="prefetch" href="/page2.html">
![Page 33: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/33.jpg)
YSlow
![Page 34: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/34.jpg)
Google PageSpeed
![Page 35: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/35.jpg)
modern.IE
![Page 36: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/36.jpg)
webpagetest.org
![Page 37: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/37.jpg)
Waterfall Diagram
![Page 38: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/38.jpg)
Here Are Your Blocking Resources
Advertising!
![Page 39: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/39.jpg)
You Have 16 Milliseconds … Begin
60 frames/second ~ 16 milliseconds/frame
● Long-running operations can make the page appear "janky" rather than smooth
● Really long-running operations can make the page appear unresponsive to the user
![Page 40: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/40.jpg)
It Happens in 16 Milliseconds?
From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
![Page 41: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/41.jpg)
Adventures in Dirty Layout
:visible
:hidden
![Page 42: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/42.jpg)
:visible and :hidden are ...
● jQuery custom selectors○ requires Sizzle, not native querySelectorAll
But that's not why they're slow!
![Page 43: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/43.jpg)
"The Dot That Ate Performance"
console.time("init");
$("body").removeClass("activated");
$("p:visible").css("color", "blue");
console.timeEnd("init");
![Page 44: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/44.jpg)
"Hey Browser Can I Bug You?"
30 ms
![Page 45: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/45.jpg)
What If We Track Visibility?
console.time("init");
$("body").removeClass("activated");
$("p.visible").css("color", "blue");
console.timeEnd("init");
![Page 46: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/46.jpg)
"Never Mind Browser, I Know This"
8 ms
![Page 47: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/47.jpg)
Chrome's Yellow Triangle
![Page 48: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/48.jpg)
IE11: Layout after offsetWidth
![Page 49: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/49.jpg)
Class Names for Application State
● Simple rule:○ If it's not layout, don't use classes
● Why?○ The browser may recalculate styles
● What's the alternative?○ jQuery .data()○ JavaScript state
![Page 50: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/50.jpg)
● Look out for :visible or :hidden● Minimize document-wide style/class
changes○ Use data- attrs or jQuery `.data()` if non-stylistic
● Get JavaScript out of the path○ CSS transitions○ CSS animations
Avoiding Forced Layout
![Page 51: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/51.jpg)
Let CSS Be CSS
● Avoid JavaScript for presentation● Use CSS transitions● Use CSS animations● Use stylesheets, not style attributes
○ e.g., .addClass/.removeClass, not .css
![Page 52: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/52.jpg)
Using Dev Tools Profilers
When JavaScript really is the problem (or seems to be), a
profiler can find the hot spots.
![Page 53: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/53.jpg)
A Real Site: gimmickbook.com
![Page 54: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/54.jpg)
● Stutters during infinite scroll● Seems to get worse as the page grows● Using the jQuery Masonry plugin
What's Wrong?
![Page 55: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/55.jpg)
Faster!
![Page 56: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/56.jpg)
Forced Layout/Reflow
Chrome's Event tab shows JavaScript has forced layouts
![Page 57: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/57.jpg)
Chrome Profile ("Tree")
![Page 58: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/58.jpg)
IE 11 Profile ("Call Tree")
![Page 59: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/59.jpg)
What Does This Code Look Like?
![Page 60: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/60.jpg)
![Page 61: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/61.jpg)
Moral of the Story
Infinite scroll should not be used with full-page layout algorithms!
In this case, the plugin could be changed to only lay out the new items, since nothing above them changed.
![Page 62: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/62.jpg)
You Have the Tools, Use Them!
![Page 63: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/63.jpg)
I Don't Know This Guy, But...
![Page 64: jQuery Conference Toronto](https://reader033.vdocuments.net/reader033/viewer/2022052618/54c2df514a795997108b4679/html5/thumbnails/64.jpg)
$("#talk") .find(".useful") .append(contactInfo) .end();
Twitter: @davemethvinGitHub: @dmethvinIRC (Freenode): DaveMethvin #jquery-devEmail: [email protected]