我们知道,createDocumentFragment代表创建一个新的空白的文档片段;那么我们为什么说他呢?下面我们具体了解下
在前端飞速发展的热浪中,用户对体验的要求越来越高,导致我们对页面渲染展示的要求页越来越高,传统的dom渲染一直是很耗费时间的一种操作,而虚拟dom的优势却越来越得以体现,从以下两个小demo中,我们看到虚拟dom带给我们的直观体验
google浏览器下测试数据1000,耗费时间差分别为14ms和2ms;
当测试数据10000,耗时时间差分别为130ms和30ms
传统 dom 操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
</div>
<script>
var div = document.getElementsByTagName('div')[0]
var frag = document.createDocumentFragment()
var ul = document.createElement('ul')
var start = Date.now()
for(var i = 0; i<1000; i++){
var li = document.createElement('li')
li.innerHTML = "<li>您的顺序号为:" + (i+1) + ", 详情为:我是测试"+(i+1)+"号</li>"
ul.appendChild(li)
}
frag.appendChild(ul)
div.appendChild(frag)
var end = Date.now()
console.log('耗时:', (end - start)+'ms')
</script>
</body>
</html>
虚拟 dom 应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
</div>
<script>
var div = document.getElementsByTagName('div')[0]
var frag = document.createDocumentFragment()
var ul = document.createElement('ul')
var html = ''
var start = Date.now()
for (var i = 0; i < 1000; i++) {
html += "<li>您的顺序号为:" + (i + 1) + ", 详情为:我是测试" + (i + 1) + "号</li>"
}
ul.innerHTML = html
frag.appendChild(ul)
div.appendChild(frag)
var end = Date.now()
console.log('耗时:', (end - start)+'ms')
</script>
</body>
</html>
由此 我们不得不关注更快速的渲染方式了,而现有的Vue中也采用了这种方式
所以documentFragments具体是什么?兼容性如何呢
DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。
因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此,使用文档片段document fragments 通常会起到优化性能的作用(better performance)。
当然,如果添加的子元素是文档中存在的元素,则通过appendChild在为其添加子元素时,会从文档中删除之前存在的元素
注意! documentFragment 被所有主流浏览器支持