Question

我正在更改大约5000个HTML标记的内容，正如我在这里所做的那样，5000+ html渲染更改速度很慢，最好只重绘HTML一次，

因此我创建了一个函数，将整个HTML加载到JavaScript字符串中，然后遍历文本（查找标签标签），更改标签内容并最终重绘HTML一次。

怀着很高的希望，这也是一次失败，在1000次标签测试中大约需要30秒。

我的功能基本上反转计算屏幕上所有可见的标签DIV，并为它们添加编号，

这是代码，请问我做错了什么？（这里是一个孤立的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

来自here：

循环经常被发现是JavaScript中的瓶颈。要使循环最有效，请颠倒处理项的顺序，以便控制条件将迭代器与零进行比较。这比将值与非零数字进行比较要快得多，并且显着加快了数组处理速度。如果存在大量必需的迭代，您可能还需要考虑使用Duff的设备来加速执行。

所以改变：

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

到

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

另请注意以下段落中提到的链接：

使用HTMLCollection对象时要小心。每次在其中一个对象上访问属性时，都需要查询DOM以匹配节点。这是一项昂贵的操作，可以通过仅在必要时访问HTMLCollection属性并将常用值（例如length属性）存储在局部变量中来避免。

所以改变：

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

要：

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

加快这个Javascript字符串操作

1 个答案: