原理：

操作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增删的性能的更多相关文章

  1. javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  2. 使用文档碎片（DocumentFragments）追加DOM元素

    标签(空格分隔): JavaScript DocumentFragment接口表示一个没有父级文件的最小文档对象.它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段 ...

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

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

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

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

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

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

  6. 文档碎片及xml讲解

    1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...

  7. js文档碎片

    //文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 ; i < ; ...

  8. 文档碎片DocumentFragment

    文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...

  9. 有关文档碎片（document fragment）的使用方法

    通常情况下改动.删除或者添加DOM元素. 更新DOM会导致浏览器又一次绘制屏幕,也会导 致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量降低更新DOM.这也就意 味着将DOM的改变分批处 ...

随机推荐

  1. [luoguP2606] [ZJOI2010]排列计数（DP）

    传送门 如果能够根据题意看出这是一个堆的话,那么就有些思路了.. 首先堆顶必须是最小元素,然后左右儿子可以预处理出来都有多少个数, 把剩余的数任意分配给两个儿子,用排列组合即可 dp(now) = d ...

  2. [BZOJ4992] [Usaco2017 Feb]Why Did the Cow Cross the Road（spfa）

    传送门 把每个点和曼哈顿距离距离它3步或1步的点连一条边,边权为3 * t + a[x][y] 因为,走3步,有可能是3步,也有可能是1步(其中一步拐了回来) 最后,把终点和曼哈顿距离距离它1步和2布 ...

  3. POJ 1125 Stockbroker Grapevine【floyd】

    很裸的floyd #include<cstdio> #include<string.h> #include<algorithm> #define maxn 201 ...

  4. 使用HttpClient实现对第三方服务器的请求并接受返回数据

    /* * 创建日期 2017-4-7 * * TODO 要更改此生成的文件的模板,请转至 * 窗口 - 首选项 - Java - 代码样式 - 代码模板 */ package com.enfo.int ...

  5. 【bzoj1710】[Usaco2007 Open]Cheappal 廉价回文

    [bzoj1710][Usaco2007 Open]Cheappal 廉价回文 Description 为了跟踪所有的牛,农夫JOHN在农场上装了一套自动系统. 他给了每一个头牛一个电子牌号 当牛走过 ...

  6. linux 中 stat 函数的用途和使用方法

    stat 函数讲解 表头文件:    #include <sys/stat.h> #include <unistd.h> 定义函数:    int stat(const cha ...

  7. ZOJ - 3816 Generalized Palindromic Number dfs

    Generalized Palindromic Number Time Limit: 2 Seconds                                     Memory Limi ...

  8. 51 NOD 1383 整数分解为2的幂

    设f[i]为i这个数的划分方案,则: 1.i是奇数的时候,最前面只能放1,所以f[i] = f[i-1] 2.i是偶数的时候,最前面可以放1也可以不放1,而不放1的时候数列都是偶数所以 f[i] = ...

  9. SSD TRIM

    SSD 在操作方式上与传统磁性驱动器不同,并且它们需要在软件上另行处理以达到功能优化.-- Don Watkins 编译自: https://opensource.com/article/17/1/s ...

  10. android开发教程之使用线程实现视图平滑滚动示例

    最近一直想做下拉刷新的效果,琢磨了好久,才走到通过onTouch方法把整个视图往下拉的步骤,接下来就是能拉下来,松开手要能滑回去啊.网上看了好久,没有找到详细的下拉刷新的例子,只有自己慢慢琢磨了.昨天 ...