Manipulate set of data vs. performance

[john_woo]

Hi,

supposed given:
var o = aDiv.childNodes, and there are about 1000 img objects + other
types of objects in o; the img object has id, position, size.

what to do:
Each of those img object has to be modified once, the order to modify
depends on run time value of given position.

require high performance.

I'm wondering:
without using 3rd lib (except built-in, ex. prototype.js), how to
manipulate such data with respect of higher performance.

ex.
1. I can define a class which represents img, then using array to
store these 1000 img instances, then every time look into this array.
in this case, how to remove an element so that next time the length of
array decreased?

2. just using array to store all img objects.

3. simply just using o and looks for tag name of img, and every time
looks into this o.
in this case, again how to remove an element so that next time no
necessary look up same amount of elements, and does this have side-
effect?

....

 

[RobG]

Hi,

supposed given:
var o = aDiv.childNodes, and there are about 1000 img objects + other
types of objects in o; the img object has id, position, size.

what to do:
Each of those img object has to be modified once, the order to modify
depends on run time value of given position.

The images collection can be accessed by index, it is surely the
fastest way as there is no other processing required.

require high performance.

I'm wondering:
without using 3rd lib (except built-in, ex. prototype.js), how to
manipulate such data with respect of higher performance.

Prototype.js provides a function to convert a collection to an array,
however the code to do that yourself is trivial and certainly faster.
It also provides an each method to make your code shorter, but testing
show writing your own for loop is 30 to 50 times faster than
Prototype.js's each method.

Note that some browser have an each method already.

ex.
1. I can define a class which represents img, then using array to
store these 1000 img instances, then every time look into this array.
in this case, how to remove an element so that next time the length of
array decreased?

Use the Array slice method:

15.4.4.10 Array.prototype.slice (start, end)
The slice method takes two arguments, start and end, and returns an
array containing the elements of the array from element start up to,
but not including, element end (or through to the end of the array if
end is undefined). If start is negative, it is treated as (length
+start) where length is the length of the array. If end is negative,
it is treated as (length+end) where length is the length of the array.

2. just using array to store all img objects.

That seems to be inferred by the above.

3. simply just using o and looks for tag name of img, and every time
looks into this o.
in this case, again how to remove an element so that next time no
necessary look up same amount of elements, and does this have side-
effect?

See above.

 

[RobG]

Prototype.js provides a function to convert a collection to an array,
however the code to do that yourself is trivial and certainly faster.
It also provides an each method to make your code shorter, but testing
show writing your own for loop is 30 to 50 times faster than
Prototype.js's each method.

And is trivial to write.

[...]

Use the Array slice method:

That should be Array *splice* method, slice doesn't remove elements:

15.4.4.12 Array.prototype.splice (start, deleteCount [ , item1 [ ,
item2 [ , ... ] ] ] ) When the splice method is called with two or
more arguments start, deleteCount and (optionally) item1, item2, etc.,
the deleteCount elements of the array starting at array index start
are replaced by the arguments item1, item2, etc.

And it returns an array of the removed elements, so to remove the 3rd
element of:

var a = [0,1,2,3,4,5];
var b = a.splice(2,1);
alert(a + '\n' + b[0]);

shows:

0,1,3,4,5
2