使用DocumentFragment将一批子元素添加到任何类似node的父节点上,对这批子元素的操作不需要一个真正的根节点。可以不依赖可见的DOM来构造一个DOM结构,而效率高是它真正的优势,试验表明,它比直接操作DOM快70%。下面我们就来看看DocumentFragments是如何使用的。

DocumentFragment例子

  我们要使用UL元素,然后往里面插入LI元素:

<ul id="list"></ul>

  DOM插入和修改是一个很费力耗时的工作,所以,这样的交互越少越好。这就是DocumentFragment发挥功用的地方了。第一步我们先创建一个DocumentFragment:

// Create the fragment
var frag = document.createDocumentFragment();

  DocumentFragment实际上像一个伪DOM节点,在这个例子里你可以把它当成虚拟的UL元素。现在,我们开始往里面加入元素:

// Create numerous list items, add to fragment
for(var x = 0; x < 10; x++) {
var li = document.createElement("li");
li.innerHTML = "List item " + x;
frag.appendChild(li);
}

  往DocumentFragment里添加元素就跟你操作普通的DOM节点一样。一旦页面DOM加载完成,你可以访问了,你就可以把DocumentFragement挂到它的父节点上:

// Mass-add the fragment nodes to the list
listNode.appendChild(frag);

  使用DocumentFragement要比直接对DOM节点操作要快的多,而且可以利用新DOM节点来操作DocumentFragement,这样比操作整个页面DOM要更容易。所以,当需要进行大量DOM操作时,尽量使用DocumentFragement,它会让你的应用变的更快!

转自:http://www.webhek.com/post/javascript-documentfragment.html

DocumentFragment --更快捷操作DOM的途径的更多相关文章

  1. 测试应用documentFragment 和 直接操作dom 的区别

    DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null. 不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment ...

  2. 使用原生 JavaScript 操作 DOM

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

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

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

  4. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  5. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  6. Javascript操作DOM常用API总结

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

  7. mui项目中如何使用原生JavaScript代替jquery来操作dom 转自【B5教程网】:http://www.bcty365.com/content-146-3661-1.html

    最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容 ...

  8. windows系统快捷操作の进阶篇

    上次介绍了windows系统上一些自带的常用快捷键,有些确实很方便,也满足了我们的一部分需求.但是我们追求效率的步伐怎会止步于此?这一次我将会进一步介绍windows上提升效率的方法. 一:运行 打开 ...

  9. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

随机推荐

  1. poj-2142-exgcd/解的和最小

    The Balance Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 8816   Accepted: 3833 Descr ...

  2. oracle 自动备份

    此次操作是每分钟备份一张表到新表(测试) 准备: 有一张表name是test 注意事项: 1.任务中调用需要显示声明权限 AUTHID CURRENT_USER 或赋予相应权限 2.单独调用过程成功, ...

  3. git如何merge github forked repository里的代码更新?(转)

    参考内容:git如何merge github forked repository里的代码更新? [refer to ]http://www.haojii.com/2011/08/how-to-git- ...

  4. 浅谈table、form 标签

    1.<table> 标签 1.1包含的元素 <caption></caption>:表头信息. <tr></tr> :定义一个表格行: &l ...

  5. nc(netcat)扫描开放端口

    探测单个端口是否开放可以用telnet,专业探测端口可以用Nmap,而对于非渗透用途的Linux可以直接用netcat. 1.使用netcat探测端口是否开放 nc -z -v - #z代表不交互要不 ...

  6. kali菜单中各工具功能

    一.说明 各工具kali官方简介(竖排):https://tools.kali.org/tools-listing 安装kali虚拟机可参考:https://www.cnblogs.com/lsdb/ ...

  7. DDOS 攻击的防范

    ddos 攻击介绍 可以看下面的文章 http://www.ruanyifeng.com/blog/2018/06/ddos.html 下面转自:  http://www.escorm.com/arc ...

  8. 通过css 实现“瀑布流”

    .hot_list{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -moz-column-gap:7px; -webk ...

  9. [IOS微信] PList文件解析,boost数据读取

    最近在解析IOS版微信数据中的 mmsetting.archive 文件时,第一次接触到PList文件. 注:mmsetting.archive  不是一个标准的PList文件,其中含有汉字,并且很多 ...

  10. CString 转换为 wchar_t *

    1.将CString转换为const char* CString str = _T("231222"); std::string strDp = CStringA(str);  / ...