L20n/Firefox/Performance: Difference between revisions

This iterates over 114 nodes with data-l10n-id.  (a) takes 4.5ms and (b) takes 0.25ms.  I then used setTimeout to run the same experiment 10 seconds after the launch of the browser.  The numbers were the same.  I then tried 'touching' part of those 114 nodes with another qSA.  70 of these nodes have a ''command'' attribute, so I ran the following:

Now (a) takes 3.5ms and (b) takes 2ms! It looks like the first NodeList is cached too:

The results: (a): 2.05 ms, (b): 0.18 ms, (c): 2.40 ms.  Finally I wanted to verify that the cost is indeed in the iteration and not in the querySelectorAll itself or in the creation of the iterator:

 

(a) for (const node of document.querySelectorAll('[data-l10n-id]')) break;

(b) Array.from(document.querySelectorAll('[data-l10n-id]'));

 

The results: (a): 0.26 ms, (b): 6.67 ms.  It's the iteration that takes almost all of the time.