How to improve text insertion performance in HTML element?

Question

In Firefox, I embed text in ~ 500 DIVs using this code:

$(".divs").text("default"); // ~500 DIVs 

On my computer, it sequentially takes 9ms if the DIVs are empty. However, the same code sequentially takes 18 ms if the DIVs already contain text.

Why is it so that an empty DIV is 2 times faster when inserting text (does jQuery need to clear the DIV first)? And is there a way to improve the performance of replacing text in a DIV that already contains text?

Note. In IE 7, the speed differences were not so dramatic. Inserting text into an empty DIV was about 1.5 times faster.

Answer 1

If you want the fastest solution for all browsers to use textContent if it is supported and return to innerText / innerHTML otherwise [ Test ] (knowing gotchas ).

 /** * Replaces text for all elements in the given array. * @param {Array} elems * @param {String} text */ var replaceText = (function(){ var dummy = document.createElement("div"); dummy.innerHTML = "text"; var TEXT = (dummy.textContent === 'text') ? 'textContent' : 'innerText'; return function(elems, text) { for (var i = elems.length; i--;) { elems[i][TEXT] = text; } }; })(); 

Faster than jQuery text:

• 4x on IE 8
• 2.2x on Firefox 4b11
• 1.3x in Chrome

Answer 2

If the text you insert does NOT have to be escaped, you can try the following:

 $(".div").each(function(){ this.innerHTML = "default"; }); 

jQuery does some text processing when using the .text() method.

We need to know that this method preempts the string provided as necessary so that it is correct in HTML. To do this, it calls the DOM .createTextNode() method, which replaces special characters with their equivalent HTML entities (such as <for <).

Edit To avoid a penalty in the .each() method, you can try the following:

 var divs = $(".divs"), i = 0, len = divs.length; while(len--) { divs[len].innerHTML = "default"; } 

If this does not bring you any performance gains, then this is definitely a problem with the implementation of the browser. At the very least, this would eliminate jQuery performance issues / errors.

Answer 3

Yes, the reason for this method is to be slower when the elements have children, because the jQuery .text() method first runs the .empty() method and then .append(document.createTextNode(text))

From jQuery.text

 // ... return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) ); // ... 

The reason I indicate that the .empty() method calls the .cleanData() method, which removes any data and / or events associated with its child nodes, and then makes the standard .removeChild() method for its entire child node nodes to remove them, which is the main reason that divs that already contain text are slower to update.

The solution to your problem is to write your own, vanilla, javaScript functions to update the text of your divs, but make sure you don't attach any click events or data to them through jQuery, as you definitely have some memory leaks .

Answer 4

You can increase productivity by reusing existing node text.

A DIV element that contains only text is a DOM element that contains one child node, whose type is the text node. Text content is stored in this text node, and not inside its parent div element.

The main problem with methods like .text () in jQuery or .innerHTML () in the HTML DOM or even .innerText () and .textContent () is that they all create new node text (even if it already exists ) More specifically, all of the methods listed above begin by deleting all the child DOM nodes, including the existing text node (this is also done using the innerHTML, innerText, and textContent implementations). This leaves the context element (DIV, in your case) empty, without any children. Then they create a new node text type node, assigning it new text and adding it to the context element. innerHTML, in addition, tries to parse the input HTML string and build a DOM fragment from it.

The fastest way I know to replace existing node text is as follows:

 var divs = $(".divs").get(), len = divs.length; while(--len) { divs[len].firstChild.data = "default"; } 

This method does not create a new child element of the node, but simply replaces the text of the existing text node. Obviously, this method assumes node text already exists. To do this, your source document can be initialized with any non-empty text inside the DIV (and the exclusion of any other child elements).

Answer 5

If you don’t need to hide html tags (i.e. replace <a> with <a> ) then .html might be faster. Also yes, it should clear the div before replacing it with new content.