Reflow và repaint là gì?

Ba bước render pipeline của browser, xếp theo mức độ tốn tài nguyên:

• Reflow (layout): tính toán lại vị trí/kích thước elements — tốn nhất. Gây ra bởi: thay đổi width/height.
• Repaint: vẽ lại pixels — ít tốn hơn. Gây ra bởi: thay đổi color.
• Composite: ghép layers — ít tốn nhất. Gây ra bởi: transform.

Three browser rendering pipeline steps, ordered by cost:

• Reflow (layout): recalculates positions and sizes of elements — most expensive. Triggered by: changing width/height.
• Repaint: redraws pixels — less expensive. Triggered by: changing color.
• Compositing: merges layers — least expensive. Triggered by: changing transform.