High Performance Ajax Applications

High Performance Ajax Applications Julien Lecomte http://www.julienlecomte.net/blogfiles/performance/ajax-perf.ppt http://www.slideshare.net/julien.lecomte/high-performance-ajax-applications

Part 1 Developing For High Performance

Planning and designing for high performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Engineering high performance: A few basic rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Measuring performance ,[object Object],[object Object],[object Object],[object Object],[object Object]

Part 2 High Performance Page Load

Yahoo!'s Exceptional Performance rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Asset optimization ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Reduce unminified code size ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Optimize initial rendering (1/4) Miscellaneous tips... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Optimize initial rendering (2/4) Don’t always wait for onload ... ,[object Object],[object Object],[object Object],YAHOO.util.Event.onDOMReady( function () { // Do something here... // e.g., attach event handlers. });

Optimize initial rendering (3/4) Post-load script loading ,[object Object],[object Object],[object Object],[object Object],[object Object],<script> window.onload = function () { var script = document.createElement( "script" ); script.src = ...; document.body.appendChild(script); }; </script>

Optimize initial rendering (4/4) Conditional preloading ,[object Object],[object Object],[object Object],[object Object]

Part 3 High Performance JavaScript

Reduce the amount of symbolic look-up: The scope chain (1/2) var g = 7 ; function f(a) { var v = 8 ; x = v + a + g; } f(6); parent ,[object Object],[object Object]

Reduce the amount of symbolic look-up: The scope chain (2/2) ,[object Object],[object Object],[object Object],var arr = ...; var globalVar = 0 ; ( function () { var i; for (i = 0 ; i < arr.length; i++) { globalVar++; } })(); var arr = ...; var globalVar = 0 ; ( function () { var i, l, localVar; l = arr.length; localVar = globalVar; for (i = 0 ; i < l; i++) { localVar++; } globalVar = localVar; })(); (faster on all A-grade browsers)

Reduce the amount of symbolic look-up: The prototype chain function A () {} A.prototype.prop1 = ...; function B () { this .prop2 = ...; } B.prototype = new A(); var b = new B(); B.prototype ,[object Object],[object Object]

Optimize object instantiation ,[object Object],[object Object],[object Object],function Foo () {...} Foo.prototype.bar = function () {...}; function Foo () { this .bar = function () {...}; }

Don’t use eval ! ,[object Object],[object Object],setTimeout( function () { // Code to execute on a timeout }, 50 ); ,[object Object]

Optimize string concatenation ,[object Object],var s = “xxx” + “yyy” ; s += “zzz” ; ,[object Object],var i, s = “” ; for (i = 0 ; i < 10000 ; i++) { s += “x” ; } var i, s = []; for (i = 0 ; i < 10000 ; i++) { s[i] = “x” ; } s = s.join( “” ); ,[object Object],[object Object]

Optimize regular expressions ,[object Object],[object Object],[object Object],[object Object],if ( /loaded|complete/ .test(document.readyState)) {...} (?:(?:)?[])*(?:(?:(?:[^()<>@,;:".00-31]+(?:(?:(?:)?[])+||(?=["()<>@,;:".]))|" (?:[âmp;quot;]|.|(?:(?:)?[]))*"(?:(?:)?[])*)(?:(?:(?:)?[])*(?:[^()<>@,;:".00-31 ]+(?:(?:(?:)?[])+||(?=["()<>@,;:".]))|"(?:[âmp;quot;]|.|(?:(?:)?[]))*"(?:(?:)?[]) *))*@(?:(?:)?[])*(?:[^()<>@,;:".00-31]+(?:(?:(?:)?[])+||(?=["()<>@,;:".]))| ([^]|.)*(?:(?:)?[])*)(?:(?:(?:)?[])*(?:[^()<>@,;:".00-31]+(?:(?:(?:)? [])+||(?=["()<>@,;:".]))|([^]|.)*(?:(?:)?[])*))*|(?:[^()<>@,;:".00- 31]+(?:(?:(?:)?[])+||(?=["()<>@,;:".]))|"(?:[âmp;quot;]|.|(?:(?:)?[]))*"(?:(?:)?[ ])*)*lt;(?:(?:)?[])*(?:@(?:[^()<>@,;:".00-31]+(?:(?:(?:)?[])+||(?=["()<>@,;:". ]))|([^]|.)*(?:(?:)?[])*)(?:(?:(?:)?[])*(?:[^()<>@,;:".00-31]+(?:(?:(?: )?[])+||(?=["()<>@,;:".]))|([^]|.)*(?:(?:)?[])*))*(?:,@(?:(?:)?[]))

Caching ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],var fn = ( function () { var b = false , v; return function () { if (!b) { v = ...; b = true ; } return v; }; })(); function fn () { if (!fn.b) { fn.v = ...; fn.b = true ; } return fn.v; } var fn = function () { var v = ...; return (fn = function () { return v; })(); }; Module pattern Store value in function object Lazy function definition

How to handle long running JavaScript processes (1/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

How to handle long running JavaScript processes (2/2) function doSomething (callbackFn) { // Initialize a few things here... ( function () { // Do a little bit of work here... if ( termination condition ) { // We are done callbackFn(); } else { // Process next chunk setTimeout(arguments.callee, 0); } })(); }

Miscellaneous tips (1/2) ,[object Object],var a = 1 , b = 2 , c; c = Math.min(a, b); c = a < b ? a : b; ,[object Object],var i; for (i = 0 ; i < 100000 ; i++) { try { ... } catch (e) { ... } } var i; try { for (i = 0 ; i < 100000 ; i++) { ... } } catch (e) { ... } myArray.push(value); myArray[myArray.length] = value; myArray[idx++] = value;

Miscellaneous tips (2/2) ,[object Object],var key, value; for (key in myArray) { value = myArray[key]; ... } var i, value, length = myArray.length; for (i = 0 ; i < length; i++) { value = myArray[i]; ... } ,[object Object],function fn () { if (...) { ... } else { ... } } var fn; if (...) { fn = function () {...}; } else { fn = function () {...}; }

Part 4 High Performance Dynamic HTML

Document tree modification Using innerHTML var i, j, el, table, tbody, row, cell; el = document.createElement( "div" ); document.body.appendChild(el); table = document.createElement( "table" ); el.appendChild(table); tbody = document.createElement( "tbody" ); table.appendChild(tbody); for (i = 0 ; i < 1000 ; i++) { row = document.createElement( "tr" ); for (j = 0 ; j < 5 ; j++) { cell = document.createElement( "td" ); row.appendChild(cell); } tbody.appendChild(row); } var i, j, el, idx, html; idx = 0 ; html = []; html[idx++] = "<table>" ; for (i = 0 ; i < 1000 ; i++) { html[idx++] = "<tr>" ; for (j = 0 ; j < 5 ; j++) { html[idx++] = "<td></td>" ; } html[idx++] = "</tr>" ; } html[idx++] = "</table>" ; el = document.createElement( "div" ); document.body.appendChild(el); el.innerHTML = html.join( "" ); ( much faster on all A-grade browsers) Warning: See http://www.julienlecomte.net/blog/2007/12/38/

Document tree modification Using cloneNode var i, j, el, table, tbody, row, cell; el = document.createElement( "div" ); document.body.appendChild(el); table = document.createElement( "table" ); el.appendChild(table); tbody = document.createElement( "tbody" ); table.appendChild(tbody); for (i = 0 ; i < 1000 ; i++) { row = document.createElement( "tr" ); for (j = 0 ; j < 5 ; j++) { cell = document.createElement( "td" ); row.appendChild(cell); } tbody.appendChild(row); } var i, el, table, tbody, template, row, cell; el = document.createElement( "div" ); document.body.appendChild(el); table = document.createElement( "table" ); el.appendChild(table); tbody = document.createElement( "tbody" ); table.appendChild(tbody); template = document.createElement( "tr" ); for (i = 0 ; i < 5 ; i++) { cell = document.createElement( "td" ); template.appendChild(cell); } for (i = 0 ; i < 1000 ; i++) { row = template.cloneNode(true); tbody.appendChild(row); } (faster on all A-grade browsers – sometimes much faster) Warning: expando properties/attached event handlers are lost!

Document tree modification Using DocumentFragment ,[object Object],[object Object],[object Object],var i, j, el, table, tbody, row, cell, docFragment; docFragment = document.createDocumentFragment(); el = document.createElement( "div" ); docFragment.appendChild(el); table = document.createElement( "table" ); el.appendChild(table); tbody = document.createElement( "tbody" ); table.appendChild(tbody); for (i = 0 ; i < 1000 ; i++) { ... } document.body.appendChild(docFragment);

Limit the number of event handlers (1/2) ,[object Object],[object Object],[object Object],<div id= "container" > <ul> <li id= "li-1" > List Item 1 </li> <li id= "li-2" > List Item 2 </li> <li id= "li-3" > List Item 3 </li> <li id= "li-4" > List Item 4 </li> <li id= "li-5" > List Item 5 </li> ... </ul> </div> div#container ul li#li- x text node

Limit the number of event handlers (2/2) YAHOO.util.Event.addListener( "container" , "click" , function (e) { var el = YAHOO.util.Event.getTarget(e); while (el.id !== "container" ) { if (el.nodeName.toUpperCase() === "LI" ) { // Do something here... break; } else { el = el.parentNode; } } });

Limiting reflows ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],el.style.cssText = "display:block;width:auto;height:100px;..." ; YAHOO.util.Dom.replaceClass(el, "foo" , "bar" ); el.setAttribute( "style" , "display:block;width:auto;height:100px;..." );

Miscellaneous tips... ,[object Object],[object Object],[object Object],[object Object]

Part 5 High Performance Layout and CSS

Miscellaneous tips... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax Best Practices ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],var callback = { success: function () { /* Do something */ }, failure: function () { /* Do something */ }, timeout: 5000 }; YAHOO.util.Connect.asyncRequest( "GET" , url, callback);

Improving perceived network latency using the optimistic pattern ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Miscellaneous tips... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Performance Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

High Performance Ajax Applications

High Performance Ajax Applications

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to High Performance Ajax Applications

Similar to High Performance Ajax Applications(20)

Recently uploaded

Recently uploaded(20)

High Performance Ajax Applications