createDocumentFragment 文档碎片提升dom增删的性能
原理:
操作dom会使得页面进行重新渲染,如果
经常性的对dom就行操作或者一次性操作dom较多,每一次操作都会使页面进行重新渲染,降低页面加载性能。
针对IE9以下,可以使用文档碎片(documentFragment)的方式就行dom操作的存储,最后再讲文档碎片加个指定节点上。
但是会影响标准浏览器性能(影响不大)。
例子:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文档碎片</title>
</head>
<body>
<ul id="ul">
</ul>
</body>
</html>
javascript】:
var ul = document.getElementById("ul")
var oldDate = new Date().getTime();
var flagMent = document.createDocumentFragment();
for(var i=1 ; i<= 10000; i++){
var uli = document.createElement("li");
uli.innerHTML = "这是第"+i+"个li";
//ul.appendChild(uli);
flagMent.appendChild(uli);
}
ul.appendChild(flagMent);
var newDate = new Date().getTime();
console.log(newDate-oldDate)
createDocumentFragment 文档碎片提升dom增删的性能的更多相关文章
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- 使用文档碎片(DocumentFragments)追加DOM元素
标签(空格分隔): JavaScript DocumentFragment接口表示一个没有父级文件的最小文档对象.它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段 ...
- createDocumentFragment() 创建文档碎片节点
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
- 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...
- 文档碎片及xml讲解
1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...
- js文档碎片
//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 ; i < ; ...
- 文档碎片DocumentFragment
文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...
- 有关文档碎片(document fragment)的使用方法
通常情况下改动.删除或者添加DOM元素. 更新DOM会导致浏览器又一次绘制屏幕,也会导 致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量降低更新DOM.这也就意 味着将DOM的改变分批处 ...
随机推荐
- BZOJ2654 tree 【二分 + 最小生成树】
题目 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解. 输入格式 第一行V,E,need分别表示点数,边数和需要的白色边数. 接下来E行, ...
- XPosed框架_简单的应用
0. Xposed框架简介 关于Xposed框架相信大家应该不陌生了,他是Android中Hook技术的一个著名的框架,而Xposed框架是免费的而且还是开源的,本文主要介绍如何通过这个框架来进行系统 ...
- django-Ajax发送POST请求-csrf跨站请求的三种方式
第一种 <script> $(".eq").on("click",function () { $.ajax({ url:"/eq/&quo ...
- Java 线程池的原理与实现学习(二)
java类库中提供的线程池简介: java提供的线程池更加强大,相信理解线程池的工作原理,看类库中的线程池就不会感到陌生了. execute(Runnable command):履行Ruannable ...
- MongoDB_单机版环境搭建
linux上安装MogoDB http://www.runoob.com/mongodb/mongodb-linux-install.html 在https://www.mongodb.com/dow ...
- 三类(创结行),23种设计模式,速记理解法!PHP
一,创建型设计模式 1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳 ...
- Fragment的广播消息接收
这种方式不用在配置文件加东西 广播注册,可以写在Activity(onCreate),也可以写在Fragment(onActivityCreated)里. LocalBroadcastManager ...
- SecureCRT 配置文件中 找密码
打开本地电脑如下路径 C:\Users\XXX\AppData\Roaming\VanDyke\Config\Sessions 找到配置文件. 运行命令:python SecureCRTDecrypt ...
- 王垠 :写给支持和反对《完全用Linux工作》的人们 ( 2004/8/26)
在一阵阵唾骂和欢呼声中,<完全用linux工作>被转载到了天涯海角.很多人支持我,也有很多人唾骂我.我不知道它是怎样流传到那么多地方,其实 我不知道它都被转到哪里去了…… 我知道现在这篇文 ...
- Java普通员工管理系统
login GUI界面(登录) package 普通员工管理系统; import java.awt.event.ActionEvent; import java.awt.event.ActionLis ...