1.尽量使用同一个脚本函数来改变HTML内容。如果有多个事件触发,尽量只改变同一个地方。
2.尽量把内容集中起来一次更新。如果不是特别需要有HTML的内容,尽量使用innerText代替innerHTML
Slow:
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的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", "<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>Ite
2.尽量把内容集中起来一次更新。如果不是特别需要有HTML的内容,尽量使用innerText代替innerHTML
Slow:
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的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", "<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>Ite