zoukankan      html  css  js  c++  java
  • document.createDocumentFragment()运行效率

    createDocumentFragment作用是什么? 快速响应,提高效率,提升用户体验。

    调用document.body.append(),每调用一次都要刷新页面 一次。效率就低了。

    用document.createFragment()创建一个文档碎片,把所有的新节点附加在其上,最后把文档碎片的内容一次性添加到document中,只需要一次页面刷新即可。

    document.createFragment()支持DOM2的方法:

    a, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.

    也支持DOM2的属性:

    attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.

    下面2段代码测试一下效率。

    一千次修改DOM加一千个段落

    var d1 = new Date();
    
    //创建一千个段落,常规的方式
    
    for(var i = 0 ; i < 1000; i ++) {
    
        var p = document.createElement("p");
    
        var oTxt = document.createTextNode("段落" + i);
    
        p.append(oTxt);
    
        document.body.append(p);
    
    }
    
    var d2 = new Date();
    
    console.log("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));
    //第一次创建需要的时间:6
    //使用了createDocumentFragment()的程序
    
    var d3 = new Date();
    
    var pFragment = document.createDocumentFragment();
    
    for(var i = 0 ; i < 1000; i ++) {
    
        var p = document.createElement("p");
    
        var oTxt = document.createTextNode("段落" + i);
    
        p.append(oTxt);
    
        pFragment.append(p);
    
    }
    
    document.body.append(pFragment);
    
    var d4 = new Date();
    
    console.log("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));
    //第2次创建需要的时间:3

    我在chrome下运行,效率差了一半。

    参考:

    http://blog.sina.com.cn/s/blog_667a8c2f010113zw.html

    本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4904929.html有问题欢迎与我讨论,共同进步。

  • 相关阅读:
    HGOI 20191029am 题解
    『ZJOI2019 D2T2』语言
    『NOIP 2019Day2 T3』 保卫王国(defense)
    『HGOI 20190917』Lefkaritika 题解 (DP)
    『HGOI 20190917』Cruise 题解 (计算几何+DP)
    HGOI 20190830 题解
    『Codeforces 1186E 』Vus the Cossack and a Field (性质+大力讨论)
    HGOI 20190828 题解
    BZOJ 1934 善意的投票
    BZOJ 2763 飞行路线 BFS分层
  • 原文地址:https://www.cnblogs.com/starof/p/6430427.html
Copyright © 2011-2022 走看看