jQuery Conference San Diego 2014 - Web Performance
1. jQuery and Web Performance
Dave Methvin
President, jQuery Foundation
Lead Developer, jQuery Core
2. jQuery Foundation
● 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!)
3. 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
18. “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
19. “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
21. Finding and Fixing the 3 Percent
•
•
•
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)
23. 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!)
24. Now It May Seem Obvious, But...
•
Resources not already in the HTML file can't
be prefetched, resulting in further delays
o
•
e.g. stuff injected by your JavaScript/jQuery
JS frameworks or initial content rendered
from some client-side templates can make
the prefetcher useless
25. 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">
32. 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
33. It Happens in 16 Milliseconds?
From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
35. "The Dot That Ate Performance"
console.time("init");
$("body").removeClass("activated");
$("p:visible").css("color", "blue");
console.timeEnd("init");
37. What If We Track Visibility?
console.time("init");
$("body").removeClass("activated");
$("p.visible").css("color", "blue");
console.timeEnd("init");
41. Avoiding Forced Layout
●
● 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
42. Using Dev Tools Profilers
When JavaScript really is the
problem (or seems to be), a
profiler can find the hot spots.
50. 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.
