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!

1. JavaScript Performance
You like it, 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. Assigned books
/7

8. Know Your Enemy
/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 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…
/ 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 the time
/ 21

22. Stewie Griffin
I'm sure he was thinking of Internet Explorer.
/ 22

23. The Evil That Men Do
/ 23

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
/ 24

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
/ 25

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
/ 26

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
/ 27

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

29. Beavis and Butt-Head
Watching the presentation.
/ 29

30. Roots Bloody Roots
/ 30

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)
/ 31

32. Native JavaScript is better (normally)
/ 32

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)
/ 33

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)
/ 34

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)
/ 35

36. Cache manifest (appCache)
/ 36

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.
/ 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. Thank You.