`

createDocumentFragment（）的使用

JavaScriptCache浏览器HTML 
阅读更多
前段时间在论坛上发的JS操作table的时候，有人指出了，在进行大量DOM操作的时候应该使用createDocumentFragment，所以了解了一下这个方法，在浏览器里面测试了一下，效果相差还是非常明显的，有兴趣的可以下载HTML页面文件下去看看！ 
<html>
<head>
    <title>createDocumentFragment的使用</title>
    <script type="text/javascript">
        function slowAdd() {
            for (var i = 0; i < 10000; i++) {
                var op = document.createElement("span");
                var oText = document.createTextNode(i);
                op.appendChild(oText);
                document.body.appendChild(op);
            }
        }

        function fastAdd(){
            var oFragmeng = document.createDocumentFragment();  //创建文档碎片
            for (var i = 0; i < 10000; i++) {
                var op = document.createElement("span");
                var oText = document.createTextNode(i);
                op.appendChild(oText);
                oFragmeng.appendChild(op); 
            }
            document.body.appendChild(oFragmeng); //最后一次性添加到document中
        }
    </script>

</head>
<body >
    
    <p>
        <input id="Button1" type="button" value="普通方法" onclick = "slowAdd()"/></p>
    <p>
        <input id="Button2" type="button" value="createDocumentFragment快速操作"  onclick = "fastAdd()"/></p>
    
</body>
</html>
分享到：
| javascript动态操作表格
评论
2 楼 lucky16 2010-04-29  
greatghoul 写道
createDocumentFragment

这个东西是相当好用好用呀。

还有个方法， 
var cache = [];
...
ceche.push(...)
...
cache.join();


或者 

node.style.display='none';
...
node.appendChild(...);
...
node.style.display='block';


可惜的是，第二种方法会引起页面滚动条变化。

以前都没有用过这个东西，后来的时候在论坛发了一篇JS操作table的文章，大伙强烈建议使用它，在了解了它，话说它确实很好用！
1 楼 greatghoul 2010-04-28  
createDocumentFragment

这个东西是相当好用好用呀。

还有个方法，
var cache = [];
...
ceche.push(...)
...
cache.join();


或者 

node.style.display='none';
...
node.appendChild(...);
...
node.style.display='block';


可惜的是，第二种方法会引起页面滚动条变化。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

    对于那些涉及大量DOM操作的应用来说，合理使用`document.createDocumentFragment()`方法不仅可以提升用户体验，还可以有效降低服务器端的压力。因此，作为前端开发者，掌握并灵活运用这一技术是非常必要的。

    createElement与createDocumentFragment的点点区别小结

    网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如： 代码如下: var arrText=[“1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”...

    关于javascript document.createDocumentFragment()

    使用`document.createDocumentFragment()`的一个主要原因是提高DOM操作的效率。在上面的例子中，如果直接向DOM树添加元素，每次操作都会导致浏览器重新渲染页面，这在处理大量节点时会显著降低性能。通过先将元素...

    浅析document.createDocumentFragment()与js效率

    使用document.createDocumentFragment()方法可以创建一个DocumentFragment对象。创建后，你可以将多个元素添加到该对象中。一旦所有的操作都完成，你可以将DocumentFragment一次性地附加到DOM树上。与逐个添加节点到...

    Vue中fragment.js使用方法小结

    本文将深入探讨Vue中`createDocumentFragment`的使用方法。 首先，让我们了解为什么直接通过循环插入大量元素是低效的。假设我们需要在一个ID为`'parent'`的节点上插入10000个`div`元素，最直观的方法是使用`...

    javascript 异步的innerHTML使用分析

    代码如下: function asyncInnerHTML(HTML, callback) { var temp = document.createElement(‘div’), frag = document.createDocumentFragment(); temp[removed] = HTML;//要加入的内容先放到这里。 (function(){ ...

    IE8兼容栏目树orgchart的使用

    6. **DOM遍历与操作**：IE8的DOM操作相对复杂，例如，需要使用`innerHTML`而非`textContent`来设置元素内容，`createDocumentFragment`可能不可用，需要使用其他方式创建和插入DOM节点。 7. **动画效果**：IE8不...

    JavaScript执行效率优化及内存管理优化.docx

    在大量添加DOM元素时，使用DocumentFragment可以显著提高性能。DocumentFragment是一个轻量级的临时DOM树，它不会直接更新页面，直到被插入到实际DOM中。这样可以减少页面重绘和回流的次数，从而提升效率。 优化前...

    地图实现批量加载数据及图层展示

    在GIS（地理信息系统）开发中，地图实现是一个关键环节，涉及到如何高效地加载大量地理数据并展示在地图上。本文将深入探讨“地图实现批量加载数据及图层展示”的技术要点，以帮助开发者理解并掌握这一核心技能。...

    一些高性能的Javascript代码.doc

    当我们需要遍历DOM节点时，使用firstChild和nextSibling属性比使用childNodes数组更高效，可以提升30%-50%的性能。在反向遍历时，lastChild和previousSibling是更好的选择。例如： ```javascript // 优化前 var ...

    JS提高优化性能完全秘籍.pdf

    通过使用数组来存储字符串块，并最终使用`join()`方法将它们合并成一个完整的字符串，可以显著提高性能。尤其是对于需要频繁进行字符串拼接的情况，这种方式更为高效。 以上是关于DOM操作和字符串操作的一些基本...

    Vue中fragment.js使用方法详解

    更好的解决方案是使用`document.createDocumentFragment()`，它允许我们在内存中构建一个不实际存在于DOM树的文档片段，所有操作都不会触发页面重绘或回流。当文档片段完成构建后，我们可以将其所有子节点一次性添加...

    XML_学习之总结[知识整理.doc

    `abort`、`appendChild`、`cloneNode`、`createAttribute`、`createCDATASection`、`createComment`、`createDocumentFragment`、`createElement` 和 `createEntityReference` 的功能、语法以及具体使用案例。...

    js表格操作，DOM实现数据动态增删查改

    8. **优化性能**：由于频繁的DOM操作可能导致性能下降，可以考虑使用`innerHTML`一次性更新整个表格，或者使用`createDocumentFragment()`来批量处理DOM操作，以减少重绘和回流。 9. **响应式设计**：为了确保表格...

    nekohtml使用笔记 txt

    DocumentFragment node = new HTMLDocumentImpl().createDocumentFragment(); // 解析 HTML parser.parse(new InputSource(new ByteArrayInputStream(response.getContent())), node); ``` 这里的关键在于 `...

Magicbox
Global site tag (gtag.js) - Google Analytics