canmove, Confirmed users
1,448
edits
L20n/Firefox/Performance: Difference between revisions
→Hypothesis 2: NodeList Iteration Is Slow
(→Hypothesis 2: NodeList Iteration Is Slow: iteration resolves lazy nodes) |
|||
| Line 25: | Line 25: | ||
In (B) we still need to guard the initial translation of the document with documentReady(). The reason for this is that we can't rely on the unguarded MutationObserver in XUL documents: {{bug|1294197}}. | In (B) we still need to guard the initial translation of the document with documentReady(). The reason for this is that we can't rely on the unguarded MutationObserver in XUL documents: {{bug|1294197}}. | ||
==Hypothesis 2: NodeList Iteration Is Slow== | ==<s>Hypothesis 2: NodeList Iteration Is Slow</s>== | ||
Are we DOM-bound? Iterating over the <code>[data-l10n-id]</code> NodeList is slow: taking 25-30 ms on a 114-element-long NodeList (on 3rd+ launch). It doesn't matter if the iteration is done via a regular <code>for</code> loop, <code>for…of</code> or <code>Array.from</code>. See [https://github.com/l20n/l20n.js/blob/56045d87d496c7e7cc47f573b3086030025b7eb9/src/lib/observer/base.js#L221-L230 <code>getTranslatables</code>]. | Are we DOM-bound? Iterating over the <code>[data-l10n-id]</code> NodeList is slow: taking 25-30 ms on a 114-element-long NodeList (on 3rd+ launch). It doesn't matter if the iteration is done via a regular <code>for</code> loop, <code>for…of</code> or <code>Array.from</code>. See [https://github.com/l20n/l20n.js/blob/56045d87d496c7e7cc47f573b3086030025b7eb9/src/lib/observer/base.js#L221-L230 <code>getTranslatables</code>]. | ||
| Line 45: | Line 45: | ||
I doesn't matter if we're using <code>querySelectorAll</code> or <code>getElementsByClassName</code> (with a special class for this purpose). Hypothesis: we're the first code that requests these DOM nodes and it's slow. Subsequent iterations are very fast. | I doesn't matter if we're using <code>querySelectorAll</code> or <code>getElementsByClassName</code> (with a special class for this purpose). Hypothesis: we're the first code that requests these DOM nodes and it's slow. Subsequent iterations are very fast. | ||
After fixing {{bug|1298974}} the NodeList iteration isn't a bottleneck anymore. It turned out XUL documents have different readystates than HTML and l20n's logic was being run too early when the DOM wasn't ready yet. With the fix, the first iteration takes less than 5 ms. | |||
==Hypothesis 3: Formatting Translations Is Slow== | ==Hypothesis 3: Formatting Translations Is Slow== | ||