jquery conference san diego 2014 - web performance
DESCRIPTION
TRANSCRIPT
![Page 1: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/1.jpg)
jQuery and Web Performance
Dave Methvin
President, jQuery Foundation
Lead Developer, jQuery Core
![Page 2: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/2.jpg)
● Maintains jQuery code and docs
● Supports web developers and standards
● Participates in standards process
○ W3C web standards
○ ECMA 262 (JavaScript)
● Hosts conferences (like this one!)
jQuery Foundation
![Page 3: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/3.jpg)
jQuery Core 1.11 and 2.1
• Shipped last month
• We didn't break a lot of things!
• "jQuery Served Your Way" ™
o Support for IE 6/7/8 (1.11) or not (2.1)
o Custom builds for smaller size
o Use with node, browserify, or inside apps
![Page 4: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/4.jpg)
builtwith.com
![Page 5: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/5.jpg)
jQuery Team - World Wide
![Page 6: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/6.jpg)
http://contribute.jquery.org
![Page 7: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/7.jpg)
PERFORMANCE
![Page 8: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/8.jpg)
"JavaScript / jQuery /
browsers are a bad
developer environment!"
![Page 9: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/9.jpg)
A poor
workman
blames
his tools
![Page 10: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/10.jpg)
How the Programmer Sees It
JavaScript Browser
![Page 11: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/11.jpg)
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTMLContent caching
Keyboard
Touch
Screen paints
Layout calculationImage decoding
Focus management
Network requests
![Page 12: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/12.jpg)
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTMLContent caching
Keyboard
Touch
Screen paints
Layout calculationImage decoding
Focus management
Network requests
Optional
![Page 13: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/13.jpg)
How Do I Make My Page Fast?
1)Find slow stuff
2)Make it not slow
![Page 14: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/14.jpg)
What you can
measure using
tools today
How Do I Find the Slow Stuff?
![Page 15: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/15.jpg)
What you can
measure using
tools today
What you
should
measure
How Do I Find the Slow Stuff?
![Page 16: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/16.jpg)
JavaScript Loop Optimization
![Page 17: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/17.jpg)
JavaScript Loop Optimization
Slowest looping style still only
takes 140 microseconds to do
10 iterations of a loop
![Page 18: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/18.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 19: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/19.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 20: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/20.jpg)
This Should Be You, 97% of the
Time
![Page 21: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/21.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 22: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/22.jpg)
Page Load Performance
![Page 23: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/23.jpg)
How the Browser Loads Pages
1) Browser fetches index.html
2) Pre-fetcher scans HTML for resources (images, CSS,
scripts) and requests them immediately
3) Browser loads / runs JavaScript when encountered
during parsing (since scripts can write out new HTML!)
4) When HTML is fully loaded and parsed, browser calls
DOMContentLoaded handlers (jQuery .ready())
5) Browser does initial rendering of the page (finally the
user sees something!)
![Page 24: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/24.jpg)
Now It May Seem Obvious, But...
• Resources not already in the HTML file can't
be prefetched, resulting in further delayso e.g. stuff injected by your JavaScript/jQuery
• JS frameworks or initial content rendered
from some client-side templates can make
the prefetcher useless
![Page 25: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/25.jpg)
Manual Prefetching
Lets you tell the browser get a running start on
template content or deeper pages in the site.
<link rel="dns-prefetch" href="media.mysite.com">
<link rel="prefetch" href="/img/kitten.jpg">
![Page 26: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/26.jpg)
YSlow
![Page 27: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/27.jpg)
Google PageSpeed
![Page 28: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/28.jpg)
modern.IE
![Page 29: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/29.jpg)
webpagetest.org
![Page 30: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/30.jpg)
Here Are Your Blocking Resources
![Page 31: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/31.jpg)
Here Are Your Blocking Resources
Advertising!
![Page 32: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/32.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 33: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/33.jpg)
It Happens in 16 Milliseconds?
From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
![Page 34: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/34.jpg)
Adventures in Dirty Layout
:visible
:hidden
![Page 35: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/35.jpg)
"The Dot That Ate Performance"
console.time("init");
$("body").removeClass("activated");
$("p:visible").css("color", "blue");
console.timeEnd("init");
![Page 36: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/36.jpg)
"Hey Browser Can I Bug You?"
30 ms
![Page 37: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/37.jpg)
What If We Track Visibility?
console.time("init");
$("body").removeClass("activated");
$("p.visible").css("color", "blue");
console.timeEnd("init");
![Page 38: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/38.jpg)
"Never Mind Browser, I Know This"
8 ms
![Page 39: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/39.jpg)
Chrome's Yellow Triangle
![Page 40: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/40.jpg)
IE11: Layout after offsetWidth/Height
![Page 41: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/41.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 42: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/42.jpg)
Using Dev Tools Profilers
When JavaScript really is the
problem (or seems to be), a
profiler can find the hot spots.
![Page 43: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/43.jpg)
A Real Site: gimmickbook.com
![Page 44: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/44.jpg)
• Stutters during infinite scroll
• Seems to get worse as the page grows
• Using the jQuery Masonry plugin
What's Wrong?
![Page 45: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/45.jpg)
What's Wrong?
Faster!
![Page 46: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/46.jpg)
Forced Layout/Reflow
Chrome's Event tab shows JavaScript has forced layouts
![Page 47: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/47.jpg)
Chrome Profile ("Tree")
![Page 48: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/48.jpg)
IE 11 Profile ("Call Tree")
![Page 49: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/49.jpg)
What Does This Code Look Like?
![Page 50: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/50.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 51: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/51.jpg)
You Have the Tools, Use Them!
![Page 52: jQuery Conference San Diego 2014 - Web Performance](https://reader033.vdocuments.net/reader033/viewer/2022051610/5481afc0b47959e70c8b45c7/html5/thumbnails/52.jpg)
Twitter: @davemethvin
GitHub: @dmethvin
IRC (Freenode): DaveMethvin #jquery-dev
Email: [email protected]
$("#talk")
.find(".useful")
.append(contactInfo)
.end();