Tech Headline - JavaScript Performance

Whenever possible you should use this items.

All items shown are very important and not are a secret.

There are many ways of making the system work better and I’m not trying to reinvent the wheel.

You like it, it likes you!

Transcript

1. 1 / JavaScript Performance You like it, it likes you! Rodrigo Castilho aka RODCAST Senior Front End Engineer @rodcast 3/29/2012
2. / 2 Sad But True
3. 3 / I'm your pain • Frontend is responsible for most of the performance Around 90% of the end-user response time is spent on the frontend. • What worked in the past, may not work today • Consumers are less tolerant than ever • Premature optimization is the root of all evil
4. 4 / I'm your pain • Frontend is responsible for most of the performance • What worked in the past, may not work today Books demonstrate that there’s stuff that may not work in modern browsers because the browsers are in constant changes. • Consumers are less tolerant than ever • Premature optimization is the root of all evil
5. 5 / I'm your pain • Frontend is responsible for most of the performance • What worked in the past, may not work today • Consumers are less tolerant than ever The consumers find bad performance unacceptable. They want websites to perform well during peak periods. • Premature optimization is the root of all evil
6. 6 / I'm your pain • Frontend is responsible for most of the performance • What worked in the past, may not work today • Consumers are less tolerant than ever • Premature optimization is the root of all evil Avoiding poor quality coding can also improve performance, by avoiding obvious "slowdowns".
7. 7 / Assigned books
8. / 8 Know Your Enemy
9. 9 / Come on • Browser wars The function that runs lightning fast on one browser may perform sluggishly on another. • Use the latest version of jQuery • Plugins, plugins and more plugins • HTML and CSS (They are also very important)
10. 10 / Come on • Browser wars • Use the latest version of jQuery The newest version is usually the best one. Also don’t forget to test your code after changing your jQuery core version. • Plugins, plugins and more plugins • HTML and CSS (They are also very important)
11. 11 / Come on • Browser wars • Use the latest version of jQuery • Plugins, plugins and more plugins Be careful with them, they can be evil. • HTML and CSS (They are also very important)
12. 12 / Come on • Browser wars • Use the latest version of jQuery • Plugins, plugins and more plugins • HTML and CSS (They are also very important) JavaScript doesn't work alone it also needs a set of other things for it to load faster. Validate your HTML and don't forget to test your pages.
13. 13 / Browser wars • V8 by Chrome • TraceMonkey by Firefox • SquirrelFish by Safari • JScript by Internet Explorer
14. / 14 Paranoid
15. 15 / Nothing seems to satisfy • 1 byte or 1ms is very precious. • Persistency is the key to a better user experience. • Let me give some examples with Expressions and Operators: • Chain, comparison, condition, special, bitwise, logical OR/AND…
16. 16 / Var, var, var…
17. 17 / Logical operator
18. 18 / Logical operator
19. 19 / Special operator
20. 20 / Bitwise operator
21. 21 / Cache… all the time
22. 22 / Stewie Griffin I'm sure he was thinking of Internet Explorer.
23. / 23 The Evil That Men Do
24. 24 / Living on the razor's edge • Use HTML 5 The new HTML5 standard comes with a lighter DOM structure in mind. Lighter DOM structure means less elements to traverse for jQuery and better load performance. So, switch to it whenever it's possible. • Best Practices for a Faster Web App with HTML5 • Load content On-Demand (Lazy Load) • Use the correct method .bind() vs .live() vs .delegate() vs .on() • Change CSS classes not styles
25. 25 / Living on the razor's edge • Use HTML 5 • Best Practices for a Faster Web App with HTML5 Use web storage in place of cookies. Use CSS Transitions instead of JavaScript animation. Use client-side databases instead of server round-trips. • Load content On-Demand (Lazy Load) • Use the correct method .bind() vs .live() vs .delegate() vs .on() • Change CSS classes not styles
26. 26 / Living on the razor's edge • Use HTML 5 • Best Practices for a Faster Web App with HTML5 • Load content On-Demand (Lazy Load) An AJAX pattern is to load JavaScript dynamically or when the user runs a feature that requires your script. • Use the correct method .bind() vs .live() vs .delegate() vs .on() • Change CSS classes not styles
27. 27 / Living on the razor's edge • Use HTML 5 • Best Practices for a Faster Web App with HTML5 • Load content On-Demand (Lazy Load) • Use the correct method .bind() vs .live() vs .delegate() vs .on() With jQuery 1.7, new method that you should use is on() is the combination of bind, live and delegate method. • Change CSS classes not styles
28. 28 / Living on the razor's edge • Use HTML 5 • Best Practices for a Faster Web App with HTML5 • Load content On-Demand (Lazy Load) • Use the correct method .bind() vs .live() vs .delegate() vs .on() • Change CSS classes not styles You may have heard that changing CSS classes is more optimal than changing styles.
29. 29 / Beavis and Butt-Head Watching the presentation.
30. / 30 Roots Bloody Roots
31. 31 / I'll take you to a place • Use jQuery only when it’s absolutely necessary Whenever possible you should not use it. Remember it’s sometimes more efficient to use regular JavaScript. • Use requestAnimationFrame instead of setInterval/setTimeout • Modernizr to give the user the experience expected • Cache Manifest (appCache) • Local Storage (cookies on steroids)
32. 32 / Native JavaScript is better (normally)
33. 33 / I'll take you to a place • Use jQuery only when it’s absolutely necessary • Use requestAnimationFrame instead of setInterval/setTimeout It throttles the animation for inactive tabs, so it won’t sap your mobile device’s battery if you leave it open in the background. • Modernizr to give the user the experience expected • Cache Manifest (appCache) • Local Storage (cookies on steroids)
34. 34 / I'll take you to a place • Use jQuery only when it’s absolutely necessary • Use requestAnimationFrame instead of setInterval/setTimeout • Modernizr to give the user the experience expected Modernizr is a JavaScript library that detects the features your browser can support, like HTML 5 and CSS3 .It let you manage what to do if the browser don't show something in the right way. • Cache Manifest (appCache) • Local Storage (cookies on steroids)
35. 35 / I'll take you to a place • Use jQuery only when it’s absolutely necessary • Use requestAnimationFrame instead of setInterval/setTimeout • Modernizr to give the user the experience expected • Cache Manifest (appCache) The application cache also persists between browser sessions. So, a web application that was previously used on the computer or device can continue to work offline - for example, when iOS has no network or is in airplane mode. • Local Storage (cookies on steroids)
36. 36 / Cache manifest (appCache)
37. 37 / I'll take you to a place • Use jQuery only when it’s absolutely necessary • Use requestAnimationFrame instead of setInterval/setTimeout • Modernizr to give the user the experience expected • Cache Manifest (appCache) • Local Storage (cookies on steroids) Local Storage is a dead simple API for storing information on the client side.
38. 38 / Local Storage
39. 39 / Stewie Griffin Again, again I love repetition... Stewie begins taking steroids after he is beat up by a baby girl.
40. / 40 Before I Forget
41. 41 / Hold your breath • Without bugs You will agree that performance is very important but "bug free" is the most important thing of all. Then you should fix the bugs and not forget the performance. • Create unit tests • Never forget • Use the powerful tools in your favor • JSPerf is your partner
42. 42 / Hold your breath • Without bugs • Create unit tests The best way to test a JavaScript code is the human way but you can still use some automated tools. • Never forget • Use the powerful tools in your favor • JSPerf is your partner
43. 43 / Hold your breath • Without bugs • Create unit tests • Never forget Make JavaScript and CSS External Minify JavaScript and CSS Make Ajax Cacheable Gzip Components Put Stylesheets at Top Put Scripts at Bottom Optimize Images and create CSS Sprites • Use the powerful tools in your favor • JSPerf is your partner
44. 44 / Hold your breath • Without bugs • Create unit tests • Never forget • Use the powerful tools in your favor JSLint/JSHint, JSPerf, JSMeter, FireQuery, JS Console, FireUnit, CSS Lint, Web Developer, Firebug, JSView, Fiddler, HTTPFox, Live HTTP headers, YUI Compressor, Google Closure, Microsoft Ajax Minifier, YSlow, Google Page Speed, MySpace Performance Tracker, IBM Page Detailer, HTTPD Watch, Web Page Test, Speed Tracer, Dyna Tracer, ZocDoc, ShowSlow, Smush.it between other tools. • JSPerf is your partner
45. 45 / Hold your breath • Without bugs • Create unit tests • Never forget • Use the powerful tools in your favor • JSPerf is your partner A performance playground for JavaScript developers that allows to write your tests.
46. 46 / Homer Simpson WOOHOO!!! I hope I haven't forgotten anything.
47. 47 / Musics mentioned • Sad But True – Metallica • Know Your Enemy - Rage Against The Machine • Paranoid - Black Sabbath • The Evil That Men Do - Iron Maiden • Roots Bloody Roots - Sepultura • Before I Forget - Slipknot
48. Thank You.