High Performance Ajax Applications 1197671494632682 2

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 1197671494632682 2

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a High Performance Ajax Applications 1197671494632682 2

Semelhante a High Performance Ajax Applications 1197671494632682 2 (20)

Último

Último (20)

High Performance Ajax Applications 1197671494632682 2