JavaScript - データの読み込みが高速ですか？

Question

私は1000行の異なるデータを持つJSONファイルを持っています。名前、価格、写真などがあります。そこから情報を取得した後、JavaScriptはそれをHTMLと<ul>クラスに入れます。すべて完了していればウェブサイトに表示されます。

すべては30秒から1分かかりますが、どのようにスピードアップできますか？ 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に挿入することです。

[OK]をので、あなたの編集に基づいて、私はこれにいくつかのことをやった：

1. が私のために私が作成した機能
2. より読みやすい配列にすべてのあなたの場合の句を外に移動します#inventoryコンテナへの単一の参照を作成し、その後に追加されるすべてのアイテムの大きなテキスト文字列を作成します。あなたのコードでヒットした実際のパフォーマンスは、＃inventoryの.htmlを参照してから、自分自身への参照を再び渡しています。ブラウザは、文書フローにあなたがDOMを変更するたびに再計算する必要があるため

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操作は、高価です。ループの繰り返しごとに新しいHTMLチャンクを段階的に追加していきます。これは多くのリフロー時間を意味します。 （あなたは毎回DOMから読んでいるのですが、幸いにもこれは比較的複雑なクエリではなく比較的安価なID参照によるものですが、スキップすることもできます）

代わりに、それ以降はDOM内の1つの操作で削除してください：