认识createDocumentFragment

今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。

因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此,使用文档片段document fragments 通常会起到优化性能的作用(better performance)。

    比如动态添加多个文本节点或者元素节点时,调用多次document.body.append(),每次都要刷新页面一次。效率也就大打折扣了,而使用document_createDocumentFragment()创建一个文档碎片,把所有的新结点附加在其上,然后把文档碎片的内容一次性添加到document中,这也就只需要一次页面刷新就可。

他支持以下DOM2方法:  a, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.  也支持以下DOM2属性:  attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.

下面是2段测试程序:

var d1 = new Date();

//创建十个段落,常规的方式

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

    var p = document_createElement_x_x_x("p");

    var oTxt = document_createTextNode("段落" + i);

    p.a(oTxt);

    document.body.a(p);

}

var d2 = new Date();

document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));

//使用了createDocumentFragment()的程序

var d3 = new Date();

var pFragment = document_createDocumentFragment();

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

    var p = document_createElement_x_x_x("p");

    var oTxt = document_createTextNode("段落" + i);

    p.a(oTxt);

    pFragment.a(p);

}

document.body.a(pFragment);

var d4 = new Date();

document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

注:document_createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。

本文部分内容摘自《莫尘的博客》,链接地址:http://blog.sina.com.cn/s/blog_667a8c2f010113zw.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

python爬虫beautifulsoup4系列1

前言 以博客园为例,爬取我的博客上首页的发布时间、标题、摘要,本篇先小试牛刀,先了解下它的强大之处,后面讲beautifulsoup4的详细功能。 一、安装...

390110
来自专栏超然的博客

react入门——慕课网笔记

  1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性

11120
来自专栏向治洪

深入理解React Native页面构建渲染原理

前言 React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。 基本概念解释 React 是...

845100
来自专栏coder修行路

Go基础--终端操作和文件操作

终端操作 操作终端相关的文件句柄常量 os.Stdin:标准输入 os.Stdout:标准输出 os.Stderr:标准错误输出 关于终端操作的代码例子: pa...

30860
来自专栏偏前端工程师的驿站

JS魔法堂:再识ASCII实体、符号实体和字符实体

一、前言                                            相信大家都熟悉通过字符实体 &nbsp; 来实现多个连续空格的输...

24680
来自专栏向治洪

深入理解React Native页面构建渲染原理

前言 React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。 基本概念解释 React 是...

43890
来自专栏Golang语言社区

Go语言的os包中常用函数初步归纳

1)os.Getwd函数原型是func Getwd() (pwd string, err error) 返回的是路径的字符串和一个err信息,为什么先开这个呢?...

35690
来自专栏web前端-

rem和em小插曲

1.对em来说,它的大小是相对于父层font-size来改变,但是如果其自身有font-size属性的话,em会优先考虑自身的font-size;

10120
来自专栏柠檬先生

Angularjs基础(十一)

ng-csp       描述:修改内容的安全策略       实例: 修改AngularJS 中关于"eval"的行为方式及内联样式;         ...

27750
来自专栏Golang语言社区

Go 语言简介(下) - 特性

goroutine GoRoutine主要是使用go关键字来调用函数,你还可以使用匿名函数,如下所示: package main import "fmt" f...

28350

扫码关注云+社区

领取腾讯云代金券