Replace innerHTML with replaceChildren to clear DOM

[mauriciolauffer]

The replaceChildren is a modern, safer and faster alternative to innerHTML. It's fully supported in moderns browsers: Baseline October 2020⁩.

I'm not replacing innerHTML everywhere, it's only when setting it to empty string like innerHTML = ""

Performance benchmark shows replaceChildren is much faster than innerHTML.

• innerHTML vs replaceChildren
• innerHTML vs replaceChildren CLEAR

[codeworrior]

Interestingly, the performance difference is not consistent across browsers. I tested the CLEAR variant with Chrome, Edge, Safari and Firefox (all on desktop). For Chrome/Edge there's a huge advantage of replaceChildren whereas in Firefox the performance gain is much smaller. In Safari, it's the opposite, innerHTML is faster.

I find the difference in Chrome/Edge surprising. If I should guess, I would assume that Blink has removed some extra code branch that handled this special case, most likely to simplify their code base.

I don't expect a significant benefit from this change as none of the touched places looks like a hotspot. But as we in general move into the direction of direct DOM manipulation instead of using markup-based APIs, I also don't mind this change in general. Especially. given that the difference in Safari is much less significant than the difference in Chrome.

However, I would recommend to remove the changes to externally maintained thirdparty sources again (adaptivecards.js in sap.ui.integration, Menu.js in sap.ui.webc.main).

Besides that, code owners have to decide what parts of the the change they want to take over.