I am creating an app in html5 for mobile, and I have all the information of the items inside an array with 887 entries. Each entry have 32 key with values, some with more than one value.
I am using a for loop to iterate the array, and when I find the entry that match the html element it shows the item information with a html block.
I found that it's more efficient to cache the array lenght to use in the for loop. So instead of doing this:
for (var i = 0; i < array.length; i++){//code};
I am doing this which is more fast:
var array_len = array.length;
for (var i = 0; i < array_len; i++){//code};
Another idea that I tested is creating an index for the array to avoid loops, like this:
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
}
And then call the item info using a function like this:
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)
}
So when I use a code like this: <div class="item watermelon"></div> it should retrieve the item information without the need to loop through the array.
Below is an example code I wrote to represent the situation, with a short array of items. In the real app, the main array which holds the items information is 887 items long. And I do some for loops inside the other for loop to retrieve informations like stats and the used in example.
So, it's a for loop inside a for loop.
The question is, there's a more efficient way of doing this? Because some pages that display one category of items, with aproximatedely 100 items taks 5, 6 seconds to load, and I need it to be more faster.
Edit: Codepen code that shows performance time with both codes:
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 -->
