createDocumentFragment 好处知多少

我们知道，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 被所有主流浏览器支持

createDocumentFragment 好处知多少

猜你喜欢