测试应用documentFragment 和 直接操作dom 的区别

DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。

不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作

同时我们了解到当需要对页面DOM进行操作的时候必然会导致多次 重绘、回流（什么是重绘，回流？）。这样会加大页面的负担。影响页面性能。因此我们可以创建这样一个临时占位符。

测试 demo:

复制代码
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="box">
        <button onclick="addList()">Button</button>
        <button onclick="addList2()">Button</button>
    </div>
    <div>
        <ul id="myList">
            <li>item</li>
        </ul>
        <hr>
    </div>
<script type="text/javascript">

function addList(){
    
    var doc = document,
    list = doc.getElementById('myList'),
    item,
    i;
    console.time('addList');
    for(i=0; i<1000; i++){
        item = doc.createElement('li');
        list.appendChild(item);
        item.appendChild(doc.createTextNode('item '+ i));
        console.log(list.clientHeight);
    }
    console.timeEnd('addList');
}


function addList2(){
    
    var doc = document,
    list = doc.getElementById('myList'),
    fragment = doc.createDocumentFragment(),
    item,
    i;
    console.time('addList2');
    for(i=0; i<1000; i++){
        item = doc.createElement('li');
        item.appendChild(doc.createTextNode('item '+ i));
        fragment.appendChild(item);
        console.log(list.clientHeight);
    }
    list.appendChild(fragment);
    console.timeEnd('addList2');
}

</script>

</body>
</html>
复制代码

 

借用 在知乎上 网友 付星昱 的评论 解释一下：

直接往元素里 append的操作会引发 reflow，在循环中多次触发 reflow是非常不讨好的事情，
我们聪明的现代浏览器会将短时间内的多次 reflow收集起来组成队列，在一定时间后 flush队列，将多个 reflow的变为一次 reflow。

直接获取 offsetHeight会导致浏览器马上 flush队列，计算出当前值。
除了计算 offsetHeight，clientHeight/clientWidth，offsetWidth，scrollTop/Left/Height/width也会使浏览器立即 flush队列。

 

可以理解为什么  我之前多次测试 而看到的 两种方式 在时间上没什么差异的原因了；

 

posted @   驸马爷  阅读(300)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae