JavaScript-加载数据更快? [英] JavaScript - Loading data faster?

问题描述

我有一个JSON文件，其中包含1000行不同的数据.这里有名称，价格，图片等.目前，它从那里获取信息，然后JavaScript将其放入HTML和<ul>类中(如果已全部完成)则将其显示在网站上.

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 and into the <ul> class, if all done it shows it on website.

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

It all takes 30 seconds to 1 minute, but how could I speed it up? There's one website, what basically does same, but they don't use information in JSON, they got HTML code in JSON file. How could I speed it up? On their site, it does it within 1-5 seconds.

JavaScript

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

推荐答案

DOM操作非常昂贵，因为每次修改DOM时浏览器都必须重新计算文档流.您需要在循环的每次迭代中逐步添加新的HTML块，这意味着大量的重排时间. (您每次也都从DOM中读取内容；幸运的是，这是通过相对便宜的ID查找而不是更复杂的查询来完成的，但即使这样也可以跳过.)

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

相反，请在循环内建立一个字符串，然后在一个操作中将其放在DOM中:

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

这篇关于JavaScript-加载数据更快?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！