Tech Headline - JavaScript Performance
Upcoming SlideShare
Loading in...5
×
 

Tech Headline - JavaScript Performance

on

  • 2,402 views

Whenever possible you should use this items. ...

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!

Statistics

Views

Total Views
2,402
Views on SlideShare
2,358
Embed Views
44

Actions

Likes
1
Downloads
10
Comments
0

8 Embeds 44

http://www.linkedin.com 17
http://mcdave.net 16
http://tumblr.mcdave.net 5
http://paper.li 2
http://nodeslide.herokuapp.com 1
http://safe.tumblr.com 1
http://www.elportador.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tech Headline - JavaScript Performance Tech Headline - JavaScript Performance Presentation Transcript

  • JavaScript PerformanceYou like it, it likes you!Rodrigo Castilho aka RODCASTSenior Front End Engineer@rodcast3/29/2012 /1
  • Sad But True /2
  • Im 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
  • Im 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
  • Im 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
  • Im 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
  • Assigned books /7
  • Know Your Enemy /8
  • 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
  • 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
  • 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
  • Come on • Browser wars • Use the latest version of jQuery • Plugins, plugins and more plugins • HTML and CSS (They are also very important) JavaScript doesnt work alone it also needs a set of other things for it to load faster. Validate your HTML and dont forget to test your pages. / 12
  • Browser wars • V8 by Chrome • TraceMonkey by Firefox • SquirrelFish by Safari • JScript by Internet Explorer / 13
  • Paranoid / 14
  • 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
  • Var, var, var… / 16
  • Logical operator / 17
  • Logical operator / 18
  • Special operator / 19
  • Bitwise operator / 20
  • Cache… all the time / 21
  • Stewie Griffin Im sure he was thinking of Internet Explorer. / 22
  • The Evil That Men Do / 23
  • Living on the razors 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 its 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
  • Living on the razors 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
  • Living on the razors 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
  • Living on the razors 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
  • Living on the razors 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
  • Beavis and Butt-Head Watching the presentation. / 29
  • Roots Bloody Roots / 30
  • Ill 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
  • Native JavaScript is better (normally) / 32
  • Ill 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
  • Ill 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 dont show something in the right way. • Cache Manifest (appCache) • Local Storage (cookies on steroids) / 34
  • Ill 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
  • Cache manifest (appCache) / 36
  • Ill 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
  • Local Storage / 38
  • Stewie Griffin Again, again I love repetition... Stewie begins taking steroids after he is beat up by a baby girl. / 39
  • Before I Forget / 40
  • 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
  • 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
  • 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
  • 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
  • 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
  • Homer Simpson WOOHOO!!! I hope I havent forgotten anything. / 46
  • 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
  • Thank You.