Your SlideShare is downloading. ×
0
jQuery and Web Performance
Dave Methvin
President, jQuery Foundation
Lead Developer, jQuery Core
March 5, 2014
April 8, 2014: So Long, Windows XP!
What that means...
● IE6 is dead (well maybe not in China)
○ ie6countdown.com
● IE7 is supported on Windows Vista
○ so rea...
PERFORMANCE
"JavaScript / jQuery /
browsers are a bad
developer environment!"
A poor
workman
blames his
tools
How the Programmer Sees It
JavaScript Browser
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTML
Content caching
Keyboard
Touch
Screen paints
Layout calculation
...
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTML
Content caching
Keyboard
Touch
Screen paints
Layout calculation
...
How Do I Make My Page Fast?
How Do I Make My Page Fast?
1) Find slow stuff
2) Make it not slow
What you can
measure using
tools today
How Do I Find the Slow Stuff?
What you can
measure using
tools today
What you
should
measure
How Do I Find the Slow Stuff?
JavaScript Loop Optimization
JavaScript Loop Optimization
Slowest looping style still only
takes 140 microseconds to do
10 iterations of a loop
“Programmers waste enormous amounts of time
thinking about, or worrying about, the speed of
noncritical parts of their pro...
“Programmers waste enormous amounts of time
thinking about, or worrying about, the speed of
noncritical parts of their pro...
This Should Be You, 97% of the Time
● Client-side issues often can be solved by
"peephole" optimizations and don't require
massive architecture changes
● Many...
Page Load Performance
How the Browser Loads Pages
1) Pre-fetcher scans HTML for resources (images, CSS,
scripts) and requests them immediately
2...
Now It May Seem Obvious, But...
● Resources not in the HTML file can't be prefetched,
resulting in further delays
○ e.g. s...
Manual Prefetching
Lets the browser get a running start on
templates or deeper pages in the site.
<link rel="dns-prefetch"...
YSlow
Google PageSpeed
modern.IE
webpagetest.org
Waterfall Diagram
Here Are Your Blocking Resources
Advertising!
You Have 16 Milliseconds … Begin
60 frames/second ~ 16 milliseconds/frame
● Long-running operations can make the page
appe...
It Happens in 16 Milliseconds?
From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
Adventures in Dirty Layout
:visible
:hidden
:visible and :hidden are ...
● jQuery custom selectors
○ requires Sizzle, not native querySelectorAll
But that's not why t...
"The Dot That Ate Performance"
console.time("init");
$("body").removeClass("activated");
$("p:visible").css("color", "blue...
"Hey Browser Can I Bug You?"
30 ms
What If We Track Visibility?
console.time("init");
$("body").removeClass("activated");
$("p.visible").css("color", "blue")...
"Never Mind Browser, I Know This"
8 ms
Chrome's Yellow Triangle
IE11: Layout after offsetWidth
Class Names for Application State
● Simple rule:
○ If it's not layout, don't use classes
● Why?
○ The browser may recalcul...
● Look out for :visible or :hidden
● Minimize document-wide style/class
changes
○ Use data- attrs or jQuery `.data()` if n...
Let CSS Be CSS
● Avoid JavaScript for presentation
● Use CSS transitions
● Use CSS animations
● Use stylesheets, not style...
Using Dev Tools Profilers
When JavaScript really is the
problem (or seems to be), a
profiler can find the hot spots.
A Real Site: gimmickbook.com
● Stutters during infinite scroll
● Seems to get worse as the page grows
● Using the jQuery Masonry plugin
What's Wrong?
Faster!
Forced Layout/Reflow
Chrome's Event tab shows JavaScript has forced layouts
Chrome Profile ("Tree")
IE 11 Profile ("Call Tree")
What Does This Code Look Like?
Moral of the Story
Infinite scroll should not be used with
full-page layout algorithms!
In this case, the plugin could be
...
You Have the Tools, Use Them!
I Don't Know This Guy, But...
$("#talk")
.find(".useful")
.append(contactInfo)
.end();
Twitter: @davemethvin
GitHub: @dmethvin
IRC (Freenode): DaveMethv...
jQuery Conference Toronto
jQuery Conference Toronto
jQuery Conference Toronto
jQuery Conference Toronto
jQuery Conference Toronto
jQuery Conference Toronto
jQuery Conference Toronto
jQuery Conference Toronto
jQuery Conference Toronto
Upcoming SlideShare
Loading in...5
×

jQuery Conference Toronto

840

Published on

jQueryTO

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
840
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Conference Toronto"

  1. 1. jQuery and Web Performance Dave Methvin President, jQuery Foundation Lead Developer, jQuery Core
  2. 2. March 5, 2014
  3. 3. April 8, 2014: So Long, Windows XP!
  4. 4. 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
  5. 5. PERFORMANCE
  6. 6. "JavaScript / jQuery / browsers are a bad developer environment!"
  7. 7. A poor workman blames his tools
  8. 8. How the Programmer Sees It JavaScript Browser
  9. 9. Web Developer's Reality Browser JavaScript Mouse CSS HTML Content caching Keyboard Touch Screen paints Layout calculation Image decoding Focus management Network requests
  10. 10. Web Developer's Reality Browser JavaScript Mouse CSS HTML Content caching Keyboard Touch Screen paints Layout calculation Image decoding Focus management Network requests Optional
  11. 11. How Do I Make My Page Fast?
  12. 12. How Do I Make My Page Fast? 1) Find slow stuff 2) Make it not slow
  13. 13. What you can measure using tools today How Do I Find the Slow Stuff?
  14. 14. What you can measure using tools today What you should measure How Do I Find the Slow Stuff?
  15. 15. JavaScript Loop Optimization
  16. 16. JavaScript Loop Optimization Slowest looping style still only takes 140 microseconds to do 10 iterations of a loop
  17. 17. “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
  18. 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. 19. This Should Be You, 97% of the Time
  20. 20. ● 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
  21. 21. Page Load Performance
  22. 22. 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
  23. 23. 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"
  24. 24. 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">
  25. 25. YSlow
  26. 26. Google PageSpeed
  27. 27. modern.IE
  28. 28. webpagetest.org
  29. 29. Waterfall Diagram
  30. 30. Here Are Your Blocking Resources Advertising!
  31. 31. 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
  32. 32. It Happens in 16 Milliseconds? From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
  33. 33. Adventures in Dirty Layout :visible :hidden
  34. 34. :visible and :hidden are ... ● jQuery custom selectors ○ requires Sizzle, not native querySelectorAll But that's not why they're slow!
  35. 35. "The Dot That Ate Performance" console.time("init"); $("body").removeClass("activated"); $("p:visible").css("color", "blue"); console.timeEnd("init");
  36. 36. "Hey Browser Can I Bug You?" 30 ms
  37. 37. What If We Track Visibility? console.time("init"); $("body").removeClass("activated"); $("p.visible").css("color", "blue"); console.timeEnd("init");
  38. 38. "Never Mind Browser, I Know This" 8 ms
  39. 39. Chrome's Yellow Triangle
  40. 40. IE11: Layout after offsetWidth
  41. 41. 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
  42. 42. ● 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
  43. 43. 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
  44. 44. Using Dev Tools Profilers When JavaScript really is the problem (or seems to be), a profiler can find the hot spots.
  45. 45. A Real Site: gimmickbook.com
  46. 46. ● Stutters during infinite scroll ● Seems to get worse as the page grows ● Using the jQuery Masonry plugin What's Wrong?
  47. 47. Faster!
  48. 48. Forced Layout/Reflow Chrome's Event tab shows JavaScript has forced layouts
  49. 49. Chrome Profile ("Tree")
  50. 50. IE 11 Profile ("Call Tree")
  51. 51. What Does This Code Look Like?
  52. 52. 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.
  53. 53. You Have the Tools, Use Them!
  54. 54. I Don't Know This Guy, But...
  55. 55. $("#talk") .find(".useful") .append(contactInfo) .end(); Twitter: @davemethvin GitHub: @dmethvin IRC (Freenode): DaveMethvin #jquery-dev Email: dave@jquery.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×