在IE和FF中执行js的速度很慢

Question

我有运行返回的json数据的此功能。在chrome中速度确实很高，但是在IE和FF中却很慢。有关如何改善此问题的建议？返回的数据约为15个对象。这将在顶部创建一堆锚点，并在每个标题下列出。

function list_response(jsonData) {
    "use strict";
    var lists = document.getElementById("lists"), anchors = document.getElementById("anchors"), jItems = jsonData.items;
    jItems.sort(function (a, b) {
            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
            });
    for (var i = 0; i < jItems.length; i++) {
        var pList = jItems[i], str = "", ank = "";
        str += '<span class="backtotop">[ <a href="#">Back to top</a> ]</span><br /><br /><br /><li class="title nodot"><a class="pHeader" name="' + pList.name + '"><h2>' + pList.name + '</h2></a></li>';
        ank += '<a class="pHeader" href="#' + pList.name + '">' + pList.name + '</a>&nbsp; ';
        lists.innerHTML += str;
        anchors.innerHTML += ank;

        for (var j = 0; j < jsonData.items[i]["videos"].length; j++) {
            var vList = jsonData.items[i]["videos"][j];
            var strs = "";
            strs += '<li class="nodot"><a href="https://www.site.org/videos/Video_Player.page?bctid=' + vList.id + '">' + vList.name + '</a></li>';
            lists.innerHTML += strs;
        }
    }
}

Answer 1

这是结合以下性能增强功能的代码版本：

1. 在循环结束时仅将一次添加到innerHTML中。您希望尽可能避免这样做，因为每次添加到该项目时，它都会导致该项目中所有HTML的完整重新解析。这样可以最大程度地减少与DOM的事务数量，而DOM可能是整个例程中最慢的部分。这个改进的版本大大减少了DOM事务的数量。如果jItems.length是，20并且视频的平均数量为5，则这会将DOM事务数减少到DOM事务数的1/50。
2. 将字符串数据累积到一个数组中，.push()并.join()在最后执行a ，而不是每次都添加到字符串的末尾。JS引擎通常可以一次连接多个字符串，而不是逐段连接。
3. 将字符串数据累积到数组中时，不再需要在每个循环或子循环上初始化临时变量。
4. 与其获取pList然后具有四个引用pList.name，不如获取一次名称值并直接使用它。
5. jItems[i]在循环中进行缓存是因为它引用了多个位置，而不是每次都重新计算它。
6. for只需为每个循环计算len变量一次，然后与之比较，而不是在每次迭代时都重新计算它。
7. jItems[i]["videos"]在外部循环中缓存一次，而不是在内部循环中每次都重做一次。
8. 如果中的项目很多jsonData.items，则排序算法效率不高，因为它必须为每个比较重新计算每个名称的小写形式。您可以一次性构建所有小写版本（每个项目一次），然后仅在排序算法中使用它们，而不必在每次比较两个项目时都重做它们。

这些更改产生以下代码：

function list_response(jsonData) {
    "use strict";
    var lists = document.getElementById("lists"), anchors = document.getElementById("anchors"), jItems = jsonData.items;
    var results = [], anks = [], vList, pListName, item, videoItem;
    // precache all lower case versions to make sorting faster
    var i, iLen = jItems.length, j, jLen;
    for (var i = 0; i < iLen; i++) {
        jItems[i].nameLower = jItems[i].name.toLowerCase();
    }
    jItems.sort(function (a, b) {
        return a.nameLower.localeCompare(b.nameLower);
    });
    for (i = 0; i < iLen; i++) {
        item = jItems[i];                   // cache for use in loops
        videoItem = item["videos"];      // cache for use in loops
        pListName = item.name;            // cache for use in multiple places
        results.push('<span class="backtotop">[ <a href="#">Back to top</a> ]</span><br /><br /><br /><li class="title nodot"><a class="pHeader" name="' + pListName + '"><h2>' + pListName + '</h2></a></li>');
        anks.push('<a class="pHeader" href="#' + pListName + '">' + pListName + '</a>&nbsp; ');

        for (j = 0, jLen = videoItem.length; j < jLen; j++) {
            vList = videoItem[j];
            results.push('<li class="nodot"><a href="https://www.site.org/videos/Video_Player.page?bctid=' + vList.id + '">' + vList.name + '</a></li>');
        }
    }
    lists.innerHTML += results.join("");
    anchors.innerHTML += anks.join("");
}