The State of jQuery, and some tips on getting the best performance from modern browser engines.

1. The State of jQuery
Dave Methvin
President, jQuery Foundation
jQuery Conference Austin
September, 2013

3. • Created in March 2012
• Coordinates jQuery team work
o Code
o Documentation
o Infrastructure
o Events
The jQuery Foundation

4. • A non-profit organization
• Funded by
o Conferences
o Donations
o Memberships
o YOU or your company can be a member
 http://jquery.org/join
The jQuery Foundation Is...

5. Founding Members
Platinum Member

6. Gold Members

7. • http://github.com/jquery
• jQuery Core, UI, Mobile
• Sizzle selector engine
• QUnit unit test framework
• jQuery Migrate plugin
• TestSwarm CI testing
• Documentation sites
jQuery Foundation Projects

8. ● Support jQuery projects
● Support web developers
● Support web standards
● Advocate for developer needs
● Participate in standards process
○ W3C
○ ECMA 262 (JavaScript)
jQuery Foundation Initiatives

9. Important Incoming News

10. • jQuery 1.x vs. 2.x
o jQuery 1.x still supports IE 6/7/8
o jQuery 2.x supports modern browsers
o Both are maintained by the team
The jQuery Core Plan

11. • Released jQuery 1.9 in January
• Released jQuery 2.0 in April
• Released jQuery 1.10 in June
• API version sync
o 1.10.0 2.0.0
o 1.11.0 2.1.0
o etc.
o Patch versions may be on just one branch
1.x/2.x APIs Stay in Sync

12. • Identifies things your code is doing that
jQuery 1.9+ doesn't support anymore
• Actually makes older code work
• Lets you use jQuery 1.9+ with code that
hasn't been upgraded yet
jQuery Migrate Plugin

13. jQuery Migrate Example

14. • Shown in the uncompressed version
• Problem and solutions documented
jQuery Migrate Warnings

15. In jQuery, every change is
a breaking change for
some poor developer.
The Moral of the Story

16. Coming This Fall: jQuery
1.11/2.1

17. Coming This Fall: jQuery
1.11/2.1

18. ● jQuery team will publish to Bower
● jQuery team will publish to npm
● You can manage dependencies
○ bower install jquery
○ bower install jquery#1.11.0
○ npm install jquery
● Use a component.json file for Bower
● Use a package.json file for npm
1.11/2.1: Dependency
Management

19. • Asynchronous Module Definition
• AMD takes care of internal dependencies
• You can choose the modules to load
• Load just what you need
• Use r.js to build a single file
• More flexible and granular than previous
custom grunt build process
1.11/2.1: Uses AMD internally

20. ● Previously: jQuery runs feature detects
all at once, on jquery.js/page load
○ Impacts page load performance
● Now: Individual feature detect runs the
first time the feature is used
○ Defers the impact until needed
○ Doesn't run detects for sub-modules that
aren't used/called by your code!
1.11/2.1: Just-In-Time Detects

21. • You don't have to use Bower
• You don't have to use npm
• You don't have to use AMD
• Just include from a <script> tag
• You'll still get the performance boost
1.11/2.1: Still can use a CDN!

22. • Beta coming out within a month
• Give it a try
• Tell us when you think it's ready
o Which means you have to try it
1.11/2.1: When?

23. Let's Shut This Guy Up, Forever

24. ● Dimensional changes make the browser
recalculate/redraw the page
○ Changing element sizes
○ Adding/removing classes or IDs
○ Adding new content
● We've reduced these where possible
○ Ex: .removeClass() when nothing changes
● A lot still depends on jQuery developers
1.11/2.1 Goal: Fewer Forced
Layouts

25. "A poor workman blames his tools."
Know How Your Tools Work

26. "Плохому танцору яйца мешают."
Know How Your Tools Work

27. "A poor dancer blames his balls."
Know How Your Tools Work

28. ● jQuery simplifies/shortens code
● It doesn't try to hide the browser model
● You still need to Know the Browser
● Especially the layout engine
Understand the Browser

29. ● A.K.A. Reflow
● Whenever you change the HTML or CSS
on a page, the browser must re-apply
any applicable CSS rules, and must
recalculate the layout whenever
dimensions of elements change.
● May affect all or just part of the page.
What is a Layout?

30. ● Make a change to the document that
(potentially) affects dimensions
● Immediately ask the browser about the
new dimensions
○ "Immediately" meaning, "Before control
returns to the browser from your script."
What is a Forced Layout?

31. ● Slow page load time
○ Often a result of .ready() abuse
● "Janky" page behavior when scrolling or
during animations
Impact of Too Many Layouts

32. http://jsfiddle.net/qjncp/show/
$(".box").on("mouseover mouseout", function(e) {
$(this).toggleClass("highlight", e.type === "mouseover");
var size = $(this).width();
$("#heart").width(size);
});
Simple Forced Layout Example

33. http://jsfiddle.net/qjncp/show/
$(".box").on("mouseover mouseout", function(e) {
$(this).toggleClass("highlight", e.type === "mouseover");
var size = $(this).width();
$("#heart").width(size);
});
Simple Forced Layout Example
FORCED LAYOUT

34. http://jsfiddle.net/qjncp/show/
● Google Chrome
● Internet Explorer 11
Demo: Finding Forced Layouts

35. ● Scroll event occurs
● Inside the scroll event handler
a. Add a little bit of content
b. Ask the browser, "Did I fill it enough?"
c. If not, go back to (a)
d. Several times through...exit
Patterns To Avoid: Infinite Scroll

36. ● Scroll event occurs
● Inside the scroll event handler
a. Add a little bit of content
b. Ask the browser, "Did I fill it enough?"
c. If not, go back to (a)
d. Several times through...exit
Patterns To Avoid: Infinite Scroll
FULL-PAGE FORCED
LAYOUT ON EVERY
SCROLL EVENT!
FULL-PAGE FORCED
LAYOUT ON EVERY
SCROLL EVENT!
(cough, Facebook)

37. ● Use the regularity of grid layouts to
simplify your calculations, instead of
asking the browser to calculate!
● E.g., each row is 200px high, the page
has scrolled down 740px, we need to add
4 more rows of content
Infinite Scroll Strategy

38. Don't ask the browser a
question that is hard for it
to figure out but easy for
you to know (or track).
$(":hidden") vs $(".hidden")
Avoiding Forced Layout

39. ● jQuery selector extension
● Can't use fast native DOM selector code
● ":hidden" elements defined as "don't take
up space in the document"
● Selecting these elements forces layout if
anything has changed in the DOM
$(":hidden")

40. ● Standard CSS selector (by class)
● Uses fast DOM selector code
● Just needs to look at the DOM tree
○ Not CSS, even if CSS has recently changed
● Won't force a layout
● Can be combined with CSS transitions
● Fast and battery efficient
$(".hidden")

41. Throttle high frequency
events like mousemove or
scroll; handle with
requestAnimationFrame
www.html5rocks.com/en/tutorials/speed/rendering/
Avoiding Forced Layout

42. Modern browsers have the tools to find
these issues and make you look like a
web development star!
Know Your Tools

43. Twitter: @davemethvin
GitHub: @dmethvin
IRC (Freenode): DaveMethvin #jquery-dev
Email: dave@jquery.com
Questions?