加快此Javasctipt字符串操作的速度

Question

I am changing the content of about 5000 HTML tags and as I read here doing 5000+ html rendering changes is slow and it is better just to redraw the HTML once,

Therefor I have created a function that loads the entire HTML into a JavaScript string and then goes through the text(looking for a label tag), changes the content of the tags and eventually redraws the HTML once.

With high hopes, this was also a failure and takes around 30 seconds on a 1000 tags test.

My function basically reverse counts all the visible label DIVs on the screen and adds numbering to them,

Here's the code, what am I doing wrong please? (here's an isolated jsfiddle: http://jsfiddle.net/tzvish/eLbTy/8/ )

// Goes through all visible entries on the page and updates their count value
function updateCountLabels()    {
        var entries        = document.getElementsByName('entryWell');
        var entriesId      = document.getElementsByName('entryId');
        var entriesHtml    = document.getElementById('resultContainer').innerHTML;
        var visibleEntries = new Array();
        var countEntries = 0 , pointer = 0;

        // Create a list of all visible arrays:
        for (i = 0; i < entries.length; i++)    {
            if ($(entries[i]).is(":visible")) {
                countEntries++;
                visibleEntries.push(entriesId[i].value);
            }
        }

        // Update html of all visible arrays with numbering:
        for (i = 0; i < visibleEntries.length; i++)            {
            currentId   = visibleEntries[i];

            // Get the position of insertion for that label element:
            elementHtml = '<div id="entryCount'+currentId+'" class="entryCountLabel label label-info">';

            pointer    = entriesHtml.indexOf(elementHtml) + elementHtml.length;
            pointerEnd = entriesHtml.indexOf("</div>",pointer);

            entriesHtml = entriesHtml.substring(0, pointer) + countEntries + entriesHtml.substring(pointerEnd);

            countEntries--;
        }

        // apply the new modified HTML:
        document.getElementById('resultContainer').innerHTML = entriesHtml;
}

Answer 1

From here :

Loops are frequently found to be bottlenecks in JavaScript. To make a loop the most efficient, reverse the order in which you process the items so that the control condition compares the iterator to zero. This is far faster than comparing a value to a nonzero number and significantly speeds up array processing. If there are a large number of required iterations, you may also want to consider using Duff's Device to speed up execution.

So change:

for (i = 0; i < entries.length; i++) 

To

for (i = entries.length - 1; i ==0 ; i--)

Also notice following paragraph from mentioned link:

Be careful when using HTMLCollection objects. Each time a property is accessed on one of these objects, it requires a query of the DOM for matching nodes. This is an expensive operation that can be avoided by accessing HTMLCollection properties only when necessary and storing frequently used values (such as the length property) in local variables.

So change:

for (i = entries.length - 1; i == 0; i--)

To:

var len = entries.length;
for (i = len - 1; i ==0 ; i--)