tech headline - javascript performance

1 /

JavaScript Performance

You like it, it likes you! Rodrigo Castilho aka RODCAST Senior Front End Engineer @rodcast 3/29/2012

/ 2

Sad But True

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 /

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.



5 /

I'm your pain



• Consumers are less tolerant than ever The consumers find bad performance unacceptable. They want websites to perform

well during peak periods.


6 /

I'm your pain




• Premature optimization is the root of all evil Avoiding poor quality coding can also improve performance, by avoiding obvious

"slowdowns".

7 /

Assigned books

/ 8

Know Your Enemy

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 /

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.



11 /

Come on

• Browser wars


• Plugins, plugins and more plugins Be careful with them, they can be evil.


12 /

Come on

• Browser wars



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

Browser wars

• V8 by Chrome

• TraceMonkey by Firefox

• SquirrelFish by Safari

• JScript by Internet Explorer

/ 14

Paranoid

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 /

Var, var, var…

17 /

Logical operator

18 /

Logical operator

19 /

Special operator

20 /

Bitwise operator

21 /

Cache… all the time

22 /

Stewie Griffin

I'm sure he was thinking of Internet Explorer.

/ 23

The Evil That Men Do

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 /


• 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.




26 /


• Use HTML 5


• 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.



27 /


• Use HTML 5



• 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.


28 /


• Use HTML 5




• Change CSS classes not styles You may have heard that changing CSS classes is more optimal than changing

styles.

29 /

Beavis and Butt-Head

Watching the presentation.

/ 30

Roots Bloody Roots

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 /

Native JavaScript is better (normally)

33 /


• 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.




34 /




• 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.



35 /





• 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.


36 /

Cache manifest (appCache)

37 /






• Local Storage (cookies on steroids) Local Storage is a dead simple API for storing information on the client side.

38 /

Local Storage

39 /

Stewie Griffin

Again, again I love repetition...

Stewie begins taking steroids after he is beat up by a baby girl.

/ 40

Before I Forget

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 /

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



43 /

Hold your breath

• Without bugs


• 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



44 /

Hold your breath

• Without bugs


• 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.


45 /

Hold your breath

• Without bugs


• Never forget


• JSPerf is your partner A performance playground for JavaScript developers that allows to write your tests.

46 /

Homer Simpson

WOOHOO!!! I hope I haven't forgotten anything.

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

Thank You.

tech headline - javascript performance

Technology