Very slow loop in angularjs

Question

I use this loop for create map markers (1000 points):

var markers = {};
for (var i = 0; i < items.data.data.length; i++) {
    latVal = items.data.data[i].lat;
    lngVal = items.data.data[i].lng;
    ikona = icons.infost;
    message = "<b>" + items.data.data[i].name + "</b>";
    markers[i] = {'group': 'cmp', 'lat' : eval(latVal), 'lng' : eval(lngVal), 'icon' : ikona, 'message' : message};
}
$scope.Markers = markers;

how I can improve the for loop speed in angularjs (currently it takes almost 10s)?

@devqon is right, eval is pretty slow and unsafe. Assuming that lat and lng are numbers you could use Number(latVal) and Number(lngVal). — lenilsondc
– lenilsondc, Commented Nov 8, 2016 at 10:12
also storing length of array outside loop couldn't hurt, `var len = items.data.data.length; for(var i = 0; i < len; i++) — Bojana Šekeljić
– Bojana Šekeljić, Commented Nov 8, 2016 at 10:14

Qwertiy · Accepted Answer · 2016-11-08 10:23:34Z

2

Remove eval. It's slow and drops all browser optimizations for entire chain of functions.
Use array markers = [] instead of object.
Use + for converting string to number.
Use push to append elements to array.
Save items.data.data to a variable.

answered Nov 8, 2016 at 10:23

Qwertiy

21.9k17 gold badges69 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lenilsondc · Accepted Answer · 2016-11-08 10:36:46Z

1

There is a few things that can improve your code speed like avoiding eval and caching loop variables and arrays as well. By caching some values, reduce a bunch of operations like member access and unecessary calculations.

var items = { data: { data: [] }};
var icons = { infost: 'infost'};
for (var i = 0; i < 1000; i++) {
  items.data.data.push({ lat: ''+i, lng: ''+i, name:''+i });
}

console.time('time');

/// YOUR CODE STARTS HERE

var
  data = items.data.data,
  l = data.length,
  markers = Array(l), // or just []
  item, latVal, lngVal, ikona, message;

for (var i = 0; i < l; i++) {
  item = data[i];

  latVal = item.lat;
  lngVal = item.lng;
  ikona = icons.infost;
  message = "<b>" + item.name + "</b>";
  markers[i] = {
    group: 'cmp',
    lat: +latVal,
    lng: +lngVal,
    icon: ikona,
    message: message
  };
}
console.timeEnd('time');
//$scope.Markers = markers;

edited Nov 8, 2016 at 10:36

answered Nov 8, 2016 at 10:18

lenilsondc

9,8453 gold badges27 silver badges40 bronze badges

2 Comments

Qwertiy Over a year ago

+ is faster than Number.

lenilsondc Over a year ago

@Qwertiy Yes, you are right, with the amout of 1000 iterations it starts to make some difference.

Collectives™ on Stack Overflow

Very slow loop in angularjs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related