Detailed description of fragment. js usage in Vue, vuefragment. js

Detailed description of fragment. js usage in Vue, vuefragment. js

Most of the content is derived from jQuery. Of course, you can also refer to component/domify. If you are interested in reading the original code, you can find wrapMap in jQuery. As for domify, go directly to github for a search. There are very few projects and you can view the index directly. just do Javascript.

CreateDocumentFragment

What if you want to insert multiple elements at a time on a node, for example, insert 10000 nodes at a time?

The simplest and most crude method is:

var parent = document.getElementById('parent');for(var i = 0; i < 10000; i++) { var child = document.createElement('div'); var text = document.createTextNode('' + i); child.appendChild(text); parent.appendChild(child);}

But as we all know, repeated operations on the DOM will lead to page re-painting and backflow, with low efficiency and the page may be stuck. This code is basically useless.

If we perform DOM operations in segments, we can avoid page freezing. The js ninja secret mentioned that we can use setTimeout for improvement:

var i = 0, max = 10000;setTimeout(function addNodes() { for(var step = i + 500; i < step; i++) {  var child = document.createElement('div');  child.appendChild(document.createTextNode('' + i));  div.appendChild(child); } if(i < max) {  setTimeout(addNodes, 0); }}, 0);

Of course, the more common way to think of it is to operate nodes directly in the memory. All nodes are merged and then interact with the DOM tree. All nodes are stringed on a div, then, the div is mounted to the DOM tree:

var parent = document.getElementById('parent');var div = document.createElement('div');for(var i = 0; i < 10000; i++) { var child = document.createElement('div'); var text = document.createTextNode('' + i); child.appendChild(text); div.appendChild(child);}parent.appendChild(div);

As shown above, it only interacts with the DOM tree once, and the performance must be greatly improved. However, an additional div is inserted. If it is not used to interact with a node such as div, for example, insert th, td?

At this time, createDocumentFragment should be out of the box.MDN description:

DocumentFragments is a DOM node. They are not part of the DOM tree. A common scenario is to create a document fragment, insert the created DOM element into the document fragment, and insert the document fragment into the DOM tree. In the DOM tree, the document fragment is replaced with all its child elements.

Because the File Fragment exists in memory and is not in the DOM tree, inserting the child element into the File Fragment will not cause page reflux (calculation of the element position and ry ). Therefore, the use of document fragments usually plays a role in optimizing performance.

Simply put, it is the example above that does not require the div intermediate version. when inserting, it is perfect to replace itself with its child element directly.

Although it is said that "None of the good uses are universal" (especially for browsers of a company), this useful thing is even supported by ie6.

The specific code is like this:

var parent = document.getElementById('parent');var frag = document.createDocumentFragment();for(var i = 0; i < 10000; i++) { var child = document.createElement('div'); var text = document.createTextNode('' + i); child.appendChild(text); frag.appendChild(child);}parent.appendChild(frag);

If you are interested in performance tests, you can run all the code.

InnerHTML

To convert a long string to a corresponding DOM node, the first thing that comes to mind is innerHTML. The general process is to create a div node first, and then div. innerHTML = str. Take out the children of the div and place it in the place where it should be placed, and the div itself is thrown away.

What if I want to generate a th node separately?

Try the above process:

var div = document.createElement('div');div.innerHTML = '<th>xxx</th>';console.log(div);

The actual output is (in chrome ):

<div>xxx</div>

You don't get the desired one:

<div><th>xxx</th></div>

This result is understandable. After all, if a th is placed in the div, it is not correct. Directly remove the peripheral tag and the content is thrown into the div.

But it cannot be shelved. Sometimes it is to get a th node.

In fact, it's easy to write:

Var node = document. createElement ('div '); node. innerHTML = '<table> <tbody> <tr> <th> xxx </th> </tr> </tbody> </table> '; // The layer of skin that is removed from the outside is the desired th var depth = 3; while (depth --) {node = node. lastChild;} console. log (node. firstChild );

We can see that the result is exactly what you want.

Fragment. js

// Special node var map = {legend: [1, '<fieldset>', '</fieldset>'], tr: [2, '<table> <tbody>', '</tbody> </table>'], col: [2, '<table> <tbody> </tbody> <colgroup>', '</colgroup> </table>'], _ default: [0 ,'', '']}; map. td = map. th = [3, '<table> <tbody> <tr>', '</tr> </tbody> </table>']; map. option = map. optgroup = [1, '<select multiple = "multiple">', '</select>']; map. thead = map. tbody = map. colgroup = map. Caption = map. tfoot = [1, '<table>', '</table>'] map. text = map. circle = map. ellipse = map. line = map. path = map. polygon = map. polyline = map. rect = [1, '<svg xmlns = "http://www.w3.org/2000/svg" version = "1.1">', '</svg>']; var TAG_RE =/<([\ w:] +)/; module. exports = function (templateString) {var frag = document. createDocumentFragment (), m = TAG_RE.exec (templateString); // if (! M) {frag. appendChild (document. createTextNode (templateString); return frag;} var tag = m [1], wrap = map [tag] | map. _ default, depth = wrap [0], prefix = wrap [1], suffix = wrap [2], node = document. createElement ('div '); // concatenate the node string node. innerHTML = prefix + templateString. trim () + suffix; // remove except the package layer. Only the while (depth --) node of String Conversion is left. lastChild; // if (node. firstChild = node. lastChild) {frag. appendChild (node. firstChild); return frag;} // multiple nodes are added to frag var child in sequence; while (child = node. firstChild) {frag. appendChild (child);} return frag ;}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.