This document discusses jQuery and web performance. It begins by noting that Internet Explorer 6 is now dead, and Internet Explorer 7 and 8 are the new baselines for older applications. It then discusses various aspects of web performance, including how browsers load pages, techniques for improving performance like prefetching and avoiding forced layouts, and tools for profiling performance like developer tools and webpagetest.org. It provides an example of optimizing infinite scrolling by having JavaScript only handle new items rather than doing full page layouts. The document advocates measuring performance before optimizing and using developer tools to find hot spots in JavaScript.

1. jQuery and Web Performance
Dave Methvin
President, jQuery Foundation
Lead Developer, jQuery Core

5. March 5, 2014

8. April 8, 2014: So Long, Windows XP!

9. 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

10. PERFORMANCE

13. "JavaScript / jQuery /
browsers are a bad
developer environment!"

15. A poor
workman
blames his
tools

16. How the Programmer Sees It
JavaScript Browser

17. Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTML
Content caching
Keyboard
Touch
Screen paints
Layout calculation
Image decoding
Focus management
Network requests

18. Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTML
Content caching
Keyboard
Touch
Screen paints
Layout calculation
Image decoding
Focus management
Network requests
Optional

19. How Do I Make My Page Fast?

20. How Do I Make My Page Fast?
1) Find slow stuff
2) Make it not slow

21. What you can
measure using
tools today
How Do I Find the Slow Stuff?

22. What you can
measure using
tools today
What you
should
measure
How Do I Find the Slow Stuff?

23. JavaScript Loop Optimization

24. JavaScript Loop Optimization
Slowest looping style still only
takes 140 microseconds to do
10 iterations of a loop

25. “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

26. “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

27. This Should Be You, 97% of the Time

28. ● 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

29. Page Load Performance

30. 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

31. 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"

32. 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">

33. YSlow

34. Google PageSpeed

35. modern.IE

36. webpagetest.org

37. Waterfall Diagram

38. Here Are Your Blocking Resources
Advertising!

39. 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

40. It Happens in 16 Milliseconds?
From High Performance Browser Networking by Ilya Grigorik (O'Reilly)

41. Adventures in Dirty Layout
:visible
:hidden

42. :visible and :hidden are ...
● jQuery custom selectors
○ requires Sizzle, not native querySelectorAll
But that's not why they're slow!

43. "The Dot That Ate Performance"
console.time("init");
$("body").removeClass("activated");
$("p:visible").css("color", "blue");
console.timeEnd("init");

44. "Hey Browser Can I Bug You?"
30 ms

45. What If We Track Visibility?
console.time("init");
$("body").removeClass("activated");
$("p.visible").css("color", "blue");
console.timeEnd("init");

46. "Never Mind Browser, I Know This"
8 ms

47. Chrome's Yellow Triangle

48. IE11: Layout after offsetWidth

49. 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

50. ● 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

51. 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

52. Using Dev Tools Profilers
When JavaScript really is the
problem (or seems to be), a
profiler can find the hot spots.

53. A Real Site: gimmickbook.com

54. ● Stutters during infinite scroll
● Seems to get worse as the page grows
● Using the jQuery Masonry plugin
What's Wrong?

55. Faster!

56. Forced Layout/Reflow
Chrome's Event tab shows JavaScript has forced layouts

57. Chrome Profile ("Tree")

58. IE 11 Profile ("Call Tree")

59. What Does This Code Look Like?

61. 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.

62. You Have the Tools, Use Them!

63. I Don't Know This Guy, But...

64. $("#talk")
.find(".useful")
.append(contactInfo)
.end();
Twitter: @davemethvin
GitHub: @dmethvin
IRC (Freenode): DaveMethvin #jquery-dev
Email: dave@jquery.com