原理：

操作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. [luoguP3172] [CQOI2015]选数（递推+容斥原理）

    传送门 不会莫比乌斯反演,不会递推. 但是我会看题解. 先将区间[L,H]变成(L-1,H],这样方便处理 然后求这个区间内gcd为k的方案数 就是求区间((L-1)/k,H/k]中gcd为1的方案数 ...

  2. 刷题总结——分糖果（bzoj2330）

    题目: Description 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一些要求,比如小明不希望小红分到的糖 ...

  3. Nk 1430 Fibonacci(二分矩阵乘幂)

    AC代码: #include<iostream> using namespace std; ][]; ][]; ][]; ][]; void binary(int n) { int i,j ...

  4. Linux性能分析Top

    前言 在实际开发中,有时候会收到一些服务的监控报警,比如CPU飙高,内存飙高等,这个时候,我们会登录到服务器上进行排查.本篇博客将涵盖这方面的知识:Linux性能工具. 一次线上问题排查模拟 背景:服 ...

  5. Day 5 Linux之用户、群组和权限

    Linux之用户.群组和权限 一.各文件及内容对应含义 1./etc/passwd文件 功能:存储所有用户的相关信息,该文件也被称为用户信息数据库(Database). 含义:如下图所示. 2./et ...

  6. C# 编程中的堆栈（Stack）和队列（Queue）

    一.什么是堆?(Heap)      堆是无序的,是一片不连续的内存域,由用户自己来控制和释放,如果用户自己不释放的话,当内存达到一定的特定值时,通过垃圾回收器(GC)来回收.      是程序运行期 ...

  7. Codeforces Round #307 (Div. 2) D. GukiZ and Binary Operations

    得到k二进制后,对每一位可取得的方法进行相乘即可,k的二进制形式每一位又分为2种0,1,0时,a数组必定要为一长为n的01串,且串中不出现连续的11,1时与前述情况是相反的. 且0时其方法总数为f(n ...

  8. ViewPager 无限循环遇到的坑 viewpager.setOffscreenPageLimit(2);

    viewpager.setOffscreenPageLimit(limit);这个方法,是表示viewpage除了当前显示的页面外,左右个预加载的页面个数,也就是 为limit=2时表示当前一共加载了 ...

  9. 空暇时候思考2（&#39;\0&#39;等价于数字0还是字符0）

    /********************************************************************** * * Copyright (c)2015,WK Stu ...

  10. Django简易安装

    Django简易安装 1,下载 https://www.djangoproject.com/download/ 2, 拷贝至python同级目录 python setup.py install 3,在 ...