• 三种动态创建元素的区别


           //    document.write()
            // var btn = document.querySelector('button');
            // btn.onclick = function () {
            //     // 1、document.write()
            //     // document.write 如果页面文档流加载完毕
            //     //再调用这句话会导致页面重绘(类似打开一个新页面
            //     document.write('<div>123</div>');
            //     document.write('<button>123</button>');
            // }
    
    
    
    
    
            // innerHTML的方法  字符串方法(效率低)
            // 直接添加a链接到innerHTML的方法(一千次 1400左右毫秒  拼接字符串)
            // var a = Date.now();
            // for (var i = 1; i <= 1000; i++) {
            //     var div = document.querySelector('div');
            //     div.innerHTML += '<a href="javascript:;">baidu</a>';
            // }
            // var b = Date.now();
            // console.log(b - a);
    
    
    
    
            // 创建方法 createElement
            // 创建元素的方法(一万次  50-100毫秒)
            // var a = Date.now();
            // var div = document.querySelector('div');
            // for (var i = 1; i <= 10000; i++) {
            //     var as = document.createElement('a');
            //     as.innerText = 'baidu';
            //     as.style.color = 'red';
            //     as.style.fontSize = '10px';
            //     div.appendChild(as);
            // }
            // var b = Date.now();
            // console.log(b - a);
    
    
            // innerHTML的方法 数组方法
            // a链接到innerHTML的方法(存入数组)(一万次 30-100毫秒)
            // var a = Date.now();
            // var arr = [];
            // var div = document.querySelector('div');
            // for (var i = 1; i <= 10000; i++) {
            //     arr.push('<a href="#" style="color: red; font - size: 10px">baidu</a>');
            // }
            // div.innerHTML = arr.join('');
            // var b = Date.now();
            // console.log(b - a);
    
    
    // 结论  在直接添加进innerhtml 和创建createElement的效率比较中;
    // 每次循环都以字符串累加形式 div.innerHTML += '<a href="javascript:;">baidu</a>';
    // 效率是最低的,而每次将节点存入数组最后将数组装换为字符串形式是效率最高的(一般来说,
    // 节点的style信息越多,数组形式优势更大,(因为每次循环创建节点createElement方法中都要进行一次style信息读取)
    // 如果节点中需要添加的的style信息很少,则效率和和每次循环创建节点createElement方法是差不多的。
    // 综上所述,在循环次数足够大,添加的节点的style信息比较多的情况下规律大概是
    // innerhtml每次循环直接将节点信息用字符串累加的效率是最低的,innerhtml每次循环将节点信息存入数组,最后
    // 转换为字符串然后输出的效率是最高的,直接每次循环创建节点信息的createElement方法是效率其次的,
    // 其值也接近效率最高的数组方法。
    
    
    </script>
    
  • 相关阅读:
    JavaScript没有块级作用域
    JavaScript数据类型
    接口
    Linux用户与组别的操作
    解决 macOS 下 SSH 空闲一段时间后自动断开
    Excel 系列一 之 账户类长数字打开不截断与完全显示
    怎样花两年时间去面试一个人
    北京大学硕士学位论文模板
    Mysql: 图解 inner join、left join、right join、full outer join、union、union all的区别
    刷 LeetCode 时再学习 Python 中引用
  • 原文地址:https://www.cnblogs.com/xjt31/p/13019455.html
Copyright © 2020-2023  润新知