document.createDocumentFragment 以及创建节点速度比较
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');
多次刷新,可以看到创建10000
个li
时,渲染所需要的时间如下图:
把上面的示例,换成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 以及创建节点速度比较的更多相关文章
- js添加创建节点和合并节点
var _div = document.createElement("div"), //创建节点 txt1 = document.createTextNode("123& ...
- 每天学一点---document.createDocumentFragment
document.createDocumentFragment 用于创建文档对象,创建好的对象存在于内存中(不会引起回流,对元素位置和几何上的运算),不是附着在DOM树上,所以有更好的性能 可将该文 ...
- createDocumentFragment() 创建文档碎片节点
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
- 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...
- 关于document的节点;用Dom2创建节点;
一.关于节点 1.节点树状图 document>documentElement>body>tagName 2.节点类型 元素节点(标签).文本节点(文本).属性节点(标签属性) 3. ...
- 关于javascript document.createDocumentFragment() 替代insertCell、insertRow这种每次都使用大量的资源导致浏览器崩溃
documentFragment 是一個無父對象的document對象他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes ...
- 浅析document.createDocumentFragment()与js效率
对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就 ...
- document.createDocumentFragment 方法
基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...
随机推荐
- 前端 HTML body标签相关内容 常用标签 表格标签 table
表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...
- 前端 HTML 常用标签 head标签相关内容 link标签
link标签 引入CSS样式文件 href="./index.css" CSS文件的路径 <!-- 引入CSS样式文件 --> <link rel="s ...
- Github安全开源工具集合
Scanners-Box是来自github平台的开源扫描仪的集合,包括子域枚举,数据库漏洞扫描程序,弱密码或信息泄漏扫描仪,端口扫描仪,指纹扫描仪和其他大型扫描仪,模块化扫描仪等.对于其他众所周知的扫 ...
- (转)EOS中账户、钱包和密钥的关系
EOS对于账户的设计与ETH有很大的不同,引入了Account账户, Wallet钱包, 钱包密码, Key公私钥, Permission权限等众多概念,刚入门的时候感觉一头雾水.本文希望通过对这些概 ...
- java实现的加密解密
void encode(File enfile, File defile) throws Exception { String Algorithm = "DES"; byte[] ...
- vue watch 监听element upload组件上传成功返回的url列表
因为 on-success 上传成功返回的是一个异步的结果....如果父组件需要这个结果的话 必须用watch 监听 然后里面建立一个 save()方法 save方法里面再调用接口 传需要的上传之后的 ...
- iOS UI基础-18.0 UIView
设置边框 UIView *bgView = [[UIView alloc] init]; bgView.backgroundColor = [UIColor whiteColor]; self.bgV ...
- cocos2d JS 在 JavaScript 中,怎样把一个对象转化成 JSON 字符串?
为什么今天要做这样子的操作,原因很简单,因为cocos JS 的本地缓存储存不了对象,所以当我通过本地缓存的 key和value来取值的时候就取不出来来,json的消息数据是一个对象来的,然而在做牌局 ...
- 使用SQL语句如何实现条件判断
客户需求是咨询如何用SQL结合decode函数实现条件判断,比如当某一列数值大于500,对应类型"大于500":当某一列数值小于500,对应类型"小于500". ...
- undefined reference 问题各种情况分析
扒自网友文章 关于undefined reference这样的问题,大家其实经常会遇到,在此,我以详细地示例给出常见错误的各种原因以及解决方法,希望对初学者有所帮助. 1. 链接时缺失了相关目标文件 ...