๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

CS

๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ์„ฑ๋Šฅ ์ตœ์ ํ™”! Reflow vs Repaint ์™„์ „ ์ •๋ฆฌ

๋ฐ˜์‘ํ˜•

 

 

 

๐Ÿ–ฅ๏ธ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ์ตœ์ ํ™”: 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๋ฅผ ์ค„์ด๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์งœ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

 

๋ฐ˜์‘ํ˜•