innerHTML和createElement效率对比
innerHTML字符串拼接方式(效率低)
< script>
function fn ( ) {
var d1 = + new Date ( ) ;
var str = '' ;
for ( var i = 0 ; i < 1000 ; i++ ) {
document. body. innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>' ;
}
var d2 = + new Date ( ) ;
console. log ( d2 - d1) ;
}
fn ( ) ;
< / script>
createElement方式(效率一般)
< script>
function fn ( ) {
var d1 = + new Date ( ) ;
for ( var i = 0 ; i < 1000 ; i++ ) {
var div = document. createElement ( 'div' ) ;
div. style. width = '100px' ;
div. style. height = '2px' ;
div. style. border = '1px solid red' ;
document. body. appendChild ( div) ;
}
var d2 = + new Date ( ) ;
console. log ( d2 - d1) ;
}
fn ( ) ;
< / script>
innerHTML数组方式(效率高)
< script>
function fn ( ) {
var d1 = + new Date ( ) ;
var array = [ ] ;
for ( var i = 0 ; i < 1000 ; i++ ) {
array. push ( '<div style="width:100px; height:2px; border:1px solid blue;"></div>' ) ;
}
document. body. innerHTML = array. join ( '' ) ;
var d2 = + new Date ( ) ;
console. log ( d2 - d1) ;
}
fn ( ) ;
< / script>