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

最新推荐文章于 2022-05-09 22:07:12 发布

黄大仙No.1

最新推荐文章于 2022-05-09 22:07:12 发布

阅读量164

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107831421

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

在这里插入图片描述

<!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>

黄大仙No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js三种创建元素方式的区别及效率测试

<!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>点击&.
复制链接

扫一扫