Javascript - Loading Data Faster?

I have a JSON file, which has 1000 lines of different data. There's name, price, picture etc. At the moment it gets information from there and then JavaScript puts that into HTML a

Solution 1:

Is the speed issue here with retrieving the JSON data or with looping that data into the DOM?

If it's the latter case then you may wish to consider how you're manipulating the DOM. A more efficient approach in this case would be to create a document fragment which is then inserted into the DOM when fully constructed.

Ok so based on your edit I've done a few things to this:

1. Moved out all your if clauses to an array which for me is more readable
2. The function I've created now makes a single reference to the #inventory container and then builds up a large text string for all of your items which is then appended. The real performance hit in your code is referencing the #inventory's .html and then passing a reference to itself again.

var items = [{
    id: 123,
    condition: 'good',
    iconurl: 'www.test.com',
    price: '$55',
    originalname: 'old test',
    name: 'new test'
}, {
    id: 456,
    condition: 'ruined',
    iconurl: 'www.test.com',
    price: '$15',
    originalname: 'old junk',
    name: 'junk made new'
}];

functionbuildDomStringForItems(item) {
    var message = 'BitSkins Price: $' + item.bprice + '',
        exclusionArray = ['Operation Phoenix Case Key', 'CS:GO Case Key', 'Winter Offensive Case Key'],
        newDomString = '', //holds the entire built up string
        inventoryContainer = $("#inventory");

    items.forEach(function (item, index, arr) {
        if (item.price != null) {
            if (item.bprice == '') {
                message = 'Item never sold on BitSkins!';
            }
            if (exclusionArray.indexOf(item.name) === -1) {
                newDomString += "<li class='col 2' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + "</li></div></div>";
            }
        }
    });

    //now you have a whole text string built up you can just append it all at once          
    inventoryContainer.append(newDomString);

}

//call new functionbuildDomStringForItems(items);

Solution 2:

DOM operations are expensive, because the browser has to recalculate the document flow every time you modify the DOM. You're incrementally adding new chunks of HTML on every iteration of the loop, which means a lot of reflow time. (You're also reading from the DOM every time; fortunately this is via a relatively inexpensive ID lookup instead of a more complex query, but even that can be skipped.)

Instead, build up a string inside the loop, and drop that in the DOM in one operation afterwards:

var newInventory = "";
items.forEach(function (item, index, arr) {
    // ...if (item.price != null) {
        if (/* whatever */) {
            newInventory += "<li class='col 2'> /* lots of data */</li>");
        }
    }
});

$("#inventory").html(newInventory);