jQuery Conference Toronto

  • 687 views
Uploaded on

jQueryTO

jQueryTO

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
687
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
11
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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