Question

我有一个JSON文件，它有1000行不同的数据。它的名称，价格，图片等等。目前它从那里获取信息然后JavaScript将其放入HTML并进入<ul>类，如果所有这些都在网站上显示它。

这一切都需要30秒到1分钟，但我怎么能加快速度呢？有一个网站，基本上相同，但他们不使用JSON中的信息，他们在JSON文件中获得HTML代码。我怎么能加快速度呢？在他们的网站上，它会在1-5秒内完成。

的Javascript

items.forEach(function (item, index, arr) {
                console.log(item.price);
                var message = 'BitSkins Price: $' + item.bprice + '';
                if (item.price != null) {
                    if (item.bprice == '') {
                        message = 'Item never sold on BitSkins!';
                    }
                    if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
                        $("#inventory").html($("#inventory").html() + "<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'>$" + numberWithCommas(item.price) + "</li></div></div>");
                    }
                }
            });

Answer 1

这里的速度问题是检索JSON数据还是将数据循环到DOM？

如果是后一种情况，那么您可能希望考虑如何操作DOM。在这种情况下，更有效的方法是创建一个document fragment，然后在完全构造时插入到DOM中。

好的，基于你的编辑，我已经做了一些事情：

将所有if子句移出一个对我来说更具可读性的数组
我现在创建的函数对#inventory容器进行单个引用，然后为所有项目构建一个大文本字符串，然后附加。您的代码中真正的性能影响是引用＃inventory＆＃39; .html，然后再次将引用传递给自己。

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'
}];

function buildDomStringForItems(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 function
buildDomStringForItems(items);

Answer 2

DOM操作很昂贵，因为每次修改DOM时浏览器都必须重新计算文档流。您将在循环的每次迭代中逐步添加新的HTML块，这意味着需要大量的回流时间。（你也是每次都从DOM读取;幸运的是，这是通过相对便宜的ID查找而不是更复杂的查询，但即使这样也可以跳过。）

相反，在循环中构建一个字符串，然后在一次操作中将其放在DOM中：

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);

JavaScript - 加载数据更快？

2 个答案: