Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
perf(platform-browser): only append style element on creation (#52237)
Prior to this change the style element was appended to host element multiple times. Whilst the actual element was not added multiple to the DOM multiple times. This causes a performance regression and it caused repainting. This can be observed in the below benchmark. ```js (() => { const time = (name, fn) => { const t = performance.now(); fn(); console.log(name, performance.now() - t); } const s = document.createElement("style"); s.textContent = "@layer x{} @font-face { font-family: foo; }"; time("append and enable", () => { document.head.append(s); s.disabled = false; }); time("compute body color", () => { getComputedStyle(document.body).color; }); time("compute body layout", () => { document.body.offsetTop; }); time("append and disable", () => { document.head.append(s); s.disabled = false; }); time("compute body color", () => { getComputedStyle(document.body).color; }); time("compute body layout", () => { document.body.offsetTop; }); })(); ``` Output ``` append and enable 0.20000000298023224 compute body color 0.7999999970197678 compute body layout 2.899999998509884 append and disable 0.10000000149011612 compute body color 0.7000000029802322 compute body layout 2.2999999970197678 ``` When commenting the 2nd `document.head.append(s);`, the results are slightly different and we can see that calling `getComputedStyle` does not incur any performance impact this is a result of no repainting. ``` append and enable 0.10000000149011612 compute body color 0.7999999970197678 compute body layout 3.1999999955296516 append and disable 0.10000000149011612 compute body color 0 compute body layout 0 ``` Pantheon benchmarks: http://docs/spreadsheets/d/1iLRLGCmVYZHuVRdI7dO_WM7wnQ1DvkS-tJzi-0-u1KY?resourcekey=0-kwtrf0nbAhcPqAGdqbdz4g#gid=0 PR Close #52237
- Loading branch information