Geek asks and answers

Slow js execution in IE and FF

I have this function that runs the returned json data. It is very fast in chrome, but slower in IE and FF. Suggestions on how I can improve this? The returned data is about 15 objects. This creates a bunch of bindings 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;
        }
    }
}
0
source share
6 answers

Here is a version of your code that combines the following performance improvements:

  • innerHTML . , , , , HTML . DOM, . DOM. jItems.length 20, 5, DOM 1/50- DOM.
  • .push() .join() , . JS , .
  • .
  • , pList pList.name, .
  • jItems[i] , , .
  • len for , .
  • jItems[i]["videos"] , .
  • 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("");
}
+4

- , l = jItems.length for, length - , , , , .

, str ank , innerHTML .

+2

innerHTML HTML. DOM.

+1

, ,

var builder = [];
builder.push('foo');
builder.push('bar');
builder.push('baz');
var str = builder.join('')

IE ,

var str = '';
str += 'foo';
str += 'bar';
str += 'baz';
+1
var strHTML = "";
var ankHTML = "";

for (var i=0; i < jItems.length; i++){
  ...    
  strHTML += str;
  ankHTML += ank;
  ...
}
lists.innerHTML = strHTML ;
anchors.innerHTML = ankHTML ;
0

The main performance bottleneck here is undoubtedly the way you work with innerHTML.

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

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

Instead of this:

(a) Create all the HTML up and assign innerHTML only once for each element.

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

0
source

More articles:


All Articles