High Performance Ajax Applications
•Als PPT, PDF herunterladen•
130 gefällt mir•56,861 views
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie High Performance Ajax Applications
Ähnlich wie High Performance Ajax Applications (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
High Performance Ajax Applications
- 1. 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
- 2. Part 1 Developing For High Performance
- 6. Part 2 High Performance Page Load
- 14. Part 3 High Performance JavaScript
- 24. 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); } })(); }
- 27. Part 4 High Performance Dynamic HTML
- 28. 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/
- 29. 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!
- 32. 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; } } });
- 35. Part 5 High Performance Layout and CSS
- 37. Part 6 High Performance Ajax
- 41. Part 7 Performance Tools