What part of DOM are slow?

DOM itself is an efficient data structure for representing an HTML page. Most of its operations are fast, including traversal, lookup,…

It only slow when you're doing something that trigger Layout/Reflow, like reading attributes that required layout calculation, or modifying elements that led to reflow.

So, when you're manipulating DOM too frequently, or animating stuff with some CSS triggers attributes, it will slow, regardless to what you're using, even you're using React.

Avoid triggering layout whenever possible.

Flexbox is faster than float-based layout models.

READ: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en

Date: 2019-01-15 Tue 00:00

Author: Huy Tran

Created: 2019-04-22 Mon 14:41