JavaScript Performance andBest Practices Doris Chen Ph.D. Developer Evangelist doris.chen@microsoft.com http://blogs.msdn....
Who am I?• Developer Evangelist at Microsoft based in Silicon Valley, CA   – Blog: http://blogs.msdn.com/b/dorischen/   – ...
Agenda• Optimization Strategies• JavaScript Best Practices
Ajaxify• The client and server are in a dialog• Make the messages between them as small as  possible• The client does not ...
Dont Optimize Without Measuring• Intuitions are often wrong• A single trial is unreliable. Timers can be off by  as much a...
Manual Timing Methodfunction myFunctionToTest() {var start = new Date().getTime();... // body of the functionvar totalTime...
Only speed up things that take a lot of                time• If profiling shows that you are spending most  of your time i...
Dont Tune For Quirks• Some browsers have surprising inefficiencies• A trick that is faster on Browser A might be  slower o...
Put stylesheets at the top (css)>   Want the browser to display whatever content    it has as soon as possible       Avoi...
Move scripts to the bottom (javascript)>   Scripts block parallel downloads across all    hostnames>   Scripts block rende...
JavaScript Best Practices> Provide a clean separation of content, CSS, and  JavaScript> De-reference unused objects> Think...
Separation of content, CSS, and                      JavaScript>   A rich web application user interface is made up    of ...
Inline or External• Inline JavaScript and CSS in front page, but dynamically  download the external files after the page h...
De-reference unused objects //delete objects var foo=Delete Me; //do something with foo delete foo;  // detach listenersso...
Think Asynchronous> Prevents browsers from halting execution of a  code block that might take a long time> Semi-Asynchrono...
Working with Objects (I)var i;for (i = 0; i < divs.length; i += 1) {    divs[i].style.color = "black";    divs[i].style.bo...
Strings• Concatenation with +  – Each operation allocates memory  – foo = a + b;• Concatenate with array.join()  – The con...
Working with Objects (II)               String Concatenationwindow.tablebuilder = function() {    var _header, _rows = [];...
Defer Loading Resources> If you have a large library or set of libraries,  you dont need to load everything when a  page i...
Example: Defer Loading Resources<script>var deferredLibs = [ /resources/jquery.js ,/resources/base.js];addLibraries(libs :...
Example: Defer Loading Resources (cont.)function addLibraries( libs, callback) {  for(var i=0; i < libs.length; i+=1) {   ...
JavaScript Best Practices> Provide a clean separation of content, CSS, and  JavaScript> De-reference unused objects> Think...
Use === Instead of ==• two different kinds of equality operators: ===  | !== and == | !=• same type and value  – === true ...
Eval = Bad   eval(string)• eval function compiles and executes a string and  returns the result   – gives us access to Jav...
Don’t Use Short-Hand • Technically, get away with omitting most curly   braces and semi-colons if(someVariableExists)    x...
Declare Variables Outside of the For              Statement     for(var i = 0; i < someArray.length; i++) {          var c...
Reduce Globals    "By reducing your global footprint to a single name, you significantly reduce    the chance of bad inter...
Dont Pass a String to "SetInterval"          or "SetTimeOut"• Never pass a string to SetInterval and  SetTimeOutsetInterva...
Use {} Instead of New Object()        var o = new Object();        o.name = Jeffrey;        o.lastName = Way;        o.som...
Use [] Instead of New Array()             var a = new Array();             a[0] = "Joe";             a[1] = Plumber;------...
Code Quality• High quality code is most likely to avoid  platform problems.• Code Conventions for the JavaScript  Programm...
JSLint -- Code Quality Tool• JSLint can help improve the robustness and  portability of your programs  – enforces style ru...
DOM Manipulation• If JavaScript were infinitely fast, most pages  would run at about the same speed.• The bottleneck tends...
Make good use of Ajax Libraries• Effective code reuse will make widgets more  effective• JavaScript Toolkits  – Wrap up aj...
Reduce the size of JavaScript file• Reduce the amount of source code to reduce  download time.• Minification deletes white...
Gzip components (server)>   you can affect users download times       Gzip supported in more browsers       Gzip general...
Resources>   Best practices and Guidelines       http://developer.yahoo.com/performance/rules.ht        ml>   Useful Site...
Upcoming Web Camps2 Days HTML5 and Web DevelopmentWebCamp  May 20-May 21st, 2011, Mountain View, CAFree, learning innovati...
JavaScript Performance andBest Practices Doris Chen Ph.D. Developer Evangelist doris.chen@microsoft.com http://blogs.msdn....
Upcoming SlideShare
Loading in …5
×

Performance Optimization and JavaScript Best Practices

8,461
-1

Published on

Performance optimization and JavaScript best practices tips are discussed in the talk. Here are some of the tips:

Put stylesheets at the top (css)
Move scripts to the bottom (javascript)
Provide a clean separation of content, CSS, and JavaScript
De-reference unused objects
Think Asynchronous
Working with Objects
Defer Loading Resources
Use JSLint -- Code Quality Tool
Reduce the size of JavaScript file
gzip
General JavaScript Coding Best Practices
Use === Instead of ==
Eval = Bad
Don’t Use Short-Hand
Reduce Globals: Namespace
Don't Pass a String to "SetInterval" or "SetTimeOut"
Use {} Instead of New Object()
Use [] Instead of New Array()

Published in: Technology

Performance Optimization and JavaScript Best Practices

  1. 1. JavaScript Performance andBest Practices Doris Chen Ph.D. Developer Evangelist doris.chen@microsoft.com http://blogs.msdn.com/b/dorischen/ Twitter @doristchen
  2. 2. Who am I?• Developer Evangelist at Microsoft based in Silicon Valley, CA – Blog: http://blogs.msdn.com/b/dorischen/ – Twitter @doristchen – Email: doris.chen@microsoft.com• Has over 13 years of experience in the software industry focusing on web technologies• Spoke and published widely at JavaOne, OReilly, SD West, SD Forum and worldwide User Groups meetings• Before joining Microsoft, Doris Chen was a Technology Evangelist at Sun Microsystems• Doris received her Ph.D. from the University of California at Los Angeles (UCLA)
  3. 3. Agenda• Optimization Strategies• JavaScript Best Practices
  4. 4. Ajaxify• The client and server are in a dialog• Make the messages between them as small as possible• The client does not need a copy of the database – just enough information to serve the user• Dont rewrite the server application in JavaScript
  5. 5. Dont Optimize Without Measuring• Intuitions are often wrong• A single trial is unreliable. Timers can be off by as much as 15 msec• Even accurate measurements can lead to wrong conclusions
  6. 6. Manual Timing Methodfunction myFunctionToTest() {var start = new Date().getTime();... // body of the functionvar totalTime = new Date().getTime() - start;}
  7. 7. Only speed up things that take a lot of time• If profiling shows that you are spending most of your time in A, dont bother optimizing C.
  8. 8. Dont Tune For Quirks• Some browsers have surprising inefficiencies• A trick that is faster on Browser A might be slower on Browser B• The performance characteristics of the next generation may be significantly different• Avoid short-term optimizations
  9. 9. Put stylesheets at the top (css)> Want the browser to display whatever content it has as soon as possible  Avoids flash of unstyled content or blank white screen> Solution: put stylesheets in document head  allows the page to render progressively> CSS at the bottom:  prohibits progressive rendering in many browsers, including Internet Explorer  browsers block rendering to avoid having to redraw elements of the page if their styles change
  10. 10. Move scripts to the bottom (javascript)> Scripts block parallel downloads across all hostnames> Scripts block rendering of everything below them in the page
  11. 11. JavaScript Best Practices> Provide a clean separation of content, CSS, and JavaScript> De-reference unused objects> Think Asynchronous> Working with Objects> Defer Loading Resources> General JavaScript Coding Best Practices 11
  12. 12. Separation of content, CSS, and JavaScript> A rich web application user interface is made up of  content (HTML/XHTML)  styles (CSS)  JavaScript> Place CSS and JavaScript code in separate files  Optimize the bandwidth usage by having CSS and JavaScript file loaded only once> Variables to decide using external or inline  multiple page views per user per session  many of pages re-use the same scripts and stylesheets
  13. 13. Inline or External• Inline JavaScript and CSS in front page, but dynamically download the external files after the page has finished loading<style>#Styles</style><body>The quick brown fox...</body><script type="text/javascript">// JavaScript logic<script>-------------------------------------------------------------------------------------• For multiple views per user, and reusable scripts/css:<link rel="stylesheet" type="text/css"href="cart.css"><body>The quick brown fox...</body><script type="text/javascript" src="cart.js">
  14. 14. De-reference unused objects //delete objects var foo=Delete Me; //do something with foo delete foo; // detach listenerssomeElement.removeEventListener(type, fn, false); // remove DOM elements someElement.parentNode.removeChild(someElement); // page onunload window.onunload= function() { /*do something*/} 14
  15. 15. Think Asynchronous> Prevents browsers from halting execution of a code block that might take a long time> Semi-Asynchronous – Like an Ajax request  Use a callback> use setTimeout() in conjunction with a callbackfunction longProcess({ name : value}, callback) { // do what needs to be done callback.apply({});}setTimeout(function() { longProcess({ name : “doris”}, function() { alert(“all done”); }}, 0);
  16. 16. Working with Objects (I)var i;for (i = 0; i < divs.length; i += 1) { divs[i].style.color = "black"; divs[i].style.border = thickness + px solid blue; divs[i].style.backgroundColor = "white";}-----------------------------------------------------------------------------------------------------------------------------------------------var border = thickness + px solid blue;var nrDivs = divs.length;var ds, i;for (i = 0; i < nrDivs; i += 1) { ds = divs[i].style; ds.color = "black"; ds.border = border; Good ds.backgroundColor = "white";}
  17. 17. Strings• Concatenation with + – Each operation allocates memory – foo = a + b;• Concatenate with array.join() – The contents of an array are concatenated into a single string – foo = [a, b].join();
  18. 18. Working with Objects (II) String Concatenationwindow.tablebuilder = function() { var _header, _rows = []; this.setHeader = function(_headers) { _header = "<tr><th>" +_headers.join("</th><th>") + "</tr>"; }; this.addRow = function(_cells) { _rows.push("<tr><td>" +_cells.join("</td><td>") + "</td></tr>"); }; this.toString = function() { return "<table>" + _header + "<tbody>" + _rows.join("") + "</tbody>" + "</table>"; };};
  19. 19. Defer Loading Resources> If you have a large library or set of libraries, you dont need to load everything when a page is loaded> Resources can be html, scripts, or css  Use Ajax Request  Add script/css links using DOM
  20. 20. Example: Defer Loading Resources<script>var deferredLibs = [ /resources/jquery.js ,/resources/base.js];addLibraries(libs : deferredLibs, function(args) { // initialize components });</script>
  21. 21. Example: Defer Loading Resources (cont.)function addLibraries( libs, callback) { for(var i=0; i < libs.length; i+=1) { var head =document.getElementsByTagName("head")[0]; var s = document.createElement("script"); // add callback tracking logic s.src = libs[i]; head.appendChild(s); }}
  22. 22. JavaScript Best Practices> Provide a clean separation of content, CSS, and JavaScript> De-reference unused objects> Think Asynchronous> Working with Objects> Defer Loading Resources> General JavaScript Coding Best Practices 22
  23. 23. Use === Instead of ==• two different kinds of equality operators: === | !== and == | !=• same type and value – === true – !== false
  24. 24. Eval = Bad eval(string)• eval function compiles and executes a string and returns the result – gives us access to JavaScript’s compiler• what the browser uses to convert strings into actions• most misused feature of the language – decreases script’s performance substantially – also poses a huge security risk because it grants far too much power to the passed in text• Avoid it if you can!
  25. 25. Don’t Use Short-Hand • Technically, get away with omitting most curly braces and semi-colons if(someVariableExists) x = false anotherfunctionCall();----------------------------------------------------------------------------------------------------------------------------- Interpreted by some browsers if(someVariableExists) { x = false;} anotherFunctionCall(); ----------------------------------------------------------------------------------------------------------------------------- ----- if(someVariableExists) { x = false; anotherFunctionCall(); }
  26. 26. Declare Variables Outside of the For Statement for(var i = 0; i < someArray.length; i++) { var container = document.getElementById(container); container.innerHtml += my number: + i; console.log(i); }---------------------------------------------------------------------------------------------------------------------- var container = document.getElementById(container); for(var i = 0, len = someArray.length; i < len; i++) { container.innerHtml += my number: + i; console.log(i); }
  27. 27. Reduce Globals "By reducing your global footprint to a single name, you significantly reduce the chance of bad interactions with other applications, widgets, or libraries." - Douglas Crockford var name = doris; var lastName = chen; function doSomething() {...} console.log(name);----------------------------------------------------------------------------------------------------------------------------- var DudeNameSpace = { name : Jeffrey, lastName : Way, doSomething : function() {...} } console.log(DudeNameSpace.name);
  28. 28. Dont Pass a String to "SetInterval" or "SetTimeOut"• Never pass a string to SetInterval and SetTimeOutsetInterval( "document.getElementById(container).innerHTML += My new number: + i", 3000);• Pass function name setInterval(someFunction, 3000);
  29. 29. Use {} Instead of New Object() var o = new Object(); o.name = Jeffrey; o.lastName = Way; o.someFunction = function() { console.log(this.name); }---------------------------------------------------------------------------------------------------------------------- var o = { name: Jeffrey, lastName = Way, someFunction : function() { console.log(this.name); } }; var o = {}; //create empty object
  30. 30. Use [] Instead of New Array() var a = new Array(); a[0] = "Joe"; a[1] = Plumber;---------------------------------------------------------------------------------------------------------------------- var a = [Joe,Plumber];
  31. 31. Code Quality• High quality code is most likely to avoid platform problems.• Code Conventions for the JavaScript Programming Language – http://javascript.crockford.com/code.html• Use JSLint.com. Pass with no warnings
  32. 32. JSLint -- Code Quality Tool• JSLint can help improve the robustness and portability of your programs – enforces style rules – spot some errors that are very difficult to find in debugging – It can help eliminate implied globals• Integrated with tools, Visual Studio 2010 – http://jslint4vs2010.codeplex.com/• Resources – http://www.jslint.com/ – http://www.javascriptlint.com/download.htm
  33. 33. DOM Manipulation• If JavaScript were infinitely fast, most pages would run at about the same speed.• The bottleneck tends to be the DOM interface• There is a significant cost every time you touch the DOM tree• Each touch can result in a reflow computation, which is expensive
  34. 34. Make good use of Ajax Libraries• Effective code reuse will make widgets more effective• JavaScript Toolkits – Wrap up ajax details in javascript libraries – jQuery, Dojo, prototype+scriptaculous, YUI,...
  35. 35. Reduce the size of JavaScript file• Reduce the amount of source code to reduce download time.• Minification deletes whitespace and comments – While in development mode keep your scripts readable so that they may be debugged easier• Consider compressing your JavaScript resources when you deploy your application – If you use a 3rd party JavaScript library use the compressed version if one is provided.
  36. 36. Gzip components (server)> you can affect users download times  Gzip supported in more browsers  Gzip generally reduces the response size by 70%> Not just for html, gzip all scripts, stylesheets, XML, JSON but not images, PDF Content-Encoding: gzip> Gzip configuration  HTTP request Accept-Encoding: gzip, deflate  HTTP response Content-Encoding: gzip
  37. 37. Resources> Best practices and Guidelines  http://developer.yahoo.com/performance/rules.ht ml> Useful Sites  http://stevesouders.com/  http://javascript.crockford.com/
  38. 38. Upcoming Web Camps2 Days HTML5 and Web DevelopmentWebCamp May 20-May 21st, 2011, Mountain View, CAFree, learning innovative web technology,hands on experience
  39. 39. JavaScript Performance andBest Practices Doris Chen Ph.D. Developer Evangelist doris.chen@microsoft.com http://blogs.msdn.com/b/dorischen/ Twitter @doristchen
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×