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 节点.它有一个非常有用的 ...
随机推荐
- java装配bean
java装配bean,可以自动装配,也可以显式装配: 1.通过组件扫描自动装配bean 因为使用了Configuration注解,表明这个类是一个配置类,该类应该包含在spring应用上下文如何创建b ...
- Python3学习之路~5.5 sys模块
用于提供对解释器相关的操作 sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version 获取Python解释程序 ...
- 右键菜单添加git选项
1.jpg 2.jpg 3.jpg 4.jpg 5.jpg 6.jpg 7.jpg
- Windows XP解决显示桌面图标消失的问题
1.依次单击“开始”,“运行”,在运行对话框中输入regsvr32 /n /i:u shell32.dll,按回车键 2.弹出“shell32.dll中的DllInstall成功”的窗口,表明已将数据 ...
- 重识TP5中模型
创建一个表MODEL,下面展现代码片段: `id` int unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID', `name` ) NOT NULL DEFAU ...
- 【RPC】综述
RPC定义 RPC(Remote Procedure Call)全称远程过程调用,它指的是通过网络,我们可以实现客户端调用远程服务端的函数并得到返回结果.这个过程就像在本地电脑上运行该函数一样,只不过 ...
- git revert 撤销merge的动作
在执行完git merge提交以后,通常会merge过的分支的提交记录都带过来,比如A分支merge到了B分支,那么B分支上肯定有A分支的提交记录,如果此时要回退这个merge动作,是产生一条reve ...
- PS教程:如何批量处理图片
1.我们先准备两个文件夹,一个用来装你要处理的图片,可以是几百上千张,另一个是空文件夹,用来装等下处理好的图片. 2.打开PS,打开未处理文件夹里的任何一张图片. 3. 在红圈中点击,新建一个动作. ...
- jmeter压测之 监控--nmon
压测方法整理: 1. 写jmx脚本,整理csv数据文件: 2. 部署测试环境,把jmx和csv放在压测机,把监控脚本nmon放被压测机: 3. 安装nmon: a. w ...
- Mybatis中的常用的三个查询方法
selectList 用于查询多条数据的情况,返回值是一个list集合.如果没有查到任何数据,返回没有元素的集合(空集合,不是null) selectOne 用于查询单条数据的情况,返回值是一个对象, ...