Audit DOM APIs that do layout reflows

[bbondy]

We should audit the usage of any DOM api on this list and at least limit the usage.
For example in APP_WINDOW_UPDATED we could do everything once and cache it.
https://gist.github.com/paulirish/5d52fb081b3570c81e3a

[jonathansampson]

Related: https://csstriggers.com/

[cezaraugusto]

[diracdeltas]

these are used all over the place in the Brave content scripts

[cezaraugusto]

I'll make use of this as a tracking issue there's a lot of room for improvement.

[cezaraugusto]

• Stick with compositor layers whenever needed

  • for tab previews - done, see c07be24
  • for new tab's first paint gotten slow after property addition [wontfix]
  • for loading icon done, see ed41bc8

• prefer using Intersection Observer API to track intersected elements instead of window size and getBoundingClientRect

  • for tabs (replace tab's breakpoint)
  • for downloads bar (replace current calculation)
  • for bookmarks toolbar (replace current calculation)

• improve start-up time experience making the app shell visible first instead of waiting tab loading (css is render blocking) see Improve startup time #3025

• cache what can be cached to avoid re-render of known scripts/elements see Improve startup time #3025

• remove unused styles (bind styles to components w/ Aphrodite)

[ghost]

Spoke with @cezaraugusto - the bulk of the effort is completed. Setting milestone to 0.21.x