Question

I have this function that runs over returned json data. It is really fast in chrome, but slow in IE and FF. Suggestions on how I might improve this? The data returned is about 15 objects. This creates a bunch of anchors at the top with lists under each heading.

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

Here’s a version of your code that combines the following performance enhancements:

1. Only add to innerHTML once at the end of the loop. You want to avoid doing that as often as you can because it causes an entire reparse of all the HTML in that item every time you add onto it. This minimizes the number of transactions with the DOM which can be the slowest part of the whole routine. This improved version cuts the number of DOM transactions a lot. If jItems.length was 20 and the average number of videos was 5, this would cut the number of DOM transactions to 1/50th the number of DOM transactions.
2. Accumulate string data into an array with .push() and do a .join() at the very end rather than adding onto the end of the string every time. The JS engine can often join lots of strings at once much more efficiently than joining each segment piecemeal.
3. When accumulating string data into arrays, there is no longer a need to initialize the temporaries on each loop or sub-loop.
4. Rather than get pList and then have four references to pList.name, just get the name value once and use it directly.
5. Cache jItems[i] in the loop because it’s referenced several places rather than recalculating it every time.
6. Calculate the len variable for each for loop just once and compare to that rather than recalculating it on every iteration.
7. Cache jItems[i]["videos"] once in the outer loop rather than redoing it every time in the inner loop.
8. If there are a large number of items in jsonData.items, then the sort algorithm isn’t very efficient since it has to recalculate a lowercase version of each name for every comparison. You could prebuild all the lowercase versions in one pass (once per item) and then just use them in the sort algorithm rather than have to redo them every time two items are compared.

These changes result in this code:

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("");
}