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. iOS开发之--使用storyboard进行跳转

    iOS开发中使用故事板进行开发是非常高效的一种方式,虽然有这样那样的问题,但是不得不承认,使用sb可以在最短的时间内完成整个项目的布局,节约开发者大量的时间,而且便于修改,非常直观,虽然可能不太灵活, ...

  2. 第十三篇：K-Means 聚类算法原理分析与代码实现

    前言 在前面的文章中,涉及到的机器学习算法均为监督学习算法. 所谓监督学习,就是有训练过程的学习.再确切点,就是有 "分类标签集" 的学习. 现在开始,将进入到非监督学习领域.从经 ...

  3. .net Session延长过期时间

    一.全局网站(即服务器)级 IIS-网站-属性-Asp.net-编辑配置-状态管理-会话超时(分钟)-设置为120,即为2小时,即120分钟后如果当前用户没有操作,那么Session就会自动过期. 二 ...

  4. layerui如何设置显示的位置？

    转自:http://www.layui.com/doc/modules/layer.html#offset layer.open({ type: 1,//默认:0 (0表示信息框,1表示页面层,2表示 ...

  5. python--base64

    import base64import os # base64,参数为文件路径名def file_base64(filepath): if os.path.isfile(filepath): with ...

  6. Exchange Database Status（Copy Status ，Content Index State，QueueLength，Move Status...）

    Copy Status Description Mounted The active copy is online and accepting client connections. Only the ...

  7. python学习笔记（二）— 字符串（string）

    字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 创建字符串很简单,只要为变量分配一个值即可.例如: var1 = 'Hello World!' var2 ...

  8. 隐藏Apache、nginx和PHP的版本号的配置方法

    最近提示说有漏洞,暴露apache.nginx和php的版本号.网上搜了下,整理的方法如下: 首先说apache 在http.conf文件里添加下面两行,默认是没有的 ServerSignature ...

  9. 使用Nana进行C++ GUI开发

    Nana官网地址:nanapro.org 简单示例:NanaDemo.cpp #include <nana/gui.hpp> #include <nana/gui/widgets/b ...

  10. HBase简单API

    一.使用IDEA的maven工程,工程结构如下: 二.maven的依赖pom.xml文件 <?xml version="1.0" encoding="UTF-8&q ...