js三种创建元素方式的区别及效率测试-CFANZ编程社区

js三种创建元素方式的区别及效率测试

js三种创建元素方式的区别及效率测试_i++

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <embed src="九张机.mp3" hidden="true" autostart="true" loop="true"/>
</head>
<body>
<!--<button>点击</button>
<p>abc</p>-->
<div class="inner"></div>
<div class="youhua"></div>
<div class="create"></div>
<script>
    /*//document.write()  文档加载完后调用会引发页面重绘
    var btn = document.querySelector('button');
    btn.onclick = function () {
        document.write('<div>123</div>');
    }*/
    //1.element.innerHTML创建元素
    var inner = document.querySelector('.inner');
    var date1=+new Date();
    for (var i = 0; i < 1000; i++)
        inner.innerHTML += '<a href="javascript:;">百度</a>'
    var date2=+new Date();
    alert('字符串拼接方式耗时'+(date2-date1)+'ms');


    //2.element.innerHTML创建元素:优化算法后
    var inner = document.querySelector('.youhua');
    var date1=+new Date();
    var arr=[];
    for (var i=0;i<1000;i++){
        arr.push('<a href="javascript:;">搜狐</a>')
    }
    inner.innerHTML=arr.join('');
    var date2=+new Date();
    alert('优化后耗时'+(date2-date1)+'ms');


    //doclument.createElement().
    var create = document.querySelector('.create');
    var date1=+new Date();
    for (var i=0;i<1000;i++){
        var a = document.createElement('a');
        a.innerHTML='<a href="javascript:;">谷歌</a>'
        create.appendChild(a);
    }
    var date2=+new Date();
    alert('appendChild方式耗时'+(date2-date1)+'ms');
</script>
</body>
</html>

0 条评论