Downloaded 12 times
Uploaded byRodrigo Castilho
Tech Headline - JavaScript Performance
The document discusses the importance of frontend performance in web development, noting that approximately 90% of end-user response time is spent on the frontend. It emphasizes the need for modern coding practices, such as using the latest technologies, minimizing the use of jQuery, and employing strategies like lazy loading to enhance performance. Moreover, it highlights the necessity of bug-free code and testing tools to maintain quality and speed in web applications.
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Tech Headline - JavaScript Performance
- 1. JavaScript Performance You likeit, it likes you! Rodrigo Castilho aka RODCAST Senior Front End Engineer @rodcast 3/29/2012 /1
- 2. Sad But True /2
- 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 /3
- 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 /4
- 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 /5
- 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". /6
- 7.
- 8.
- 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) /9
- 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) / 10
- 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) / 11
- 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. / 12
- 13. Browser wars • V8 by Chrome • TraceMonkey by Firefox • SquirrelFish by Safari • JScript by Internet Explorer / 13
- 14. Paranoid / 14
- 15. Nothing seems tosatisfy • 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… / 15
- 16. Var, var, var… / 16
- 17. Logical operator / 17
- 18. Logical operator / 18
- 19. Special operator / 19
- 20. Bitwise operator / 20
- 21. Cache… all thetime / 21
- 22. Stewie Griffin I'm sure he was thinking of Internet Explorer. / 22
- 23. The Evil ThatMen Do / 23
- 24. Living on therazor'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 / 24
- 25. Living on therazor'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 / 25
- 26. Living on therazor'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 / 26
- 27. Living on therazor'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 / 27
- 28. Living on therazor'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. / 28
- 29. Beavis and Butt-Head Watching the presentation. / 29
- 30. Roots Bloody Roots / 30
- 31. I'll take youto 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) / 31
- 32. Native JavaScript isbetter (normally) / 32
- 33. I'll take youto 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) / 33
- 34. I'll take youto 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) / 34
- 35. I'll take youto 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) / 35
- 36.
- 37. I'll take youto 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. / 37
- 38. Local Storage / 38
- 39. Stewie Griffin Again, again I love repetition... Stewie begins taking steroids after he is beat up by a baby girl. / 39
- 40. Before I Forget / 40
- 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 / 41
- 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 / 42
- 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 / 43
- 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 / 44
- 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. / 45
- 46. Homer Simpson WOOHOO!!!I hope I haven't forgotten anything. / 46
- 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 / 47
- 48.