slow executing js in ie and ff

slow executing js in ie and ff  using -'javascript,json,performance'

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) {
    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="' + + '"><h2>' + + '</h2></a></li>';
        ank += '<a class="pHeader" href="#' + + '">' + + '</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="' + + '">' + + '</a></li>';
            lists.innerHTML += strs;


asked Oct 23, 2015 by mcasudhir
0 votes

5 Answers

0 votes

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, 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 =;            // cache for use in multiple places
        results.push('[ Back to top ]

  • ' + pListName + '

  • '); anks.push('' + pListName + '  '); for (j = 0, jLen = videoItem.length; j < jLen; j++) { vList = videoItem[j]; results.push('
  • + + '">' + + '
  • '); } } lists.innerHTML += results.join(""); anchors.innerHTML += anks.join(""); }
    answered Oct 23, 2015 by abhimca2006
    0 votes

    You can try length cacheing - create a variable l = jItems.length, for example, and use that in the for loop's condition rather than getting the length property every time - depending on the implementation, there is usually an overhead with looking up an array's length, so if you have a big array this difference can be noticeable.

    Also, create temporary variables to keep your str and ank strings as they get bigger, then only put them in the innerHTML right at the end.

    answered Oct 23, 2015 by shegokar.anjeet
    0 votes

    Old trick and not so sure if it's relevant anymore but

    var builder = [];
    var str = builder.join('')

    used to be a lot faster in IE than

    var str = '';
    str += 'foo';
    str += 'bar';
    str += 'baz';
    answered Oct 23, 2015 by sachin wagh
    0 votes
    var strHTML = "";
    var ankHTML = "";
    for (var i=0; i < jItems.length; i++){
      strHTML += str;
      ankHTML += ank;
    lists.innerHTML = strHTML ;
    anchors.innerHTML = ankHTML ;
    answered Oct 23, 2015 by rajeshujade
    0 votes

    The primary performance bottleneck here is undoubtedly the way you are working with innerHTML.

    el.innerHTML += aString; is of course equivalent to el.innerHTML = el.innerHTML + aString;.

    This means that for each call the DOM will be serialized to a string of HTML, and then deserialized back into a valid DOM. This is a lot of unnecessary work.

    Instead, either:

    (a) Build all the HTML up front and assign innerHTML just once per element.

    (b) Append elements or document fragments to the parent node.

    answered Oct 23, 2015 by r3tt