I am working with a large array called frames_to_boxes, consisting of 5000 elements. Each element is an array of Objects belonging to the Box class:
class Box {
constructor(x, y, width, height, frame, object_class, id) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.frame = frame;
this.object_class = object_class;
this.id = id;
}
The purpose of frames_to_boxes is to efficiently look up Boxes by their frame number instead of looping through the entire array and comparing frames.
However, I have noticed that checking if a specific element in frames_to_boxes is null is taking around 25ms according to my performance analysis, which seems unexpectedly slow.
I am measuring this using the following code snippet:
const t11 = performance.now();
if(this.frames_to_boxes[i] != null)
{
const t12 = performance.now();
After logging the time difference (t12-t11), I am observing durations ranging from 5ms to 25ms. Interestingly, when accessing the array in groups of three (for example, checking indices 500, 501, 502), the first access typically takes 25ms while the subsequent accesses take only about 5ms each.
It is worth mentioning that this.frames_to_boxes is a computed value in Vue. However, based on my investigations, I have confirmed that the code updating frames_to_boxes is not being repeatedly executed. It appears that the delay is arising from the array lookup itself.
Is it common for such operations to take 5-25ms? If not, what factors could be contributing to this slower performance? My measurements are based on Chrome browser.