DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。

不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作

同时我们了解到当需要对页面DOM进行操作的时候必然会导致多次 重绘、回流（什么是重绘，回流？）。这样会加大页面的负担。影响页面性能。因此我们可以创建这样一个临时占位符。

测试 demo:

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div id="box">

        <button onclick="addList()">Button</button>

        <button onclick="addList2()">Button</button>

    </div>

    <div>

        <ul id="myList">

            <li>item</li>

        </ul>

        <hr>

    </div>

<script type="text/javascript">

function addList(){

    var doc = document,

    list = doc.getElementById('myList'),

    item,

    i;

    console.time('addList');

    for(i=0; i<1000; i++){

        item = doc.createElement('li');

        list.appendChild(item);

        item.appendChild(doc.createTextNode('item '+ i));

        console.log(list.clientHeight);

    }

    console.timeEnd('addList');

}

function addList2(){

    var doc = document,

    list = doc.getElementById('myList'),

    fragment = doc.createDocumentFragment(),

    item,

    i;

    console.time('addList2');

    for(i=0; i<1000; i++){

        item = doc.createElement('li');

        item.appendChild(doc.createTextNode('item '+ i));

        fragment.appendChild(item);

        console.log(list.clientHeight);

    }

    list.appendChild(fragment);

    console.timeEnd('addList2');

}

</script>

</body>

</html>

借用 在知乎上 网友 付星昱 的评论 解释一下：

直接往元素里 append的操作会引发 reflow，在循环中多次触发 reflow是非常不讨好的事情，
我们聪明的现代浏览器会将短时间内的多次 reflow收集起来组成队列，在一定时间后 flush队列，将多个 reflow的变为一次 reflow。

直接获取 offsetHeight会导致浏览器马上 flush队列，计算出当前值。
除了计算 offsetHeight，clientHeight/clientWidth，offsetWidth，scrollTop/Left/Height/width也会使浏览器立即 flush队列。

可以理解为什么  我之前多次测试 而看到的 两种方式 在时间上没什么差异的原因了；

测试应用documentFragment 和 直接操作dom 的区别的更多相关文章

  1. DocumentFragment --更快捷操作DOM的途径

    使用DocumentFragment将一批子元素添加到任何类似node的父节点上,对这批子元素的操作不需要一个真正的根节点.可以不依赖可见的DOM来构造一个DOM结构,而效率高是它真正的优势,试验表明 ...

  2. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  3. Javascript操作DOM常用API总结

    基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...

  4. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  5. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  6. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  7. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  8. [总结]JS操作DOM常用API详解

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  9. Angular使用总结 --- 如何正确的操作DOM

    无奈接手了一个旧项目,上一个老哥在Angular项目中大量使用了JQuery来操作DOM,真的是太不讲究了.那么如何优雅的使用Angular的方式来操作DOM呢? 获取元素 1.ElementRef  ...

随机推荐

  1. Invalid property 'driverClassName' of bean class [com.mchange.v2.c3p0.ComboPooledDataSource]

    spring配置文件中配置c3p0错误,错误原因在于c3p0连接池与DBCP连接池在驱动.连接.数据库用户名这些属性名称的差别

  2. 【BZOJ2037】[Sdoi2008]Sue的小球 区间DP+费用提前

    [BZOJ2037][Sdoi2008]Sue的小球 Description Sue和Sandy最近迷上了一个电脑游戏,这个游戏的故事发在美丽神秘并且充满刺激的大海上,Sue有一支轻便小巧的小船.然而 ...

  3. 转载 hibernate一级缓存和二级缓存的区别

    文章来源:http://blog.csdn.net/defonds/article/details/2308972     hibernate一级缓存和二级缓存的区别 缓存是介于应用程序和物理数据源之 ...

  4. Vue基础-作用域插槽-列表组件

    Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...

  5. Python全栈day18（三元运算，列表解析，生成器表达式）

    一,什么是生成器 可以理解为一种数据类型,这种数据类型自动实现了迭代器协议(其他数据类型需要调用自己内置的__iter__方法),所以生成器是可迭代对象. 二,生成器分类在python中的表现形式 1 ...

  6. Storm-源码分析- hook (backtype.storm.hooks)

    task hook 在某些task事件发生时, 如果用户希望执行一些额外的逻辑, 就需要使用hook 当前定义如下事件, emit, cleanup, spoutAck-- 用户只需要开发实现ITas ...

  7. ROS 笔记

    ros的编程范式 - ros认为,linux平台下,机器人的软件由一个个小程序组成,这些小程序称为node,每个小程序负责一部分功能 - ros实现的框架就是,小程序的并发执行+相互通信,程序(进程) ...

  8. Java 内省(Introspector)深入理解

    Java 内省(Introspector)深入理解 一些概念: 内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法. JavaBean是一种特殊的类 ...

  9. Python 面向对象进阶(二)

    1. 垃圾回收 小整数对象池 Python对小整数的定义是 [-5, 257),这些整数对象是提前建立好的; 在一个Python程序中,所有位于这个范围内的整数,使用的都是同一个对象; 单个字符共用对 ...

  10. neutron ml2

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhoumingbo532/article/details/27964675 在介绍ml2之前,先介绍 ...