document.createDocumentFragment

document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。

DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素代替。

因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此,使用文档片段document fragments 通常会起到优化性能的作用。

比如下面这个示例,给一个ul添加10000个li,先用拼接字符串的方式来实现:

let start = Date.now()
let str = ''
let newUlEle = document.createElement('ul') document.body.appendChild(newUlEle) for (let i = 0; i < 10000; i++) {
str += '<li>第' + i + '个子节点</li>'
} newUlEle.innerHTML = str console.log('耗时' + (Date.now() - start) + 'ms');

多次刷新,可以看到创建10000li时,渲染所需要的时间如下图:

把上面的示例,换成append()的方式,逐个添加对应的li

let start = Date.now()
let str = ''
let newUlEle = document.createElement('ul') document.body.appendChild(newUlEle) for (let i = 0; i < 10000; i++) {
let liEle = document.createElement('li') liEle.textContent = '第' + i + '个子节点'
newUlEle.appendChild(liEle)
} console.log('耗时:' + (Date.now() - start) + 'ms')

这种方法所费时间如下图:

都说第二种方法要比第一种方法耗时,看上去有点像。接下来再来看createDocumentFragment的方法。可以预见的是,这种方法肯定比第二种强,但应该没有第一种快:

let start = Date.now()
let str = ''
let newUlEle = document.createElement('ul') document.body.appendChild(newUlEle) let fragment = document.createDocumentFragment() for (let i = 0; i < 10000; i++) {
let liEle = document.createElement('li') liEle.textContent = '第' + i + '个子节点'
fragment.appendChild(liEle)
} newUlEle.appendChild(fragment) console.log('耗时:' + (Date.now() - start) + 'ms')

转自:https://blog.csdn.net/yusirxiaer/article/details/80169070

document.createDocumentFragment 以及创建节点速度比较的更多相关文章

  1. js添加创建节点和合并节点

    var _div = document.createElement("div"), //创建节点 txt1 = document.createTextNode("123& ...

  2. 每天学一点---document.createDocumentFragment

    document.createDocumentFragment  用于创建文档对象,创建好的对象存在于内存中(不会引起回流,对元素位置和几何上的运算),不是附着在DOM树上,所以有更好的性能 可将该文 ...

  3. createDocumentFragment() 创建文档碎片节点

    var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...

  4. JS性能优化之创建文档碎片(document.createDocumentFragment)

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...

  5. 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()

          讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...

  6. 关于document的节点;用Dom2创建节点;

    一.关于节点 1.节点树状图 document>documentElement>body>tagName 2.节点类型 元素节点(标签).文本节点(文本).属性节点(标签属性) 3. ...

  7. 关于javascript document.createDocumentFragment() 替代insertCell、insertRow这种每次都使用大量的资源导致浏览器崩溃

    documentFragment 是一個無父對象的document對象他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes ...

  8. 浅析document.createDocumentFragment()与js效率

    对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就 ...

  9. document.createDocumentFragment 方法

    基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...

随机推荐

  1. 所使用的“System.Web.Mvc, Version=3.0.0.1, Culture=neutral, PublicKeyToken=31bf3856ad364e35”版本高于所引用的程序集“System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”的版本

    System.Web.Mvc.dll引用是感叹号. 解决方法:新建mv3应用程序,右键选择System.Web.Mvc.dll 查看所引用的路径. 在旧程序中重新引用即可.C:\Program Fil ...

  2. 使用DigitalOcean控制台访问Droplet(远程服务器)

    介绍 大多数用户将使用SSH,PUTTY或安装的控制面板管理他们的DigitalOcean Droplet. 但是,可能会出现阻止您使用这些方法访问Droplet的情况. 例如,更改网络或服务配置文件 ...

  3. 组合覆盖与PICT的使用

    组合覆盖法是一种有效减少测试用例个数的测试用例设计方法.根据覆盖程度的不同,可以分为单因素覆盖.成对组合覆盖.三三组合覆盖等.其中又以成对组合覆盖最常用. 关于组合覆盖的更多内容,参考:http:// ...

  4. 1: process

    https://blogs.sap.com/2013/08/20/creating-a-search-page-sap-crm-70-ehp-1/ https://www.cnblogs.com/sa ...

  5. CentOS6.5安装Kibana5.3.0

    1.写在安装之前,安装Kibana之前需要先安装Elasticsearch,为了安装时不出错,建议选择这两者选择一样的版本,本文全部选择5.3版本. 2.首先到官网下载安装包: https://art ...

  6. element-ui的滚动条组件el-scrollbar(官方没有)

    <template> <div style="height:600px;"> <el-scrollbar style="height:100 ...

  7. cocos2d JS-(JavaScript) 动态生成方法的例子

    function User(properties) { for (var i in properties) { (function (which) { var p = i; which["g ...

  8. eclipse签名使用的key文件(android生成keystore)

    命令行(或终端)生成keystore文件     在命令行(或终端)输入命令: keytool -genkey -alias Gallery.keystore -keyalg RSA -validit ...

  9. java的输入输出

    import java.util.Scanner; public class TestScanner { public static void main(String[] args) { Scanne ...

  10. can not create symbolic link HDFS解压自动配置lib报错。

    如题,使用FusionInsight解压生成样例代码的时候报错,找不到解释.只猜测是权限问题.然后并没有仔细静心思考,心里杂念很多,很浮躁. 解决方法是“以管理员身份运行“. 想想高中:面对问题,不能 ...