The async placeholder observer forces a page layout for every element added to the page

The asynchronous rendering script (uicomponents/async/async.js) observes the whole document with a MutationObserver (childList, subtree and attributes). For every added node it runs $(node).find('.xwiki-async:visible').addBack('.xwiki-async:visible'). jQuery evaluates :visible by reading offsetWidth, which forces a synchronous layout of the page, for elements that are not async placeholders at all.

Every script that adds elements to a page pays for it. Measured on a Live Data page change with 100 rows: about 37 ms of main-thread time, about 8% of the page change, spent in this observer.

The attributes option is useless (only addedNodes are read), but makes the browser queue a mutation record for every attribute change in the page.

Proposal

• Select the .xwiki-async elements first, and only check the visibility of the matches.
• Stop observing attributes.