解密jQuery内核 DOM操作的核心buildFragment

2022-06-09 09:25:53

文档碎片是什么

http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3

DocumentFragment is a "lightweight" or "minimal" Document object. It is very common to want to be able to extract a portion of a document‘s tree or to create a new fragment of a document

参考标准的描述，DocumentFragment是一个轻量级的文档对象，能够提取部分文档的树或创建一个新的文档片段

换句话说有文档缓存的作用

createDocumentFragment有什么作用

多次使用节点方法(如：appendChild)绘制页面,每次都要刷新页面一次。效率也就大打折扣了，而使用document_createDocumentFragment()创建一个文档碎片，把所有的新结点附加在其上，然后把文档碎片的内容一次性添加到document中，这也就只需要一次页面刷新就可。

DocumentFragment类型

在所有节点类型中，只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段（documentfragment）是一种”轻量级“的文档，可以包含和控制节点，但不会像完整的文档那样占用额外资源。DocumentFragment节点具有下列特征：

nodeType的值为11
nodeName的值为“#document-fragment”
nodeValue的值为null
parentNode的值为null
子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference

虽然不能把文档片段直接添加到文档中，但可以将它作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段，可以使用document.createDocumentFragment()方法，如下所示：

var fragment = document.createDocumentFragment();

文档片段继承了Node的所有方法，通常用于执行那些针对文档的DOM操作。如果将文档中的节点添加到文档片段中，就会从文档树中再看到该节点。添加到文档片段中的新节点同样也不属于文档树。可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。在将文档片段作为参数传递给这两个方法时，实际上只会将文档片段的所有子节点添加到相应的位置上；文档片段本身永远不会称为文档树的一部分

http://www.w3cmm.com/dom/documentfragment.html

createElement与createDocumentFragment

createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段

DocumentFragment 接口表示文档的一部分（或一段）。更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。

DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。

不过它有一种特殊的行为，该行为使得它非常有用

即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作，尤其是与 Range 接口一起使用时更是如此

可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。

也可以用 Range.extractContents() 方法或 Range.cloneContents() 方法获取包含现有文档的片段的 DocumentFragment 节点。

除此之外

createElement创建的元素可以使用innerHTML，createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果，只是作为一个属性而已。两者的节点类型完全不同，并且createDocumentFragment创建的元素在文档中没有对应的标记，因此在页面上只能用js中访问到

createElement创建的元素可以重复操作，添加之后就算从文档里面移除依旧归文档所有，可以继续操作，但是createDocumentFragment创建的元素是一次性的，添加之后再就不能操作了

在之前domManip方法中提到的iNoClone多个节点操作需要克隆，就是因为文档碎片的特性引起的

大体了解了，我们看看jQuery对于节点操作的时候，加强版的文档碎片buildFragment

buildFragment

我们知道用文档碎片无非就是先创建

fragment = context.createDocumentFragment(),

然后把所有需要处理的dom节点给appendChild进去

buildFragment对于文档碎片的创建，可以看到被切分了2个部分

先看第一部分代码

收集节点元素

我们看一个参数，包含了字符串，$对象

var $e = $(‘<span>e</span>‘), $x = $(‘<span>x</span>‘);
    inner.after(‘&nbsp;‘, $e, ‘&nbsp;‘, $x)

对应的buildFragment就需要针对传入elems的分解可以有三部分，引入一个nodes缓存起来

jQuery对象

if ( jQuery.type( elem ) === "object" ) {
// Support: QtWebKit
// jQuery.merge because core_push.apply(_, arraylike) throws
jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem );

文本类型

nodes.push( context.createTextNode( elem ) )

字符串HTML

将HTML代码赋值给一个DIV元素的innerHTML属性，然后取DIV元素的子元素，即可得到转换后的DOM元素、

tmp = tmp || fragment.appendChild( context.createElement("div") );

// Deserialize a standard representation
tag = ( rtagName.exec( elem ) || ["", ""] )[ 1 ].toLowerCase();
wrap = wrapMap[ tag ] || wrapMap._default;
tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[ 2 ];

// Descend through wrappers to the right content
j = wrap[ 0 ];
while ( j-- ) {
    tmp = tmp.lastChild;
}

// Support: QtWebKit
// jQuery.merge because core_push.apply(_, arraylike) throws
jQuery.merge( nodes, tmp.childNodes );

// Remember the top-level container
tmp = fragment.firstChild;

// Fixes #12346
// Support: Webkit, IE
tmp.textContent = "";

创建了一个临时的tmp元素（div），这样调用innerHTML方法，用来储存创建的节点的内容，fragment本身只是起到一个容器的作用，这点我们要记住了

但是jQuery引入了一个wrapMap，一个反序列化表示

用来干嘛的？

我们知道看jQuery创建元素类型可以是任意的，可以所以可以是是a,scrpit,tr,th,option等等

inner.after(‘<tr><tr>‘);
inner.after(‘<div><div>‘);

但是在并不是所有元素的的创建都是标准的，在不同浏览器下还是有区别，比如表格

比如在table中插入一行一列

var table = document.getElementsByTagName(‘table‘)[0]; 
        var tr = document.createElement(‘tr‘); 
        var td = document.createElement(‘td‘); 
        var txt = document.createTextNode(‘haha‘); 
        td.appendChild(txt); 
        tr.appendChild(td); 
        table.appendChild(tr);

面代码在IE 6上是执行不成功的，大家可以试一下。在IE 8以上的浏览器都是好用的。

IE 6上失败的原因就是IE 6认为tr标签必须在tbody下面。也就是说，代码写成下面这样，就所有浏览器都OK了。

var table = document.getElementsByTagName(‘table‘)[0]; 
        var tbody = document.createElement(‘tbody‘); 
        var tr = document.createElement(‘tr‘); 
        var td = document.createElement(‘td‘); 
        var txt = document.createTextNode(‘haha‘); 
        td.appendChild(txt); 
        tr.appendChild(td); 
        tbody.appendChild(tr); 
        table.appendChild(tbody)

所以如果是jQuery插入一个tr标签，就需要在内部做这样的处理工作了

inner.after(‘<tr><tr>‘);

wrapMap就是用来做适配的

tmp.innerHTML = wrap[ 1 ] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[ 2 ];

拼写出来的规则就是

innerHTML: "<table><tbody><tr></tr><tr></tr></tbody></table>"

具体有多少类似的问题我们看看

因为wrapMap容器打破了原来的排列组合所以tr节点位置需要重新定位

就那面这个tr,lastChild变成了table, 所以需要根据wrap[ 0 ]找到嵌套的层数

j = wrap[ 0 ];
while ( j-- ) {
    tmp = tmp.lastChild;
}

因为fragment现在还不确定是最终的，因为node可能还有其他的节点，所以

fragment.textContent = "";

构建文档碎片

while ( (elem = nodes[ i++ ]) ) {
    // #4087 - If origin and destination elements are the same, and this is
    // that element, do not do anything
    if ( selection && jQuery.inArray( elem, selection ) !== -1 ) {
        continue;
    }
    contains = jQuery.contains( elem.ownerDocument, elem );
    // Append to fragment
    tmp = getAll( fragment.appendChild( elem ), "script" );
    // Preserve script evaluation history
    if ( contains ) {
        setGlobalEval( tmp );
    }
    // Capture executables
    if ( scripts ) {
        j = 0;
        while ( (elem = tmp[ j++ ]) ) {
            if ( rscriptType.test( elem.type || "" ) ) {
                scripts.push( elem );
            }
        }
    }
}

处理第一种情况，如果元素和目标元素是相同的

http://bugs.jquery.com/ticket/4087

遍历每一个元素放入到文档碎片中

fragment.appendChild( elem )

还有种情况就是写入的是scrpit标签了，用的很少先跳过

最终返回fragment