document.createDocumentFragment  用于创建文档对象,创建好的对象存在于内存中(不会引起回流,对元素位置和几何上的运算),不是附着在DOM树上,所以有更好的性能 可将该文档片段插入DOM树中,

例子:

var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer']; browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
}); element.appendChild(fragment);

每天学一点---document.createDocumentFragment的更多相关文章

  1. 关于javascript document.createDocumentFragment() 替代insertCell、insertRow这种每次都使用大量的资源导致浏览器崩溃

    documentFragment 是一個無父對象的document對象他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes ...

  2. 浅析document.createDocumentFragment()与js效率

    对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就 ...

  3. document.createDocumentFragment 方法

    基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...

  4. document.createDocumentFragment()运行效率

    createDocumentFragment作用是什么? 快速响应,提高效率,提升用户体验. 调用document.body.append(),每调用一次都要刷新页面 一次.效率就低了. 用docum ...

  5. document.createDocumentFragment 以及创建节点速度比较

    document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象. Docum ...

  6. 学一点 MYSQL 双机异地热备份—-MYSQL主从,主主备份原理及实践

    简单介绍mysql双机,多机异地热备简单原理实战. 双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据库数据一致. 这样做 ...

  7. 关于document.createDocumentFragment()(转)

    documentFragment 是一个无父对象的document对象. 他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNod ...

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

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

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

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

随机推荐

  1. 极限编程核心价值:沟通(Communication)

    原文:https://deviq.com/communication 极限编程核心价值:简单(Simplicity) 极限编程核心价值:沟通(Communication) 极限编程核心价值:反馈(Fe ...

  2. oracle备份与恢复

    Oracle数据库有三种标准的备份方法,它们分别是导出/导入(EXP/IMP).热备份和冷备份.导出备件是一种逻辑备份,冷备份和热备份是物理备份. 导出/导入(Export/Import) 利用Exp ...

  3. node封装mysql操作

    前言 node是基于异步的,因此在进行数据库查询操作的通常是通过回调来操作查询结果.但是在有了es7的async/await,基本不再需要回调了,所以本篇是基于async/await对mysql进行一 ...

  4. CSS中如何选择ul下li的奇数、偶数行

    <style> #Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行 #Ulist li:nth-of-type(even){margin- ...

  5. Concurrent包学习之 BlockingQueue源码学习

    上一篇学习了ExecutorService和其它相关类的源码,本篇要学习的BlockingQueue中的源码,as always,先上类图 其实继承(实现)的层次比较简单,我们只要需要先学习一下Blo ...

  6. Qt入门之基础篇 ( 一 ) :Qt4及Qt5的下载与安装

    转载请注明出处:CN_Simo. 导语: Qt是一个跨平台的C++图形界面应用程序框架.它提供给开发者建立图形用户界面所需的功能,广泛用于开发GUI程序,也可用于开发非GUI程序.Qt很容易扩展,并且 ...

  7. k-center问题-学习

    k-center问题: In graph theory, the metric k-center or metric facility location problem is a combinator ...

  8. Jmeter—控件

    Jmeter有许多控件,可以在我们模拟测试请求时使用. Jmeter共有这8类控件: 配置元件—Http请求默认值 作用:仅设置一次目标URL服务器地址,之后不需要每次请求都写完整的,仅写相对地址就可 ...

  9. centos 7 163 yum 源 python 2.7.5

    安装 repo 源. repo 源一般包括 base, updates, Extras 三部分. $ cd /etc/yum.repos.d/ $ wget http://mirrors.163.co ...

  10. cURL函数库错误码说明之PHP curl_errno函数

    背景概述:游戏接口是使用PHP cURL扩展进行请求操作.但是,被请求的服务器经常会无故的不响应或者超时.总之,就是请求之后收不到响应回来的数据.这时候可不能说对方API接口有问题,或者,服务器有故障 ...