提高你的DHTML性能

[英文原文] msdn.microsoft.com/library/en-us/dnwebgen/html/dhtmlperf.asp?frame=true [中文译文] www.microsoft.com/china/msdn/msdnonline/features/articles/dhtmlperf.asp 1.尽量使用同一个脚本函数来改变HTML内容。如果有多个事件触发，尽量只改变同一个地方。 2.尽量把内容集中起来一次更新。如果不是特别需要有HTML的内容，尽量使用innerText代替innerHTML Slow: divUpdate.innerHTML = ""; for ( var i=0; i<100; i++ ) { divUpdate.innerHTML += "This is a slower method! "; } Fast: var str=""; for ( var i=0; i<100; i++ ) { str += "This is faster because it uses a string! "; } divUpdate.innerHTML = str; 3.更新文本内容时尽量使用innerText而不是DOM的createTextNode Slow: var node; for (var i=0; i<100; i++) { node = document.createElement( "SPAN" ); node.appendChild( document.createTextNode( " Using createTextNode() " ) ); divUpdate.appendChild( node ); } Fast: var node; for (var i=0; i<100; i++) { node = document.createElement( "SPAN" ); node.innerText = " Using innerText property "; divUpdate.appendChild( node ); } 4.尽量使用createElement 和 insertAdjacentElement 方法，而不是 insertAdjacentHTML Slow: for (var i=0; i<100; i++) { divUpdate.insertAdjacentHTML( "beforeEnd", " Uses insertAdjacentHTML() " ); } Fast: var node; for (var i=0; i<100; i++) { node = document.createElement( "SPAN" ); node.innerText = " Uses insertAdjacentElement() "; divUpdate.insertAdjacentElement( "beforeEnd", node ); } 5.在数目巨大的情况下，尽量使用innerHTML 来添加项 Slow: var opt; divUpdate.innerHTML = ""; for (var i=0; i<1000; i++) { opt = document.createElement( "OPTION" ); selUpdate.options.add( opt ); opt.innerText = "Item " + i; } Fast: var str=""; for (var i=0; i<1000; i++) { str += "Item " + i + ""; } str += ""; divUpdate.innerHTML = str; Faster: var arr = new Array(1000); for (var i=0; i<1000; i++) { arr[i] = "Item " + i + ""; } divUpdate.innerHTML = "" + arr.join() + ""; 6.使用DOM来创建表格比TOM(insertRow,insertCell)好的多 Slow: var row; var cell; for (var i=0; i<100; i++) { row = tblUpdate.insertRow(); for (var j=0; j<10; j++) { cell = row.insertCell(); cell.innerText = "Row " + i + ", Cell " + j; } } Fast: var row; var cell; var tbody = tblUpdate.childNodes[0]; tblUpdate.appendChild( tbody ); for (var i=0; i<100; i++) { row = document.createElement( "TR" ); tbody.appendChild( row ); for (var j=0; j<10; j++) { cell = document.createElement( "TD" ); row.appendChild( cell ); cell.innerText = "Row " + i + ", Cell " + j; } } 7.通用的操作，尽量放在一个单独的外部脚本文件里 8.约束你的动态属性（指setExpression的用法） 9.使用数据绑定来显示你的资料，你可以使用排序、过滤等操作来提供不同视图，但只需要访问一次服务器(减少频繁访问服务器的问题) 10.不要把自定义的属性加到document对象上，这会使得每次读取该属性时进行额外的重算。推荐加在window对象上 Slow: for (var i=0; i<1000; i++) { var tmp; window.document.myProperty = "Item "+i; tmp = window.document.myProperty; } Fast: for (var i=0; i<1000; i++) { var tmp; window.myProperty = "Item "+i; tmp = window.myProperty; } 11.尽量直接使用style对象来改变HTML对象外观，而不是className或者跟clas关联的styleSheet对象 12.在访问textrange对象的父对象(指parentElement方法的返回值)时，先collapse合并range，尤其是复杂的range 13.先插入对象，然后添加它的内容 Slow (1).create