为什么documentFragment没有比重复的DOM访问快? [英] Why is documentFragment no faster than repeated DOM access?

查看：33
本文介绍了为什么documentFragment没有比重复的DOM访问快?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我总是给人一种印象，不是出于性能原因而不是反复接触DOM，我们应该使用 documentFragment 来添加多个元素，然后将片段一次添加到文档中，而不是而不是将新元素一个接一个地重复添加到DOM中.

我一直在尝试通过此测试页使用Chrome的开发工具来介绍这两种方法:

 < button id ="addRows">添加行</button>< table id ="myTable"></table>

测试1使用此代码将500000新行追加到表中:

 让addRows = document.getElementById('addRows');addRows.addEventListener('click'，function(){for(let x = 0; x< 50000; x + = 1){让表= document.getElementById('myTable')，行= document.createElement('tr')，单元格= document.createElement('td')，cell1 = cell.cloneNode()，cell2 = cell.cloneNode()，cell3 = cell.cloneNode();cell1.textContent ='A';cell2.textContent ='B';cell3.textContent ='C';row.appendChild(cell1);row.appendChild(cell2);row.appendChild(cell3);table.appendChild(row);}});

在Chrome的时间轴工具中进行录制时单击该按钮将产生以下输出:

测试2改为使用以下代码:

 让addRows = document.getElementById('addRows');addRows.addEventListener('click'，function(){让表= document.getElementById('myTable')，单元格= document.createElement('td')，docFragment = document.createDocumentFragment();for(let x = 0; x< 50000; x + = 1){让row = document.createElement('tr')，cell1 = cell.cloneNode()，cell2 = cell.cloneNode()，cell3 = cell.cloneNode();cell1.textContent ='A';cell2.textContent ='B';cell3.textContent ='C';row.appendChild(cell1);row.appendChild(cell2);row.appendChild(cell3);docFragment.appendChild(row);}table.appendChild(docFragment);});

具有这样的性能概况:

第二个，据说比第一个要快得多，实际上要花费更长的时间！我已经多次运行了这些测试，有时第二种方法稍快一些，有时，如这些图像所示，第二种方法稍慢一些，但是这两种方法之间没有一次显着差异.

这是怎么回事?现在浏览器的优化程度是否如此之好，以至于不再起作用?我是否不正确地使用了分析工具?

我使用的是Windows 10，带有Chrome 57.0.2987.133

解决方案

实际上，您的测试代码只是插入节点，并且不会更改其内容或CSS，实际上会迫使渲染引擎重排.

我准备了3个测试来证明这种巨大的差异.

  1. 简单的DOM修改导致版式破坏
  2. 通过 window.requestAnimationFrame()
    3. 进行简单的DOM修改
  3. 通过 document.createDocumentFragment()
    4. 进行虚拟DOM修改

注释:

  • 您可能希望在全屏模式下进行测试.
  • 在Firefox中，我获得了更加引人注目的结果.

 //重置div函数resetLayout(){divs = document.querySelectorAll('div');speed.textContent =正在重置布局...";setTimeout(function(){each.call(divs，function(div){div.style.height ='';div.offsetTop;});speed.textContent =";}，16);}//打印结果函数renderSpeed(ms){speed.textContent = ms +'ms';}var divs = document.querySelectorAll('div')，raf = window.requestAnimationFrame，每个= Array.prototype.forEach，isAfterVdom = false，开始= 0;//重置布局reset.onclick = resetLayout;//直接DOM访问direct.onclick = function(){isAfterVdom&&(divs = document.querySelectorAll('div')，isAfterVdom = false);开始= performance.now();each.call(divs，function(div){var width = div.clientWidth;div.style.height = ~~(Math.random()* 2 * width + 6)+'px';div.style.backgroundColor ='#'+ Math.floor(Math.random()* 16777215).toString(16);});//渲染结果renderSpeed(performance.now()-开始);};//通过requestAnimationFrame在下一帧访问DOMrAF.onclick = function(){isAfterVdom&&(divs = document.querySelectorAll('div')，isAfterVdom = false);开始= performance.now();each.call(divs，function(div){var width = div.clientWidth;//安排写操作在下一帧中运行.raf(function(){div.style.height = ~~(Math.random()* 2 * width + 6)+'px';div.style.backgroundColor ='#'+ Math.floor(Math.random()* 16777215).toString(16);});});//渲染结果raf(function(){renderSpeed(performance.now()-开始);});};//更新vDOM并通过rAF一次访问DOMvdom.onclick = function(){var sectCl = divCompartment.cloneNode(true)，divsCl = sectCl.querySelectorAll('div')，dFrag = document.createDocumentFragment()，width = divCompartment.querySelector('div').clientWidth;isAfterVdom = true;结束= 0;开始= performance.now();each.call(divsCl，function(div){div.style.height = ~~(Math.random()* 2 * width + 6)+'px';div.style.backgroundColor ='#'+ Math.floor(Math.random()* 16777215).toString(16);});dFrag.appendChild(sectCl);divCompartment.parentNode.replaceChild(dFrag，divCompartment);//渲染结果renderSpeed(performance.now()-开始);};  

  html {字体:14px Helvetica，无衬线；背景:黑色；白颜色;}* {框大小:border-box；底边距:1rem;}h1 {字号:2em；//word-break:断字;-webkit-连字符:自动;}按钮 {背景颜色:白色；}div {显示:inline-block;宽度:5％;边距:3px；背景:白色；边框:纯2px白色；边框半径:10px}部分 {溢出:隐藏；}#速度 {字体大小:2.4em；}  

 < body>< h1>更新1000个DOM节点</h1>< section>< button id =重置">重置布局</button>< button id ="direct">直接更新</button>< button id ="rAF">通过rAF</button>更新；< button id ="vdom">通过vDOM更新</button>< section id ="speed"></section>< section id ="divCompartment">< div</div>< div</div>< div</div< div></div< div<>/div;/div>< div</div< div></div< div<</div< div< div;; div>//div>< div;</div>< div</div;< div>//div< div<</div< div></div>< div></div>< div></div>< div<</div>< div<</div>< div></div>div</div>< div</div>< div</div;< div></div< div<</div< div></div< div</div>< div></div>< div</div;</div></div;< div></div< div></div< div< div</div>< div</div;< div</div>< div</div"< div</div< div<</div< div></div>< div>/div< div></div< div></div< div< div</div< div</div>< div</div>< div</div< div></div< div<>/div;/div>< div</div< div></div< div<</div< div< div;; div>//div>< div;</div>< div</div;< div>//div< div<</div< div></div> div divdiv</div>< div</div>< div</div;< div></div< div<</div< div></div< div</div>< div></div>< div</div;</div></div;< div></div< div></div< div<</div>;< div</div>< div</div>< div</div< div<</div< div></div< div></div>< div>/div< div></div< div></div< div< div</div< div</div>< div</div>< div</div< div></div< div<>/div;/div>< div</div< div></div< div<</div< div< div；；；；；；；；；；；；；/div> div divdiv</div>< div</div>< div</div;< div></div< div<</div< div></div< div</div>< div></div>< div<</div>< div<</div>< div>;</div></div;< div></div< div<</div< div< div<</div>< div></div>;< div</div>< div</div< div</div>< div>/div< div></div< div></div< div< div</div< div</div>< div</div>< div</div< div></div< div<>/div;/div>< div</div< div></div< div<</div< div< div;; div>//div>< div;</div>< div</div;< div>//div< div<</div< div></div> div divdiv</div>< div</div>< div</div;< div></div< div<</div>< div</div>< div>/div;</div></div;< div></div< div></div< div< div</div;< div</div>< div</div>< div</div< div<</div< div></div< div></div>< div>/div< div></div< div></div< div< div</div>< div</div< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div< div></div< div<</div< div< div；；；；；；；；；；；；；/div< div</div>< div></div>< div></div>< div<</div>< div></div></div< div></div< div></div< div<</div>< div></div< div>/div;</div></div;< div></div< div></div< div< div</div>< div</div;< div</div>< div</div>< div</div< div<</div< div></div< div></div>< div>/div< div></div< div></div< div< div</div< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div< div></div< div<</div< div< div; div</div>< div</div>< div></div< div></div< div<</div>gt;</div>< div></div>< div</div< div<</div< div></div< div>;</div></div;< div></div< div></div< div< div</div;< div</div>< div</div< div</div>< div</div>< div></div< div></div< div< div</div>< div></div>< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div>< div></div< div<</div>< div<</div>< div</div；；；；；；；；；；；；；/div< div</div>< div></div>< div<</div>< div<</div>< div"gt;< div;< div</div>< div></div< div></div< div<</div>< div></div< div</div>< div></div>< div</div;</div></div;< div></div< div></div< div< div</div< div<</div>;< div</div>< div</div< div</div>< div>/div< div></div< div></div< div< div</div>< div</div< div</div>< div</div>< div</div< div></div< div></div< div<<><;/div>< div</div< div></div< div<</div< div<</div>< div></div><; div</div>< div</div>< div></div< div></div>< div></div>< div</div>< div></div>< div></div< div;</div></div;< div></div< div></div< div< div</div< div<</div>;< div</div>< div</div>< div</div< div<</div< div></div< div></div>< div>/div< div></div< div></div< div< div</div< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div>< div></div< div<</div>< div<</div>< div</div;; div>//div>< div;</div>< div</div;< div>//div< div<</div>< div></div< div</div>< div></div>< div></div>< div<</div>< div</div>< div</div>< div></div< div></div< div></div>< div</div< div>/div;</div></div;< div></div< div></div< div< div</div< div<</div>;< div</div>< div</div>< div</div< div<</div< div></div< div></div>< div>/div< div></div< div></div< div< div</div>< div</div< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div>< div></div< div<</div>< div<</div>< div</div; div</div>< div</div>< div></div< div></div< div></div>< div>/div< div></div>< div<</div< div;</div></div;< div></div< div></div< div< div</div< div<</div>;< div</div>< div</div>< div</div< div<</div>< div></div< div></div>< div>/div< div></div< div></div< div< div</div>< div</div< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div>< div></div< div<</div>< div<</div>< div</div;; div>//div>< div;</div>< div</div;< div>//div< div<</div>< div></div< div</div>< div></div>< div<</div>< div<</div>< div</div;< div;</div>< div></div< div></div>< div></div< div></div< div</div>< div></div>< div</div;</div></div;< div></div< div></div< div< div</div< div<</div>;< div</div>< div</div>< div</div< div<</div>< div></div< div></div>< div>/div< div></div< div></div< div< div</div>< div</div< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div>< div></div< div<</div>< div<</div>< div</div; div</div>< div</div>< div></div< div></div< div></div< div>/div< div></div< div;</div></div;< div></div< div></div< div< div</div;< div</div>< div</div< div</div>< div</div>< div></div< div></div< div< div</div>< div></div>< div</div>< div</div>< div</div< div></div< div<>/div;/div>< div</div< div></div< div<</div< div< div；；；；；；；；；；；；；/div< div</div>< div></div>< div<</div>< div<</div< div</div;< div</div>< div</div;< div></div< div></div< div</div< div</div>< div></div>< div</div;</div></div;< div></div< div></div< div< div</div>< div</div;< div</div>< div</div< div</div>< div</div>< div></div< div<</div< div< div</div>< div</div>< div</div< div></div< div<>/div;/div>< div</div>< div></div< div<</div>< div<</div>< div</div;; div</div>< div</div>< div></div< div></div< div></div< div>/div;</div></div;< div></div< div></div< div< div</div;< div</div>< div</div>< div</div< div<</div< div></div< div></div>< div>/div< div></div< div></div< div< div</div>< div</div< div</div>< div</div>< div</div< div></div< div<>/div;/div>< div</div>< div></div< div<</div>< div<</div>< div</div;; div>//div>< div;</div>< div</div;< div>//div< div<</div>< div></div< div</div>< div></div>< div></div< div<</div><div</div>< div</div>< div</div;< div></div< div<</div< div></div< div</div>< div></div>< div</div;</div></div;< div></div< div></div< div< div</div< div<</div>;< div</div>< div</div>< div</div< div<</div>< div></div< div></div>< div>/div< div></div< div></div< div< div</div>< div</div< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div< div></div< div<</div< div< div; div;/div;< div;</div>< div></div< div></div< div<>/div> div divdiv</div>< div</div>< div</div;< div></div< div<</div< div></div< div</div>< div></div>< div</div;</div></div;< div></div< div></div< div< div</div;< div</div>< div</div< div</div>< div>/div< div></div< div></div< div< div</div< div</div>< div</div>< div</div< div></div< div></div< div<<><;/div>< div</div>< div></div< div></div< div<</div><；；；；；；；；；；；；；/div> div divdiv</div>< div</div>< div</div;< div></div< div<</div< div></div< div</div>< div></div>< div</div;</div></div;< div></div< div></div< div< div</div;< div</div>< div</div< div</div>< div>/div< div></div< div></div< div< div</div< div</div>< div</div>< div</div< div></div< div<><;/div>< div</div< div></div< div<</div< div< div；；；；；；；；；；；；；/div> div divdiv</div>< div</div>< div</div;< div></div< div<</div< div></div< div>/div;</div></div;< div></div< div></div< div< div</div>< div</div;< div</div>< div</div>< div</div>< div</div< div<</div< div></div>< div</div>< div></div< div></div< div< div</div>< div</div>< div</div>< div</div;< div</div< div< div</div< div><<;/div>< div</div< div></div< div<</div< div< div;; div>//div>< div;</div>< div</div;< div>//div< div<</div>< div></div> div divdiv</div>< div</div>< div</div;< div></div< div></div< div</div< div>/div;</div></div;< div></div< div></div< div< div</div;< div</div>< div</div>< div</div< div<</div< div>&l;t;/div> 
 
 
 
 
 
 
 
 
 
 
< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div< div></div< div<</div< div< div;; div>//div>< div;</div>< div</div;< div>//div< div<</div< div></div> div divdiv</div>< div</div>< div</div;< div></div< div<</div< div></div< div;</div>< div></div>< div</div;</div></div;< div></div< div></div< div<</div>>lt div div div div div div div div div div div;/div>< div</div>< div></div< div<</div>< div<</div>< div</div;; div>//div>< div;</div>< div</div;< div>//div< div<</div>< div></div> div divdiv</div>< div</div>< div</div;< div></div< div<</div< div></div< div>/div;</div></div;< div></div< div></div< div< div</div>< div</div;< div</div>< div</div>< div</div< div<</div< div>></div>< div>/div< div></div< div<</div< div< div</div< div</div>< div</div>< div</div< div></div< div<</div>< div><;/div>< div</div< div></div< div<</div< div< div;; div>//div>< div;</div>< div</div;< div>//div< div<</div>< div></div> div divdiv</div>< div</div>< div</div;< div></div< div<</div< div></div< div</div>< div></div>< div</div;</div< div></div< div></div< div></div< div<</div></section></body>

I was always under the impression that rather than touching the DOM repeatedly, for performance reasons, we should use a documentFragment to append multiple elements to, and then append the fragment into the document once, rather than just repeatedly appending new elements one-by-one into the DOM.

I've been trying to use Chrome's dev tools to profile these two approaches, using this test page:

<button id="addRows">Add rows</button>
<table id="myTable"></table>

Test 1 uses this code to append 50000 new rows to the table:

let addRows = document.getElementById('addRows');
addRows.addEventListener('click', function () {
    for (let x = 0; x < 50000; x += 1) {
        let table = document.getElementById('myTable'),
            row = document.createElement('tr'),
            cell = document.createElement('td'),
            cell1 = cell.cloneNode(),
            cell2 = cell.cloneNode(),
            cell3 = cell.cloneNode();

        cell1.textContent = 'A';
        cell2.textContent = 'B';
        cell3.textContent = 'C';

        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        table.appendChild(row);
    }
});

Clicking the button while recording in Chrome's Timeline tool results in the following output:

Test 2 uses this code instead:

let addRows = document.getElementById('addRows');
addRows.addEventListener('click', function () {
    let table = document.getElementById('myTable'),
        cell = document.createElement('td'),
        docFragment = document.createDocumentFragment();

    for (let x = 0; x < 50000; x += 1) {
        let row = document.createElement('tr'),
            cell1 = cell.cloneNode(),
            cell2 = cell.cloneNode(),
            cell3 = cell.cloneNode();

        cell1.textContent = 'A';
        cell2.textContent = 'B';
        cell3.textContent = 'C';

        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);

        docFragment.appendChild(row);
    }

    table.appendChild(docFragment);
});

This has a performance profile like this:

The second, supposedly much faster alternative to the first, actually takes longer to run! I've run these tests numerous times and sometimes the second approach is slightly faster, and sometimes, as these images show, the second approach is slightly slower, but not once has there been any significant difference between the two approaches.

What is happening here? Are browsers optimized so well now that this makes no difference anymore? Am I using the profiling tools incorrectly?

I'm on Windows 10, with Chrome 57.0.2987.133

解决方案

Well actually your test code just insert nodes and do not alter their content or CSS which would in fact force the rendering engine to a reflow.

I have prepared 3 tests to demonstrate this dramatic difference.

  1. Simple DOM modificiation resulting Layout Trashing
  2. Simple DOM modificiation through window.requestAnimationFrame()
  3. Virtual DOM modification through document.createDocumentFragment()

Notes:

  • You might like to test on full screen.
  • In Firefox I have obtained even more dramatic results.

// Resets the divs
function resetLayout() {
  divs = document.querySelectorAll('div');
  speed.textContent = "Resetting Layout...";
  setTimeout(function() {
               each.call(divs, function(div) {
                                 div.style.height = '';
                                 div.offsetTop;
                               });
               speed.textContent = "";
             }, 16);
}
// print the result
function renderSpeed(ms) {
  speed.textContent = ms + 'ms';
}

var divs        = document.querySelectorAll('div'),
    raf         = window.requestAnimationFrame,
    each        = Array.prototype.forEach,
    isAfterVdom = false,
    start       = 0;

// Reset the Layout

reset.onclick = resetLayout;

// Direct DOM Access

direct.onclick = function() {
                   isAfterVdom && (divs = document.querySelectorAll('div'), isAfterVdom = false);
                   start = performance.now();

                   each.call(divs, function(div) {
                   var width = div.clientWidth;
                   div.style.height = ~~(Math.random()*2*width+6) + 'px';
                   div.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
                 });

                   // Render result
                   renderSpeed(performance.now() - start);
                 };

// Access DOM at the next frame by requestAnimationFrame

rAF.onclick = function() {
                isAfterVdom && (divs = document.querySelectorAll('div'), isAfterVdom = false);
                start = performance.now();

                each.call(divs, function(div) {
                                  var width = div.clientWidth;
                                  // Schedule the write operation to be run in the next frame.
                                  raf(function() {
                                        div.style.height = ~~(Math.random()*2*width+6) + 'px';
                                        div.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
                                      });
                                });
               // Render result
               raf(function() {
                     renderSpeed(performance.now() - start);
                   });
             };

// Update the vDOM and access DOM just once by rAF

vdom.onclick = function() {
                 var sectCl = divCompartment.cloneNode(true),
                     divsCl = sectCl.querySelectorAll('div'),
                     dFrag  = document.createDocumentFragment(),
                     width  = divCompartment.querySelector('div').clientWidth;
                 
                 isAfterVdom = true;
                 end = 0;
                 start  = performance.now();
                 each.call(divsCl, function(div) {
                                     div.style.height = ~~(Math.random()*2*width+6) + 'px';
                                     div.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
                                   });
                 dFrag.appendChild(sectCl);
                 divCompartment.parentNode.replaceChild(dFrag, divCompartment);
                 // Render result
                 renderSpeed(performance.now() - start);
               };

html {
  font: 14px Helvetica, sans-serif;
  background: black;
  color: white;
}

* {
  box-sizing: border-box;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2em;
  //word-break: break-word;
  -webkit-hyphens: auto;
}

button {
  background-color: white;
}

div {
  display: inline-block;
  width: 5%;
  margin: 3px;
  background: white;
  border: solid 2px white;
  border-radius: 10px
}

section {
  overflow: hidden;
}

#speed {
  font-size: 2.4em;
}

<body>
  <h1>Updating 1000 DOM Nodes</h1>
  <section>
    <button id="reset">Reset Layout</button>
    <button id="direct">Update Directly</button>
    <button id="rAF">Update by rAF</button>
    <button id="vdom">Update by vDOM</button>
    <section id="speed"></section>
    <section id="divCompartment">
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </section>
</body>

这篇关于为什么documentFragment没有比重复的DOM访问快?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆