提高你的DHTML性能

材料根源：msdn[英文原文] msdn.microsoft.com/library/en-us/dnwebgen/html/dhtmlperf.asp?frame=true[华文译文]www.microsoft.com/china/msdn/msdnonline/features/articles/dhtmlperf.asp1.尽管运用同一个剧本因变量来变换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="";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.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", "<span> uses insertadjacenthtml() </span>" );}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 = "<select id='selupdate'></select>";for (var i=0; i<1000; i++){  opt = document.createelement( "option" );  selupdate.options.add( opt );  opt.innertext = "item " + i;}fast: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++){  arr[i] = "<option>item " + i + "</option>";}divupdate.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;  }}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，更加是搀杂的range13.先插入东西，而后增添它的实质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 tbody fast(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那些)，而在同一个准时器里对一切要变革的东西举行操纵（根源：蓝色理念）