从数组检索信息并以html显示的最快方法

Question

我正在用html5移动版创建一个应用程序，并且在具有887个条目的数组中拥有所有项的信息。 每个条目都有32个带值的键，有些具有多个值。

我正在使用for循环来迭代数组，当我找到与html元素匹配的条目时，它将使用html块显示项目信息。

我发现缓存数组长度以在for循环中使用效率更高。 所以不要这样做：

for (var i = 0; i < array.length; i++){//code};

我这样做的速度更快：

var array_len = array.length;
for (var i = 0; i < array_len; i++){//code};

我测试的另一个想法是为数组创建索引以避免循环，如下所示：

var index = {
  "strawberry": 0,
  "pear": 1,
  "orange": 2,
  "watermelon": 3,
  "fruit_salad": 4,
  "water": 5,
  "orange_juice": 6,
  "pear_juice": 7,
  "strawberry_juice": 8,
  "watermelon_juice": 9,
  "potato": 10,
  "french_fries": 11
}

然后使用如下函数调用商品信息：

var singleItem = $('.item');
singleItem.each(function() {
  var item = $(this).attr('class').split(' ')[1];
  var n = index[item];
  var a_items = array[n];
$(this).html(CODE DO DISPLAY THE ITEM INFORMATION HERE)
}

因此，当我使用这样的代码： <div class="item watermelon"></div>它应该检索项目信息，而无需遍历数组。

下面是我编写的代表情况的示例代码，其中包含一小部分项目。 在实际应用中，保存商品信息的主数组长为887个商品。 我在另一个for循环内执行一些for循环，以检索信息（例如stats和example中used in信息）。

因此，这是一个for循环内的for循环。

问题是，有一种更有效的方法吗？ 因为有些页面显示一种类别的项目，大约需要100项项目才能加载5、6秒，所以我需要使其更快。

编辑：用两个代码显示性能时间的Codepen代码：

https://codepen.io/anon/pen/YBVjKV

 // icons: https://www.flaticon.com/search/2?word=food&style_id=28 var array = [ { "name": "strawberry", "price": "2.00", "type": "fruit", "stats": [ {"type":"hunger","val":"4"}, {"type":"thirst","val":"2"}, {"type":"bladder","val":"-2"} ], "used_in":["strawberry_juice","fruit_salad"], "icon": "https://image.flaticon.com/icons/png/128/135/135717.png" }, { "name": "pear", "price": "1.50", "type": "fruit", "stats": [ {"type":"hunger","val":"6"}, {"type":"thirst","val":"4"}, {"type":"bladder","val":"-2"} ], "used_in":["pear_juice","fruit_salad"], "icon": "https://image.flaticon.com/icons/png/128/167/167260.png" }, { "name": "orange", "price": "0.80", "type": "fruit", "stats": [ {"type":"hunger","val":"6"}, {"type":"thirst","val":"5"}, {"type":"bladder","val":"-3"} ], "used_in":["orange_juice","fruit_salad"], "icon": "https://image.flaticon.com/icons/png/128/415/415734.png" }, { "name": "watermelon", "price": "5.50", "type": "fruit", "stats": [ {"type":"hunger","val":"4"}, {"type":"thirst","val":"8"}, {"type":"bladder","val":"-6"} ], "used_in":["watermelon_juice","fruit_salad"], "icon": "https://image.flaticon.com/icons/png/128/415/415731.png" }, { "name": "fruit_salad", "price": "6.50", "type": "fruit", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"3"}, {"type":"bladder","val":"-2"} ], "ingredients": ["strawberry","pear","orange","watermelon"], "icon": "https://image.flaticon.com/icons/png/128/415/415744.png" }, { "name": "water", "price": "1.50", "type": "drink", "stats": [ {"type":"thirst","val":"8"}, {"type":"bladder","val":"-3"} ], "used_in":["orange_juice","pear_juice","strawberry_juice","watermelon_juice"], "icon": "https://image.flaticon.com/icons/png/128/135/135662.png" }, { "name": "orange_juice", "price": "6.50", "type": "drink", "stats": [ {"type":"thirst","val":"6"}, {"type":"bladder","val":"-2"} ], "ingredients":["orange","water"], "icon": "https://image.flaticon.com/icons/png/128/167/167612.png" }, { "name": "pear_juice", "price": "6.50", "type": "drink", "stats": [ {"type":"thirst","val":"6"}, {"type":"bladder","val":"-2"} ], "ingredients":["pear","water"], "icon": "https://image.flaticon.com/icons/png/128/167/167623.png" }, { "name": "strawberry_juice", "price": "6.50", "type": "drink", "stats": [ {"type":"thirst","val":"4"}, {"type":"bladder","val":"-2"} ], "ingredients":["strawberry","water"], "icon": "https://image.flaticon.com/icons/png/128/167/167254.png" }, { "name": "watermelon_juice", "price": "6.50", "type": "drink", "stats": [ {"type":"thirst","val":"6"}, {"type":"bladder","val":"-3"} ], "ingredients":["watermelon","water"], "icon": "https://image.flaticon.com/icons/png/128/167/167620.png" }, { "name": "potato", "price": "1.00", "type": "food", "stats": [ {"type":"hunger","val":"4"}, {"type":"bladder","val":"-2"} ], "used_in":["french_fries"], "icon": "https://image.flaticon.com/icons/png/128/135/135676.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" } ] var array_len = array.length; function gen(){ var allitems = ""; for (var i = 0; i < array_len; i++){ var item = array[i]; var name = item.name; var price = item.price; var type = item.type; var icon = item.icon; allitems += '<div class="item '+name+'"></div>'; } $('.total').html(array_len); $('.allitems').html(allitems); } function gen2(){ for (var j = 0; j < array_len; j++){ var item = array[j]; var name = item.name; var formatted_name = name.replace(/_/g,' '); var price = item.price; var type = item.type; var icon = item.icon; var ing = item.ingredients; var used_in = item.used_in; var stats = item.stats; var stats_info = ""; var ingredients = ""; var used = ""; var stat_item = ""; if(stats != undefined){ for(var s in stats){ var stat = stats[s]; var type = stat.type; var val = stat.val stat_item += '<div class="stat">'+ '<i class="'+type+'"></i>'+ '<span class="stat_val">'+val+'</span>'+ '</div>' } stats_info = '<div class="stats_info">'+ stat_item+ '</div>'; } for(var i in ing){ var ing_item = ing[i]; var format_ing = ing_item.replace(/_/g,' '); ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } for(var k in used_in){ var ing_item = used_in[k]; var format_ing = ing_item.replace(/_/g,' '); used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } var ing_block = ""; if(ing != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="ingredient_txt">Uses:</div>'+ ingredients+ '</div>'; } if(used_in != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="usedngredient_txt">Used in:</div>'+ used+ '</div>'; } $('.item.'+name).html ('<div class="items">'+ '<div class="itemblock">'+ '<i class="'+name+'"></i>'+ '<span class="name">'+formatted_name+'</span>'+ '<span class="price">$ '+price+'</span>'+ '<span class="type">'+type+'</span>'+ '</div>'+ stats_info+ ing_block+ '</div>') } } gen() gen2() 

 .strawberry{background-image:url(https://image.flaticon.com/icons/png/128/135/135717.png);} .pear{background-image:url(https://image.flaticon.com/icons/png/128/167/167260.png);} .orange{background-image:url(https://image.flaticon.com/icons/png/128/415/415734.png);} .watermelon{background-image:url(https://image.flaticon.com/icons/png/128/415/415731.png);} .fruit_salad{background-image:url(https://image.flaticon.com/icons/png/128/415/415744.png);} .water{background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);} .orange_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167612.png);} .pear_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167623.png);} .strawberry_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167254.png);} .watermelon_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167620.png);} .potato{background-image:url(https://image.flaticon.com/icons/png/128/135/135676.png);} .french_fries{background-image:url(https://image.flaticon.com/icons/png/128/135/135589.png);} .hunger {background-image:url(https://image.flaticon.com/icons/png/128/608/608857.png);} .thirst {background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);} .bladder {background-image:url(https://image.flaticon.com/icons/png/128/1402/1402847.png);} body { background-color: #a3d5d3; font-family: arial; } .totalitems { display: block; background: #131313; color: #fff; margin-bottom: 2px; text-align: center; } .totalitems .total_txt { margin: 5px; display: inline-block; } .allitems { display: block; } .item { display: inline-block; margin-right: 2px; box-sizing: border-box; background-image: none; vertical-align: top; width: 320px; } .items { border: 1px solid #000; margin-bottom: 2px; background-color: #000; padding: 1px; } .itemblock { display: flex; background-color: #333; padding: 5px; margin-bottom: 2px; min-height: 40px; } .itemblock .items { display: block; background-color: #333; padding: 5px; margin-bottom: 2px; } .itemblock i{ width: 28px; height: 28px; background-size: contain; background-repeat: no-repeat; align-items: center; flex-shrink: 0; margin: 2px; } .itemblock .name { display: flex; align-items: center; margin: 0 5px 0 5px; text-transform: capitalize; color: #fff; width: 100px; flex-shrink: 0; } .itemblock .price { display: flex; align-items: center; margin: 0 2px; color: #ffc107; width: 50px; flex-shrink: 0; } .itemblock .type { display: flex; align-items: center; justify-content: flex-end; margin: 0 15px; color: #9E9E9E; text-transform: capitalize; flex-shrink: 0; } .stats_info { display: flex; background-color: #333; padding: 8px; justify-content: center; border-bottom: 2px solid #000; } .stats_info .stat { display: flex; align-items: center; justify-content: center; width: 50px; } .stats_info .stat i { display: flex; width: 18px; height: 18px; flex-shrink: 0; margin: 0; background-size: contain; background-repeat: no-repeat; } .stats_info .stat .stat_val { display: flex; flex-shrink: 0; color: #fff; font-size: 12px; margin: 0 5px; text-transform: capitalize; justify-content: center; } .ingredients_block { display: block; background-color: #333; padding: 5px; text-align: center; min-height: 82px; } .ingredients_block .usedngredient_txt, .ingredients_block .ingredient_txt{ display: block; margin-bottom: 10px; color: #fff; font-size: 12px; text-align: left; } .ingredients_block .ingredient { display: inline-block; align-items: center; width: 75px; } .ingredients_block .ingredient i { display: flex; width: 24px; height: 24px; flex-shrink: 0; margin: 0 auto; background-size: contain; background-repeat: no-repeat; } .ingredients_block .ingredient .ing_txt { display: flex; flex-shrink: 0; color: #fff; font-size: 12px; margin-top: 5px; text-transform: capitalize; justify-content: center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="totalitems"> <span class="total_txt">Total items:</span> <span class="total"></span> </div> <div class="allitems"></div> <!-- SEE THIS CODE IN FULL PAGE FOR BETTER VISUALIZATION --> 

Answer 1

这之间的比较filter , map or find ， for ， $.each和reduce 。 在代码中，更改map to filter or find差异。 要find代码， 请参见https://jsfiddle.net/ibrth/3awoj1b9/3/

 var index = { "strawberry": 0, "pear": 1, "orange": 2, "watermelon": 3, "fruit_salad": 4, "water": 5, "orange_juice": 6, "pear_juice": 7, "strawberry_juice": 8, "watermelon_juice": 9, "potato": 10, "french_fries": 11 } var array = [ { "name": "strawberry", "price": "2.00", "type": "fruit", "stats": [ {"type":"hunger","val":"4"}, {"type":"thirst","val":"2"}, {"type":"bladder","val":"-2"} ], "used_in":["strawberry_juice","fruit_salad"], "icon": "https://image.flaticon.com/icons/png/128/135/135717.png" }, { "name": "pear", "price": "1.50", "type": "fruit", "stats": [ {"type":"hunger","val":"6"}, {"type":"thirst","val":"4"}, {"type":"bladder","val":"-2"} ], "used_in":["pear_juice","fruit_salad"], "icon": "https://image.flaticon.com/icons/png/128/167/167260.png" }, { "name": "orange", "price": "0.80", "type": "fruit", "stats": [ {"type":"hunger","val":"6"}, {"type":"thirst","val":"5"}, {"type":"bladder","val":"-3"} ], "used_in":["orange_juice","fruit_salad"], "icon": "https://image.flaticon.com/icons/png/128/415/415734.png" }, { "name": "watermelon", "price": "5.50", "type": "fruit", "stats": [ {"type":"hunger","val":"4"}, {"type":"thirst","val":"8"}, {"type":"bladder","val":"-6"} ], "used_in":["watermelon_juice","fruit_salad"], "icon": "https://image.flaticon.com/icons/png/128/415/415731.png" }, { "name": "fruit_salad", "price": "6.50", "type": "fruit", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"3"}, {"type":"bladder","val":"-2"} ], "ingredients": ["strawberry","pear","orange","watermelon"], "icon": "https://image.flaticon.com/icons/png/128/415/415744.png" }, { "name": "water", "price": "1.50", "type": "drink", "stats": [ {"type":"thirst","val":"8"}, {"type":"bladder","val":"-3"} ], "used_in":["orange_juice","pear_juice","strawberry_juice","watermelon_juice"], "icon": "https://image.flaticon.com/icons/png/128/135/135662.png" }, { "name": "orange_juice", "price": "6.50", "type": "drink", "stats": [ {"type":"thirst","val":"6"}, {"type":"bladder","val":"-2"} ], "ingredients":["orange","water"], "icon": "https://image.flaticon.com/icons/png/128/167/167612.png" }, { "name": "pear_juice", "price": "6.50", "type": "drink", "stats": [ {"type":"thirst","val":"6"}, {"type":"bladder","val":"-2"} ], "ingredients":["pear","water"], "icon": "https://image.flaticon.com/icons/png/128/167/167623.png" }, { "name": "strawberry_juice", "price": "6.50", "type": "drink", "stats": [ {"type":"thirst","val":"4"}, {"type":"bladder","val":"-2"} ], "ingredients":["strawberry","water"], "icon": "https://image.flaticon.com/icons/png/128/167/167254.png" }, { "name": "watermelon_juice", "price": "6.50", "type": "drink", "stats": [ {"type":"thirst","val":"6"}, {"type":"bladder","val":"-3"} ], "ingredients":["watermelon","water"], "icon": "https://image.flaticon.com/icons/png/128/167/167620.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" }, { "name": "french_fries", "price": "3.50", "type": "food", "stats": [ {"type":"hunger","val":"10"}, {"type":"thirst","val":"-4"}, {"type":"bladder","val":"-2"} ], "ingredients": ["potato"], "icon": "https://image.flaticon.com/icons/png/128/135/135589.png" } ] var array_len = array.length; // Function used to create the index of the items //createindex(); function gen(){ var allitems = ""; array.reduce((i, item) =>{ var name = item.name; var price = item.price; var type = item.type; var icon = item.icon; allitems += '<div class="item '+name+'"></div>' }); $('.total').html(array_len); $('.allitems').html(allitems); } var currentDates = array.filter(function(obj) { return obj; }); function gen2(){ array.reduce((j, item) =>{ var name = item.name; var formatted_name = name.replace(/_/g,' '); var price = item.price; var type = item.type; var icon = item.icon; var ing = item.ingredients; var used_in = item.used_in; var stats = item.stats; var stats_info = ""; var ingredients = ""; var used = ""; var stat_item = ""; if(stats != undefined){ for(var s in stats){ var stat = stats[s]; var type = stat.type; var val = stat.val stat_item += '<div class="stat">'+ '<i class="'+type+'"></i>'+ '<span class="stat_val">'+val+'</span>'+ '</div>' } stats_info = '<div class="stats_info">'+ stat_item+ '</div>'; } for(var i in ing){ var ing_item = ing[i]; var format_ing = ing_item.replace(/_/g,' '); ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } for(var k in used_in){ var ing_item = used_in[k]; var format_ing = ing_item.replace(/_/g,' '); used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } var ing_block = ""; if(ing != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="ingredient_txt">Uses:</div>'+ ingredients+ '</div>'; } if(used_in != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="usedngredient_txt">Used in:</div>'+ used+ '</div>'; } $('.allitems .item.'+name).html ('<div class="items">'+ '<div class="itemblock">'+ '<i class="'+name+'"></i>'+ '<span class="name">'+formatted_name+'</span>'+ '<span class="price">$ '+price+'</span>'+ '<span class="type">'+type+'</span>'+ '</div>'+ stats_info+ ing_block+ '</div>') }); } function gen3(){ var allitems = ""; array.reduce((i, item) =>{ var name = item.name; var price = item.price; var type = item.type; var icon = item.icon; allitems += '<div class="item '+name+'"></div>' }); $('.total').html(array_len); $('.allitems').html(allitems); } function gen4(){ array.reduce((j, item) =>{ var name = item.name; var formatted_name = name.replace(/_/g,' '); var price = item.price; var type = item.type; var icon = item.icon; var ing = item.ingredients; var used_in = item.used_in; var stats = item.stats; var stats_info = ""; var ingredients = ""; var used = ""; var stat_item = ""; if(stats != undefined){ for(var s in stats){ var stat = stats[s]; var type = stat.type; var val = stat.val stat_item += '<div class="stat">'+ '<i class="'+type+'"></i>'+ '<span class="stat_val">'+val+'</span>'+ '</div>' } stats_info = '<div class="stats_info">'+ stat_item+ '</div>'; } for(var i in ing){ var ing_item = ing[i]; var format_ing = ing_item.replace(/_/g,' '); ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } for(var k in used_in){ var ing_item = used_in[k]; var format_ing = ing_item.replace(/_/g,' '); used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } var ing_block = ""; if(ing != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="ingredient_txt">Uses:</div>'+ ingredients+ '</div>'; } if(used_in != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="usedngredient_txt">Used in:</div>'+ used+ '</div>'; } $('.allitems .item.'+name).html ('<div class="items">'+ '<div class="itemblock">'+ '<i class="'+name+'"></i>'+ '<span class="name">'+formatted_name+'</span>'+ '<span class="price">$ '+price+'</span>'+ '<span class="type">'+type+'</span>'+ '</div>'+ stats_info+ ing_block+ '</div>') }); } function gen6(){ var allitems = ""; array.map(( item) =>{ var name = item.name; var price = item.price; var type = item.type; var icon = item.icon; allitems += '<div class="item '+name+'"></div>' }); $('.total').html(array_len); $('.allitems').html(allitems); } var currentDates = array.filter(function(obj) { return obj; }); function gen7(){ array.map(( item) =>{ var name = item.name; var formatted_name = name.replace(/_/g,' '); var price = item.price; var type = item.type; var icon = item.icon; var ing = item.ingredients; var used_in = item.used_in; var stats = item.stats; var stats_info = ""; var ingredients = ""; var used = ""; var stat_item = ""; if(stats != undefined){ for(var s in stats){ var stat = stats[s]; var type = stat.type; var val = stat.val stat_item += '<div class="stat">'+ '<i class="'+type+'"></i>'+ '<span class="stat_val">'+val+'</span>'+ '</div>' } stats_info = '<div class="stats_info">'+ stat_item+ '</div>'; } for(var i in ing){ var ing_item = ing[i]; var format_ing = ing_item.replace(/_/g,' '); ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } for(var k in used_in){ var ing_item = used_in[k]; var format_ing = ing_item.replace(/_/g,' '); used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } var ing_block = ""; if(ing != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="ingredient_txt">Uses:</div>'+ ingredients+ '</div>'; } if(used_in != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="usedngredient_txt">Used in:</div>'+ used+ '</div>'; } $('.allitems .item.'+name).html ('<div class="items">'+ '<div class="itemblock">'+ '<i class="'+name+'"></i>'+ '<span class="name">'+formatted_name+'</span>'+ '<span class="price">$ '+price+'</span>'+ '<span class="type">'+type+'</span>'+ '</div>'+ stats_info+ ing_block+ '</div>') }); } function gen8(){ var allitems = ""; // This is a function of current date, so will be empty at some point. $.each(array, function(i, item) { var name = item.name; var price = item.price; var type = item.type; var icon = item.icon; allitems += '<div class="item '+name+'"></div>'; }); $('.total').html(array_len); $('.allitems').html(allitems); } function gen9(){ $.each(array, function(j, item) { var name = item.name; var formatted_name = name.replace(/_/g,' '); var price = item.price; var type = item.type; var icon = item.icon; var ing = item.ingredients; var used_in = item.used_in; var stats = item.stats; var stats_info = ""; var ingredients = ""; var used = ""; var stat_item = ""; if(stats != undefined){ for(var s in stats){ var stat = stats[s]; var type = stat.type; var val = stat.val stat_item += '<div class="stat">'+ '<i class="'+type+'"></i>'+ '<span class="stat_val">'+val+'</span>'+ '</div>' } stats_info = '<div class="stats_info">'+ stat_item+ '</div>'; } for(var i in ing){ var ing_item = ing[i]; var format_ing = ing_item.replace(/_/g,' '); ingredients += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } for(var k in used_in){ var ing_item = used_in[k]; var format_ing = ing_item.replace(/_/g,' '); used += '<div class="ingredient"><i class="'+ing_item+'"></i>'+ '<span class="ing_txt">'+format_ing+'</span>'+ '</div>'; } var ing_block = ""; if(ing != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="ingredient_txt">Uses:</div>'+ ingredients+ '</div>'; } if(used_in != undefined){ ing_block = '<div class="ingredients_block">'+ '<div class="usedngredient_txt">Used in:</div>'+ used+ '</div>'; } $('.item.'+name).html ('<div class="items">'+ '<div class="itemblock">'+ '<i class="'+name+'"></i>'+ '<span class="name">'+formatted_name+'</span>'+ '<span class="price">$ '+price+'</span>'+ '<span class="type">'+type+'</span>'+ '</div>'+ stats_info+ ing_block+ '</div>') }); } var t0 = performance.now(); $('.allitems').each(function() { gen(); gen2() }); var t1 = performance.now(); var milliseconds = (t1 - t0); var seconds = (milliseconds / 1000).toFixed(6); var method = "Using reduce "; $('.function_time_1').html("Using reduce " + seconds + " seconds.") console.log("%c "+method+" took " + seconds + " seconds.", 'background: #000; color: #89ff00'); var t2 = performance.now(); $('.individual_items').each(function() { gen8(); gen9() }); var t3 = performance.now(); var milliseconds2 = (t3 - t2); var seconds2 = (milliseconds2 / 1000).toFixed(6); var method = "Using each without looping"; $('.function_time_2').html("Using each without looping took " + seconds2 + " seconds."); console.log("%c "+method+" took " + seconds2 + " seconds.", 'background: #000; color: #89ff00'); var t4 = performance.now(); $('.allitems').each(function() { gen3(); gen4() }); var t5 = performance.now(); var milliseconds4 = (t5 - t4); var seconds4 = (milliseconds4 / 1000).toFixed(6); var method5 = "Using for loops "; $('.function_time_3').html("Using for loops " + seconds4 + " seconds.") console.log("%c "+method5+" took " + seconds4 + " seconds.", 'background: #000; color: #89ff00'); t4 = performance.now(); $('.allitems').each(function() { gen6(); gen7() }); t5 = performance.now(); milliseconds4 = (t5 - t4); seconds4 = (milliseconds4 / 1000).toFixed(6); method5 = "Using filter "; $('.function_time_4').html("Using filter " + seconds4 + " seconds.") console.log("%c "+method5+" took " + seconds4 + " seconds.", 'background: #000; color: #89ff00'); 

 .strawberry{background-image:url(https://image.flaticon.com/icons/png/128/135/135717.png);} .pear{background-image:url(https://image.flaticon.com/icons/png/128/167/167260.png);} .orange{background-image:url(https://image.flaticon.com/icons/png/128/415/415734.png);} .watermelon{background-image:url(https://image.flaticon.com/icons/png/128/415/415731.png);} .fruit_salad{background-image:url(https://image.flaticon.com/icons/png/128/415/415744.png);} .water{background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);} .orange_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167612.png);} .pear_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167623.png);} .strawberry_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167254.png);} .watermelon_juice{background-image:url(https://image.flaticon.com/icons/png/128/167/167620.png);} .potato{background-image:url(https://image.flaticon.com/icons/png/128/135/135676.png);} .french_fries{background-image:url(https://image.flaticon.com/icons/png/128/135/135589.png);} .hunger {background-image:url(https://image.flaticon.com/icons/png/128/608/608857.png);} .thirst {background-image:url(https://image.flaticon.com/icons/png/128/135/135662.png);} .bladder {background-image:url(https://image.flaticon.com/icons/png/128/1402/1402847.png);} body { background-color: #a3d5d3; font-family: arial; } .debug { background-color: #000; font-family: consolas; color: #ffed00; font-size: 13px; } .debug div { padding: 5px; } .totalitems { display: block; background: #131313; color: #fff; margin-bottom: 2px; text-align: center; } .totalitems .total_txt { margin: 5px; display: inline-block; } .allitems { display: block; } .item { display: inline-block; margin-right: 2px; box-sizing: border-box; background-image: none; vertical-align: top; width: 320px; } .items { border: 1px solid #000; margin-bottom: 2px; background-color: #000; padding: 1px; } .itemblock { display: flex; background-color: #333; padding: 5px; margin-bottom: 2px; min-height: 40px; } .itemblock .items { display: block; background-color: #333; padding: 5px; margin-bottom: 2px; } .itemblock i{ width: 28px; height: 28px; background-size: contain; background-repeat: no-repeat; align-items: center; flex-shrink: 0; margin: 2px; } .itemblock .name { display: flex; align-items: center; margin: 0 5px 0 5px; text-transform: capitalize; color: #fff; width: 100px; flex-shrink: 0; } .itemblock .price { display: flex; align-items: center; margin: 0 2px; color: #ffc107; width: 50px; flex-shrink: 0; } .itemblock .type { display: flex; align-items: center; justify-content: flex-end; margin: 0 15px; color: #9E9E9E; text-transform: capitalize; flex-shrink: 0; } .stats_info { display: flex; background-color: #333; padding: 8px; justify-content: center; border-bottom: 2px solid #000; } .stats_info .stat { display: flex; align-items: center; justify-content: center; width: 50px; } .stats_info .stat i { display: flex; width: 18px; height: 18px; flex-shrink: 0; margin: 0; background-size: contain; background-repeat: no-repeat; } .stats_info .stat .stat_val { display: flex; flex-shrink: 0; color: #fff; font-size: 12px; margin: 0 5px; text-transform: capitalize; justify-content: center; } .ingredients_block { display: block; background-color: #333; padding: 5px; text-align: center; min-height: 82px; } .ingredients_block .usedngredient_txt, .ingredients_block .ingredient_txt{ display: block; margin-bottom: 10px; color: #fff; font-size: 12px; text-align: left; } .ingredients_block .ingredient { display: inline-block; align-items: center; width: 75px; } .ingredients_block .ingredient i { display: flex; width: 24px; height: 24px; flex-shrink: 0; margin: 0 auto; background-size: contain; background-repeat: no-repeat; } .ingredients_block .ingredient .ing_txt { display: flex; flex-shrink: 0; color: #fff; font-size: 12px; margin-top: 5px; text-transform: capitalize; justify-content: center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="debug"> <div class="function_time_1"></div> <div class="function_time_2"></div> <div class="function_time_3"></div> <div class="function_time_4"></div> </div> <div class="totalitems"> <span class="total_txt">Total items:</span> <span class="total"></span> </div> <div class="allitems"></div> <div class="individual_items"> <div class="item strawberry"></div> <div class="item pear"></div> <div class="item orange"></div> <div class="item watermelon"></div> <div class="item fruit_salad"></div> <div class="item water"></div> <div class="item orange_juice"></div> <div class="item pear_juice"></div> <div class="item strawberry_juice"></div> <div class="item watermelon_juice"></div> <div class="item potato"></div> <div class="item french_fries"></div> </div>