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 节点.它有一个非常有用的 ...
随机推荐
- 所使用的“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 ...
- 使用DigitalOcean控制台访问Droplet(远程服务器)
介绍 大多数用户将使用SSH,PUTTY或安装的控制面板管理他们的DigitalOcean Droplet. 但是,可能会出现阻止您使用这些方法访问Droplet的情况. 例如,更改网络或服务配置文件 ...
- 组合覆盖与PICT的使用
组合覆盖法是一种有效减少测试用例个数的测试用例设计方法.根据覆盖程度的不同,可以分为单因素覆盖.成对组合覆盖.三三组合覆盖等.其中又以成对组合覆盖最常用. 关于组合覆盖的更多内容,参考:http:// ...
- 1: process
https://blogs.sap.com/2013/08/20/creating-a-search-page-sap-crm-70-ehp-1/ https://www.cnblogs.com/sa ...
- CentOS6.5安装Kibana5.3.0
1.写在安装之前,安装Kibana之前需要先安装Elasticsearch,为了安装时不出错,建议选择这两者选择一样的版本,本文全部选择5.3版本. 2.首先到官网下载安装包: https://art ...
- element-ui的滚动条组件el-scrollbar(官方没有)
<template> <div style="height:600px;"> <el-scrollbar style="height:100 ...
- cocos2d JS-(JavaScript) 动态生成方法的例子
function User(properties) { for (var i in properties) { (function (which) { var p = i; which["g ...
- eclipse签名使用的key文件(android生成keystore)
命令行(或终端)生成keystore文件 在命令行(或终端)输入命令: keytool -genkey -alias Gallery.keystore -keyalg RSA -validit ...
- java的输入输出
import java.util.Scanner; public class TestScanner { public static void main(String[] args) { Scanne ...
- can not create symbolic link HDFS解压自动配置lib报错。
如题,使用FusionInsight解压生成样例代码的时候报错,找不到解释.只猜测是权限问题.然后并没有仔细静心思考,心里杂念很多,很浮躁. 解决方法是“以管理员身份运行“. 想想高中:面对问题,不能 ...