๐ฅ๏ธ ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ์ต์ ํ: Reflow vs Repaint
๋ธ๋ผ์ฐ์ ๋ HTML, CSS, JavaScript๋ฅผ ํด์ํด ํ๋ฉด์ ์ถ๋ ฅํ๋๋ฐ, ์ด ๊ณผ์ ์์ ํ๋ฉด์ ๋ค์ ๊ทธ๋ฆฌ๋ ์์
์ด ๋ฐ์ํฉ๋๋ค.
๊ทธ์ค Reflow(๋ฆฌํ๋ก์ฐ) ์ Repaint(๋ฆฌํ์ธํธ) ๋ ์ฑ๋ฅ์ ํฐ ์ํฅ์ ์ฃผ๋ ๋ ๋๋ง ๋จ๊ณ์
๋๋ค.
โ reflow๋?
๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง์ ๋ ์ด์์์ ๋ค์ ๊ณ์ฐํ๋ ๊ณผ์
์๋ฅผ ๋ค์ด:
- DOM ๊ตฌ์กฐ ๋ณ๊ฒฝ (์: ์์ ์ถ๊ฐ/์ญ์ )
- CSS ์คํ์ผ ๋ณ๊ฒฝ (์: ์์์ ํฌ๊ธฐ(width, height), ์์น, ํฐํธ ํฌ๊ธฐ ๋ณ๊ฒฝ)
- ๋ธ๋ผ์ฐ์ ์ฐฝ ํฌ๊ธฐ ๋ณ๊ฒฝ
์ด๋ฐ ์ผ์ด ๋ฐ์ํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ๋ค์ ๋ ์ด์์์ ๊ณ์ฐํ๊ณ , ์ด ๊ณผ์ ์์ reflow๊ฐ ๋ฐ์ํฉ๋๋ค.
์ด ๊ณผ์ ์ ๋ชจ๋ ์์ ์์์ ๊ด๋ จ๋ ๋ถ๋ชจ ์์๊น์ง ์ํฅ์ ์ฃผ๋ฏ๋ก,
์ฐ์์ ์ผ๋ก ๋ง์ ์์์ ์ํฅ์ ์ค ์ ์์ด ์ฑ๋ฅ ๋น์ฉ์ด ๋ง์ด ๋ฐ์ํฉ๋๋ค.
โ repaint๋?
๋ ์ด์์์ด ์๋ ์์์ ๋ชจ์์ด๋ ์คํ์ผ์ ๋ณ๊ฒฝ์ผ๋ก ๋ฐ์ (์์์ ๋ ์ด์์์ ๊ทธ๋๋ก)
์๋ฅผ ๋ค์ด:
- ๋ฐฐ๊ฒฝ์ ๋ณ๊ฒฝ (background-color)
- ํ ๋๋ฆฌ ์ ๋ณ๊ฒฝ (border-color)
- ํ ์คํธ ์ ๋ณ๊ฒฝ (color)
์ด๋ฌํ ์คํ์ผ ๋ณ๊ฒฝ์ ์์น๋ ํฌ๊ธฐ๋ฅผ ๋ฐ๊พธ์ง ์๊ธฐ ๋๋ฌธ์, ๋ ์ด์์ ์ฌ๊ณ์ฐ ์์ด repaint๋ง ๋ฐ์ํฉ๋๋ค.
์ด ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ๋ ํด๋น ์์์ ๋ชจ์๋ง ๋ค์ ๊ทธ๋ฆฌ๋ฉด ๋๊ธฐ ๋๋ฌธ์ reflow๋ณด๋ค๋ ์ฑ๋ฅ ๋น์ฉ์ด ๋ ๋ฐ์ํฉ๋๋ค.
ํ์ง๋ง ์ฌ์ ํ ์ฑ๋ฅ ์ ํ์ ์ํฅ์ ์ค ์ ์์ต๋๋ค (๊ณผ๋ํ ๊ฒฝ์ฐ)
๐ Reflow vs Repaint ์ฐจ์ด ์์ฝ
ํญ๋ชฉ | reflow | repaint |
๋ฐ์ ์กฐ๊ฑด | ๋ ์ด์์ ๋ณ๊ฒฝ | ์คํ์ผ ๋ณ๊ฒฝ |
์์ | ํฌ๊ธฐ ๋ณ๊ฒฝ, DOM ์ถ๊ฐ | ์์, ๋ฐฐ๊ฒฝ, ํ ๋๋ฆฌ |
์ฐ์ฐ ๋น์ฉ | ๋์ | ๋ฎ์ |
์ฑ๋ฅ ์ํฅ | ํผ | ์๋์ ์ผ๋ก ์์ |
๐ก ์์ ์ฝ๋๋ก ๋ณด๊ธฐ
// Reflow ๋ฐ์
element.style.width = '300px'; // ์์น/ํฌ๊ธฐ ๋ณ๊ฒฝ → ๋ ์ด์์ ์ฌ๊ณ์ฐ
// Repaint๋ง ๋ฐ์
element.style.backgroundColor = 'blue'; // ์์ ๋ณ๊ฒฝ → ์๊ฐ์ ๋ณ๊ฒฝ
โ ๏ธ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ํ
DOM ์กฐ์์ ํ ๋ฒ์ ๋ชจ์์ ์ฒ๋ฆฌํ๊ธฐ (DOMFragment)
→ DOM ์กฐ์์ ๋ฐ๋ณต์ ์ผ๋ก ํ๋ฉด reflow๊ฐ ์ฐ์ ๋ฐ์ํ ์ ์์ด์.
classList๋ฅผ ํ์ฉํ ์คํ์ผ ๋ณ๊ฒฝ ์ฌ์ฉํ๊ธฐ
→ ๋ฏธ๋ฆฌ ์ ์๋ ํด๋์ค๋ฅผ ํ ๊ธํ๋ ๋ฐฉ์์ด ๋ ํจ์จ์ ์
๋๋ค.
CSS ์ ๋๋ฉ์ด์
์ transform, opacity๋ก
→ ์ด ๋ ์์ฑ์ GPU ๊ฐ์์ ์ฌ์ฉํ ์ ์์ด์ reflow๋ฅผ ์ผ์ผํค์ง ์์ผ๋ฏ๋ก ์ฑ๋ฅ์ ์ ๋ฆฌํฉ๋๋ค.
์ด๋ repaint๋ง ๋ฐ์์ํค๋ฏ๋ก CPU ์์์ ์ ๊ฒ ์ฌ์ฉํฉ๋๋ค.
reflow๋ฅผ ์ ๋ฐํ๋ CSS ์์ฑ ์ฌ์ฉ์ ์ต์ํํ๊ธฐ
→ width, height, margin, padding, border ๋ฑ๊ณผ ๊ฐ์ ์์ฑ์
์์์์ ๋ ์ด์์์ ๋ค์ ๊ณ์ฐํ๊ฒ ํ๋ฏ๋ก reflow๋ฅผ ์ผ์ผํค๊ฒ ๋ฉ๋๋ค.
๊ฐ๋ฅํ ํ, ๋ฏธ๋ฆฌ CSS์์ ์คํ์ผ์ ์ค์ ํด ์ด๊ธฐ ๋ก๋ ์์๋ง ๊ณ์ฐ์ด ์ด๋ค์ง๋๋กํ๊ณ , ์ดํ์ ๋ณ๊ฒฝํ์ง ์๋ ๊ฒ์ด ์ข์ต๋๋ค.
will-change ์์ฑ์ ์ฌ์ฉํ๊ธฐ
→ CSS์ will-change ์์ฑ์ ์ฌ์ฉํ์ฌ,
๋ธ๋ผ์ฐ์ ์ ํน์ ์์๊ฐ ๋ฏธ๋ฆฌ ๋ณ๊ฒฝ๋ ๊ฒ์ด๋ผ๊ณ ๋ฏธ๋ฆฌ ์ธ์ง์ ์ค ์ ์์ต๋๋ค.
์๋ฅผ ๋ค๋ฉด, will-change: transform ์ผ๋ก, ๋ฏธ๋ฆฌ GPU์๊ฒ ์์๋ฅผ ์ค๋นํ๊ฒ ํ์ฌ
reflow์ repaint์ ๋ฏธ์น๋ ์ํฅ์ ์ค ์ ์์ต๋๋ค.
ํ์ง๋ง will-change ์์ฑ๋ ๋๋ฌด ์์ฃผ ์ฌ์ฉํ๊ฒ ๋๋ฉด ๋ฉ๋ชจ๋ฆฌ ๋ญ๋น๊ฐ ๋ฐ์ํ๊ฒ ๋๋ฏ๋ก, ํ์ํ ์์์๋ง ์ ์ฉํด์ผํฉ๋๋ค.
requestAnimationFrame ํจ์ ์ฌ์ฉํ๊ธฐ
→ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ์ผ์ด๋๋ ์ ๋๋ฉ์ด์
์ ๋ณด๋ฅผ ๋ธ๋ผ์ฐ์ ์ ๋งค ํ๋ ์๋ง๋ค ๋ฏธ๋ฆฌ ์๋ ค์ค๋๋ค.
์ด๋ค ํ๋ ์์ด ์ด๋ฒ์๋ n์ผ๋ก ์ขํ ์ด๋, ๋ค์ ํ๋ ์์ n์ผ๋ก ์ขํ ์ด๋ ์ด๋ ๊ฒ ์๋ ค์ฃผ๋ ๊ฒ์
๋๋ค.
๊ทธ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ฉ์ด์
์ด ํ๋ ์์ ์์ ์ ์คํ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
๐งท ๋ง๋ฌด๋ฆฌ ์ ๋ฆฌ
Reflow | ๋ ์ด์์ ๊ณ์ฐ์ด ๋ค์ ์ผ์ด๋จ (๋น์ฉ ํผ), ๋ ์ด์์ ํธ๋ฆฌ(๋ ๋ ํธ๋ฆฌ)๋ฅผ ์ฌ์์ฑํ๋ ์์ ์ ๋๋ค. |
Repaint | ์๊ฐ์ ๋ณํ๋ง ๋ฐ์ (๋น์ฉ ์์), ๋ ์ด์์ ํธ๋ฆฌ(๋ ๋ ํธ๋ฆฌ)๋ฅผ ๋ค์ ๋ ์ด์ด์ ๊ทธ๋ฆฌ๋ ์์ ์ ๋๋ค. |
reflow์ repaint ์์
์ด ๋ง์ด์ง ์๋ก, ๋ ๋๋ง ์ฑ๋ฅ ๋น์ฉ์ด ๋ฐ์ํ์ฌ ์ฑ๋ฅ์ด ์ ํ๋ฉ๋๋ค.
๋ฐ๋ผ์ ๋ธ๋ผ์ฐ์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํด
CSS transform, opacity, JS requestAnimationFrameํจ์๋ฅผ ์ฌ์ฉํ๋ ๋ฑ
reflow๋ฅผ ์ต์ํํ๊ณ , repaint๋ฅผ ์ค์ด๋ ๋ฐฉํฅ์ผ๋ก ์ฝ๋๋ฅผ ์ง๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.