JavaScript - Chargement des données plus rapidement?

Question

J'ai un fichier JSON, qui a 1000 lignes de données différentes. Il y a le nom, le prix, l'image, etc. Pour le moment, il obtient des informations à partir de là, puis JavaScript met cela en HTML et dans la classe <ul>, si tout est fait, il le montre sur le site Web.

Tout prend de 30 secondes à 1 minute, mais comment puis-je l'accélérer? Il y a un site web, ce qui fait essentiellement la même chose, mais ils n'utilisent pas d'informations dans JSON, ils ont du code HTML dans un fichier JSON. Comment pourrais-je l'accélérer? Sur leur site, il le fait dans les 1-5 secondes.

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

Est-ce le problème de la vitesse ici avec la récupération des données JSON ou avec boucle que les données dans les DOM?

Si c'est le dernier cas, vous voudrez peut-être envisager comment vous manipulez le DOM. Une approche plus efficace dans ce cas serait de créer un document fragment qui est ensuite inséré dans le DOM lorsqu'il est entièrement construit.

Ok, donc en fonction de votre édition que je l'ai fait quelques petites choses à ceci:

1. QUITTE toutes vos clauses si à un tableau qui pour moi est plus lisible
2. La fonction que j'ai créé fait maintenant une référence unique au conteneur #inventory, puis crée une grande chaîne de texte pour tous vos éléments, qui est ensuite ajoutée. La véritable performance de votre code est de référencer le .html de l'inventaire #, puis de lui transmettre à nouveau une référence.

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

opérations DOM sont chers, parce que le navigateur doit recalculer le flux de documents à chaque fois que vous modifiez les DOM. Vous ajoutez progressivement de nouveaux blocs de HTML à chaque itération de la boucle, ce qui signifie beaucoup de temps de refusion. (Vous lisez également à partir du DOM à chaque fois, heureusement via une recherche d'ID relativement peu coûteuse au lieu d'une requête plus complexe, mais cela peut même être ignoré.)

Au lieu de cela, créez une chaîne à l'intérieur de la boucle, et déposez-le dans le DOM en une opération après:

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