Ajax 在for循环中使用的createDocumentFragment（）

createDocumentFragment（）是否在下面的代码中执行任何操作

我正在尝试修改这个代码。我不确定它是如何工作的，而且

for

循环似乎没有调用

tableFrag

。你的见解

function createTable(searchResults)
{
    var results_table = 
        document.getElementById("report_results").getElementsByTagName("table")[0];

    var newLink, tableFrag;
    tableFrag = document.createDocumentFragment();
    tableFrag.appendChild(results_table);

    for (result_index in searchResults.results)
    {
        newRow = results_table.getElementsByTagName("tbody")[0].insertRow(-1);

        newCell = newRow.insertCell(-1);
        newCell.appendChild(document.createTextNode(searchResults.results[result_index]["score"]));

        newCell = newRow.insertCell(-1);
        newLink = document.createElement("a");
        newLink.href = 
            "officer.php?officer_seq="+searchResults.results[result_index]["officer_seq"];
        newLink.appendChild(document.createTextNode(searchResults.results[result_index]["officer_id"]));
        newCell.appendChild(newLink);

        newRow = null;
    }
    document.getElementById("report_results").appendChild(tableFrag);
}

具体来说，让我感到困惑的是，在循环中找不到

tableFrag

：

    for (result_index in searchResults.results)
    {
        ...
        tableFrag this-or-that
        ...
    }
    document.getElementById("report_results").appendChild(tableFrag);

---

在我看来，这个片段被用作存储results\u表的原始dom的一种方式。for循环然后对results_表进行更改。完成后，片段（包含原始表）将附加到results_表的末尾

---

它基本上是将新的搜索结果放在表的顶部，并将旧的结果移动到底部，因此片段和for循环都可以做一些事情。

在我看来，片段被用作存储表中结果的原始dom的一种方式。for循环然后对results_表进行更改。完成后，片段（包含原始表）将附加到results_表的末尾

---

它基本上是将新的搜索结果放在表的顶部，将旧的结果移到底部，因此片段和for循环都可以做一些事情。

此代码中文档片段的目的是临时从DOM中删除表

将表从DOM移动到片段

在表上执行操作

将表从片段移回DOM

这种方法只对片段使用两种DOM操作（步骤1和3）。它允许我们跳过步骤2所需的所有重新流动

---

每个DOM操作（例如，向in-DOM表中添加一行）都会导致页面重新流动（web浏览器重新计算并重新绘制页面）。当按顺序执行多个DOM操纵操作（例如，添加多行）时，不需要在每个操作之后进行重新流动。只有在完成整个过程后，页面才会重新流动。为了实现这一点，我们必须暂时将表从DOM中分离出来，将其移动到一个片段中。脱离DOM的元素不会导致重新流动。

此代码中文档片段的目的是临时从DOM中删除表

将表从DOM移动到片段

在表上执行操作

将表从片段移回DOM

这种方法只对片段使用两种DOM操作（步骤1和3）。它允许我们跳过步骤2所需的所有重新流动

---

每个DOM操作（例如，向in-DOM表中添加一行）都会导致页面重新流动（web浏览器重新计算并重新绘制页面）。当按顺序执行多个DOM操纵操作（例如，添加多行）时，不需要在每个操作之后进行重新流动。只有在完成整个过程后，页面才会重新流动。为了实现这一点，我们必须暂时将表从DOM中分离出来，将其移动到一个片段中。脱离DOM的元素不会导致重新流动。

是的，它正在做一些事情：性能优化

HTML文档中的元素保存在中，您可以通过DOM接口访问它（即

document.getElementById（id）

或

document.getElementsByClassName（）等方法）

。每次操作此树时，即通过Javascript代码插入、删除或修改节点时，浏览器的渲染引擎必须根据CSS定义的规则重新显示框（也称为回流），并在浏览器窗口上重新绘制树的可见部分

在您的情况下，必须向表中添加固定数量的行。循环开始时，您已经知道必须向表中添加

N

行。如果您只是向DOM元素添加行，则每次调用

table.appendChild（行）

浏览器将测量、布局和绘制页面，这种情况最多发生

N次（实际上，浏览器会限制这些昂贵的操作，但这不是任何规范所要求的，因此，出于学习目的，我们可以假设每次追加时，浏览器都会使树无效并重新绘制）

所有这些处理都是不需要的：我们不希望浏览器一次只增加一行表，我们只想在一次交易中，将
N
行放入表中。
DocumentFragment
的存在正是为了这个目的：当您操作片段的子项时，浏览器不会测量和布局ut任何东西。只有当您最终将片段附加到主DOM时，才会发生这种情况。在我们想象的简化浏览器中，绘制例程只调用一次，而不是调用
N
次

因此，您的脚本所做的是创建一个片段，从主DOM中删除表，将节点添加到片段中，在表附加到片段时对其进行操作，最后在最终测量、布局和绘制子对象时将整个片段添加回主DOM从DOM中删除表，但当子节点已经属于某个层次结构时，
Node.appendChild（Node）
方法就是这样做的：

将节点添加到指定父级的子级列表的末尾
节点。如果该节点已存在，则会将其从当前父节点中删除
节点，然后添加到新的父节点

您可以在上阅读有关
DocumentFragment
的更多信息。
是的，它正在做一些事情：性能优化

HTML文档中的元素保存在中，您可以通过DOM接口访问它（即
document.getElementById（id）
或
document.getElementsByClassName（）等方法）
。每次操作此树时，即当您通过Javascript代码插入、删除或修改节点时，浏览器的呈现引擎必须重新显示框（这也称为reflo