理解 DocumentFragment

【理解 DocumentFragment】的更多相关文章

理解 DocumentFragment

理解 DocumentFragment 含义:创建文档片段,它继承了Node的所有方法,对DOM操作性能非常好.创建文档片段如下方法: var frag = document.createDocumentFragment(); 文档片段有三个node属性,nodeType, nodeName, nodeValue; 他们的值分别是 11, '#document-fragment', null, 文档片段节点没有父节点parentNode. 如下代码演示: var frag = document…

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

× 目录 [1]特征 [2]作用前面的话在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源特征创建文档片段,要使用document.createDocumentFragment()方法.文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作文档片段节点的三个node属性——nodeType.nod…

documentFragment深入理解

documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新.只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面. documentFragment用来批量更新列如将ul里面的li取出放到documentFragment,更新完毕后再将其插入到ul,一共有以下四步骤: 创建documentFragment对象fragment 取出ul中的所有子节点并保存到frag…

页面优化，DocumentFragment对象详解

一.前言最近项目不是很忙,所以去看了下之前总想整理的重汇和回流的相关资料,关于回流优化,提到了DocumentFragment的使用,这个对象在3年前我记得是有看过的,但是一直没深入了解过,所以这里做个整理.后面会把重汇,回流也做个整理,不鸽. 二.DocumentFragment对象是什么? MDN解释: DocumentFragment 表示一个没有父级文件的最小文档对象.它被当做一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段.最大的区别是因为Docu…

理解Shadow DOM(一)

1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那也就是说我们无法直接控制操纵的DOM结构.Shadow DOM 它是HTML的一个规范,它允许在文档(document)渲染时插入一颗DOM元素子树,但是这个子树不在主DOM树中.它允许浏览器开发者封装自己的HTML标签.css样式和特定的javascript代码.同时开发人员也可以创建类似 <in…

虚拟节点操作——DocumentFragment

文章中转站: DocumentFragment对象 createDocumentFragment()用法总结深入理解DOM节点类型第四篇——文档片段节点DocumentFragment…

理解HTML5中Range对象

1.理解Range对象重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~ 什么是Range对象? 在HTML5中,一个Range对象代表页面上的一段连续区域.可以通过如下语句创建一个空的Range对象.如下代码: var range = document.createRange(); 什么是Selection对象? 在HTML5中,每一个浏览器窗口都有一个Selection对象,代表用户鼠标在页面中…

从原型链看DOM－－Comment,CDATASection,DocumentType,DocumentFragment,Attr类型

这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,DocumentFragment,Attr类型. Comment类型原型链继承关系为comment实例.__proto__->Comment.prototype->CharacterData.prototype->Node.prototype->EventTarget.prototyp…

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

DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null. 不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点.这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点.它还有利于实现文档的剪切.复制和粘贴操作同时我们了解到当需要对页面DOM进行操作的时候必然会导致多次重绘.回流(…

DocumentFragment的相关用法

额,今天看了vue1.0关于模板渲染的知识,认识了DocumentFragment这个东西,它相当于一个节点容器,我们对他使用appendChild时,只有它的子节点会被插入进去,它本身不会插入进去,并且使用 DocumentFragment 处理节点,速度和性能远远优于直接操作 DOM. 好吧,在别人的文章中看到了一段用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="…