2022年提高你的DHTML性能CSSHTML教程.docx

《2022年提高你的DHTML性能CSSHTML教程.docx》由会员分享，可在线阅读，更多相关《2022年提高你的DHTML性能CSSHTML教程.docx（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022年提高你的DHTML性能CSSHTML教程资料来源：MSDN英文原文中文译文1.尽量运用同一个脚本函数来变更HTML内容。假如有多个事务触发，尽量只变更同一个地方。2.尽量把内容集中起来一次更新。假如不是特殊须要有HTML的内容，尽量运用innerText代替innerHTMLSlow:divUpdate.innerHTML = ;for ( var i=0; i<100; i+ ){ divUpdate.innerHTML += <SPAN>This is a slower method! </SPAN> }Fast:var str=

2、;for ( var i=0; i<100; i+ ){ str += <SPAN>This is faster because it uses a string! </SPAN> }divUpdate.innerHTML = str;3.更新文本内容时尽量运用innerText而不是DOM的createTextNodeSlow:var node;for (var i=0; i<100; i+){ node = document.createElement( SPAN ); node.appendChild( document.

3、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 方法，而不是

4、insertAdjacentHTMLSlow:for (var i=0; i<100; i+){ divUpdate.insertAdjacentHTML( beforeEnd, <SPAN> Uses insertAdjacentHTML() </SPAN> ); }Fast:var node;for (var i=0; i<100; i+){ node = document.createElement( SPAN ); node.innerText = Uses insertAdjacentElement() ; divUp

5、date.insertAdjacentElement( beforeEnd, node ); }5.在数目巨大的状况下，尽量运用innerHTML 来添加项Slow:var opt;divUpdate.innerHTML = <SELECT ID=selUpdate></SELECT>for (var i=0; i<1000; i+){ opt = document.createElement( OPTION ); selUpdate.options.add( opt ); opt.innerText = Item + i; }Fas

6、t:var str=<SELECT ID=selUpdate>for (var i=0; i<1000; i+){ str += <OPTION>Item + i + </OPTION> }str += </SELECT>divUpdate.innerHTML = str;Faster:var arr = new Array(1000);for (var i=0; i<1000; i+){ arri = <OPTION>Item + i + </OPTION> }divU

7、pdate.innerHTML = <SELECT ID=selUpdate> + arr.join() + </SELECT>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;

8、} }Fast:var row;var cell;var tbody = tblUpdate.childNodes0;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.inn

9、erText = 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

10、 +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，尤其是困难的range13.先插入对象，然后

11、添加它的内容Slow(1).create <TR>(2).create <TD>(3)create TextNode(4)insert TextNode into <TD>如前所述，这里用innerText会更快(5)insert <TD> into <TR>(6)insert <TR> into TBODYFast(1)create <TR>(2)create <TD>(3)create TextNode如前所述，这里用innerText会更快(4)insert <TR> into TBODY(5)insert <TD> into <TR>(6)insert TextNode into <TD>如前所述，这里用innerText会更快14.用posLeft,posTop,posWidth,posHeight来代替left,top等，削减字符串->数值的转换15.尽可能少的运用定时器(指setTimeout,setInterval这些)，而在同一个定时器里对全部要改变的对象进行操作（出处：