首页 > 试题广场 >

向当前#list的最后元素之后添加100个新的li节点,合理

[单选题]
向当前#list的最后元素之后添加100个新的li节点,合理且安全的操作方式是?

  • 通过循环方式创建新的li节点,并依次添加到#list中
  • 先将#list节点的display设置为none,通过循环方式创建新的li节点,并依次添加到#list中,最后再将#list节点的display设置为block
  • 取出#list中现有的li节点的html,将它与新增的li节点对应的html代码拼接成字符串,一次性插入到#list中
  • 创建Fragment,通过循环方式创建新的li节点,添加到Fragment中,最后再将Fragment添加到#list中
css样式部分
li{
    height: 50px;
    width: 50px;
    background-color: #e0e0e0;
}
html结构部分
<ul id="list">
    <li>1</li>
    <li>2</li>
<ul>
js部分  //通过循环方式穿件新的li节点并依次添加到#list中
    // var d1 = +new Date();
    // var list=document.getElementById("list")
    // // 获得未插入代码块前的时间戳     
    // for (var i = 0; i < 10000; i++) {
    //     var li = document.createElement('li');
    //     list.appendChild(li);
    // }
    // var d2 = +new Date();
    // // 获得运行完毕的时间戳
    // console.log("通过循环方式穿件新的li节点并依次添加到#list中所花费的时间",d2 - d1);
    // //共计消耗多长时间 9~14ms

    
    // 先将#list节点的display设置为none,通过循环方式创建新的li节点,并依次添加到#list中,
    // 最后再将#list节点的display设置为block
    // var d1 = +new Date();
    // //获取未执行时的时间戳


    // var list=document.getElementById("list")
    // list.style.display="none"
    // for (var i = 0; i < 10000; i++) {
    //     var li = document.createElement('li');
    //     list.appendChild(li);
    // }
    // list.style.display="block"

    // var d2 = +new Date();
    // // 获得运行完毕的时间戳
    // console.log("通过循环方式穿件新的li节点并依次添加到#list中所花费的时间",d2 - d1);
    // //共计消耗多长时间 10~24ms


    // //取出#list中现有的li节点的html,将它与新增的li节点对应的html代码拼接成字符串,一次性插入到#list中
    // var d1 = +new Date();
    
    // var list=document.getElementById("list")
    // for (var i = 0; i < 10000; i++) {
    //     list.innerHTML += '<li></li>';
    // }

    // var d2 = +new Date();
    // console.log(d2 - d1); 
    // //卡死了 emmm

    // 创建Fragment,通过循环方式创建新的li节点,添加到Fragment中,最后再将Fragment添加到#list中
    //创建文档片段
    var d1 = +new Date();
    var list=document.getElementById("list")
    var d=document.createDocumentFragment();
    for (var i = 0; i < 10000; i++) {
        var li = document.createElement('li');
        d.appendChild(li)
    }
    list.appendChild(d)
    var d2 = +new Date();
    console.log(d2 - d1); 
    //共计消耗多长时间 11~26ms 
我反正是打了一下代码去查了下文档  

createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。

当你想提取文档的一部分,改变,增加,或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。

你也可以使用文档的文档对象来执行这些变化,但要防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点。

估计是因为createDocumentFragment() 方法可以更安全改变文档的结构及节点。所以答案才会是D吧

编辑于 2020-09-09 17:01:30 回复(4)
合理的方式应当是在保证性能的同时避免安全问题。
A 显然不行,每次插入都会触发重绘和重排;
B 也不行,虽然因为隐藏避免了重绘,但因为没有脱离文档流,每次插入时重排还是会发生;
CD 可能有争议,因为都只会触发一次重绘和重排。按理来说直接操作HTML是性能最好的手段,因为就是一个简单的字符串操作,但是可能存在XSS攻击的风险,就不如 Fragment 安全。
发表于 2020-10-19 10:04:15 回复(7)
按理来说直接操作HTML是性能最好的手段,因为就是一个简单的字符串操作,但是可能存在XSS攻击的风险,就不如 Fragment 安全。
发表于 2021-03-21 12:48:04 回复(0)
能不能给个这方面的知识点?
发表于 2022-04-07 17:52:13 回复(0)
C应该也能达到目的,只是这种方式不合理不推荐
发表于 2020-08-23 12:39:48 回复(0)