Input + Output = True

๋ Œ๋”๋ง ์ตœ์ ํ™”] ๋ฆฌํ”Œ๋กœ์šฐ ๋ฆฌํŽ˜์ธํŠธ (Reflow Repaint) ๋ณธ๋ฌธ

๐Ÿ”ŽWeb

๋ Œ๋”๋ง ์ตœ์ ํ™”] ๋ฆฌํ”Œ๋กœ์šฐ ๋ฆฌํŽ˜์ธํŠธ (Reflow Repaint)

IOTrue 2023. 4. 7. 15:16

๐Ÿ˜Ž ๋ Œ๋”๋ง ์ตœ์ ํ™”] ๋ฆฌํ”Œ๋กœ์šฐ ๋ฆฌํŽ˜์ธํŠธ (Reflow Repaint)

๋ฆฌํ”Œ๋กœ์šฐ์™€ ๋ฆฌํŽ˜์ธํŠธ๋ฅผ ์•Œ๊ธฐ ์œ„ํ•ด

๋จผ์ € ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๋ฐฉ์‹์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ์•„๋ณด์ž.

โœ… ๊ธฐ์กด DOM ๋ Œ๋”๋ง ๋ฐฉ์‹ (๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๋ฐฉ์‹)

  1. ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋ฒ„๊ฐ€ ๋ณด๋‚ด์ค€ HTML ํŒŒ์ผ, CSS ํŒŒ์ผ์„ ํ•ด์„(Parsing)ํ•˜์—ฌ DOM ํŠธ๋ฆฌ, CSSOM ํŠธ๋ฆฌ๋ฅผ ๋งŒ๋“ ๋‹ค.
  2. DOM ํŠธ๋ฆฌ + CSSOM ํŠธ๋ฆฌ๋ฅผ ๊ฒฐํ•ฉํ•ด Render ํŠธ๋ฆฌ๋ฅผ ๋งŒ๋“ ๋‹ค.
  3. Render ํŠธ๋ฆฌ๋กœ ๊ฐ ๋…ธ๋“œ์˜ ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ ๊ณ„์‚ฐํ•œ ๋ ˆ์ด์•„์›ƒ(Layout)์„ ๋งŒ๋“ค๊ณ 
    ๋ทฐํฌํŠธ(Viewport) ๋‚ด์—์„œ ๊ฐ ๋…ธ๋“œ๋“ค์˜ ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ ๊ณ„์‚ฐํ•œ๋‹ค.
  4. Layout ๊ณ„์‚ฐ์ด ์™„๋ฃŒ๋˜๋ฉด ์š”์†Œ๋“ค์„ ํ™”๋ฉด์ƒ์˜ ์‹ค์ œ ํ”ฝ์…€๋กœ ๋ณ€ํ™˜ํ•˜๊ณ , ๋ ˆ์ด์–ด๋ฅผ ๋งŒ๋“œ๋Š” ํŽ˜์ธํŠธ(Paint)๋ฅผ ํ•œ๋‹ค.
  5. ์ƒ์„ฑ๋œ ๋ ˆ์ด์–ด๋ฅผ ํ•ฉ์„ฑํ•ด์„œ ์‹ค์ œ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ธ๋‹ค. (Composite)

์ž์„ธํ•œ ๋‚ด์šฉ์€ ์ด์ „ ๊ธ€์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•˜๋‹ค.

 

โœ… ๋ฆฌํ”Œ๋กœ์šฐ ๋ฆฌํŽ˜์ธํŠธ

๋ธŒ๋ผ์šฐ์ € ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด์„  Reflow์™€ Repaint๋ฅผ ์•Œ์•„์•ผ ํ•œ๋‹ค.

Reflow (Layout)

์œ„์—์„œ ์–ธ๊ธ‰๋œ ๋ Œ๋”๋ง ๊ณผ์ •์„ ๊ฑฐ์นœ ํ›„ ์ตœ์ข…์ ์œผ๋กœ ํŽ˜์ด์ง€๊ฐ€ ๊ทธ๋ ค์ง„๋‹ค๊ณ  ํ•ด์„œ ๋ Œ๋”๋ง ๊ณผ์ •์ด ๋ชจ๋‘ ๋๋‚œ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.

์–ด๋–ค ์•ก์…˜์ด๋‚˜ ์ด๋ฒคํŠธ์— ๋”ฐ๋ผ html ์š”์†Œ์˜ ํฌ๊ธฐ, ์œ„์น˜ ๋“ฑ ๋ ˆ์ด์•„์›ƒ์˜ ์ˆ˜์ •์ด ํ•„์š”ํ•˜๋ฉด

๊ทธ์— ๋”ฐ๋ผ ์˜ํ–ฅ์„ ๋ฐ›๋Š” ์ž์‹ ๋…ธ๋“œ๋‚˜ ๋ถ€๋ชจ ๋…ธ๋“œ๋“ค์„ ํฌํ•จํ•˜์—ฌ Layout ๊ณผ์ •์„ ๋‹ค์‹œ ์ˆ˜ํ–‰ํ•˜๊ฒŒ ๋œ๋‹ค.

์ด ๊ฒฝ์šฐ, Render Tree์™€ ๊ฐ ์š”์†Œ๋“ค์˜ ํฌ๊ธฐ, ์œ„์น˜๋ฅผ ๋‹ค์‹œ ๊ณ„์‚ฐํ•˜๊ณ  ์ด ๊ณผ์ •์„ Reflow๋ผ๊ณ  ํ•œ๋‹ค.

 

Reflow ๋ฐœ์ƒ ์˜ˆ์‹œ

  • ํŽ˜์ด์ง€ ์ดˆ๊ธฐ ๋ Œ๋”๋ง (์ตœ์ดˆ Layout ๊ณผ์ •)
  • ์œˆ๋„์šฐ ๋ฆฌ์‚ฌ์ด์ง• (Viewport ํฌ๊ธฐ ๋ณ€๊ฒฝ)
  • ๋…ธ๋“œ ์ถ”๊ฐ€, ์ œ๊ฑฐ
  • ์š”์†Œ์˜ ์œ„์น˜, ํฌ๊ธฐ ๋ณ€๊ฒฝ (width, height, margin, padding, border ๋“ฑ)
  • font ๋ณ€๊ฒฝ
  • ํ…์ŠคํŠธ ๋‚ด์šฉ, ์ด๋ฏธ์ง€ ํฌ๊ธฐ ๋ณ€๊ฒฝ

Repaint (Paint)

Reflow์˜ ์ง„ํ–‰๋งŒ์œผ๋กœ๋Š” ์‹ค์ œ ํ™”๋ฉด์— ๋ฐ˜์˜๋˜์ง€๋Š” ์•Š๋Š”๋‹ค.

์œ„์—์„œ ์–ธ๊ธ‰๋œ ๋ Œ๋”๋ง ๊ณผ์ •๊ณผ ๊ฐ™์ด Render Tree๋ฅผ ๋‹ค์‹œ ํ™”๋ฉด์— ๊ทธ๋ ค์ฃผ๋Š” ๊ณผ์ •์ด ํ•„์š”ํ•˜๋‹ค.

๊ฒฐ๊ตญ, Paint ๋‹จ๊ณ„๊ฐ€ ๋‹ค์‹œ ์ง„ํ–‰๋˜๋Š” ๊ฒƒ์ด๋ฉฐ ์ด๋ฅผ Repaint ๋ผ๊ณ  ํ•œ๋‹ค.

ํ•˜์ง€๋งŒ, Reflow๊ฐ€ ์ง„ํ–‰๋ผ์•ผ๋งŒ Repaint๊ฐ€ ์ง„ํ–‰ ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.

background-color, visibility ์†์„ฑ๊ณผ ๊ฐ™์ด Layout์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š” ๋ณ€๊ฒฝ์‚ฌํ•ญ์ด ์žˆ์„ ๊ฒฝ์šฐ์—๋Š”

Reflow๋ฅผ ์ง„ํ–‰ํ•  ํ•„์š”๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— Repaint๋งŒ ์ง„ํ–‰ํ•˜๊ฒŒ ๋œ๋‹ค.

 

โœ… ๋ Œ๋”๋ง ์ตœ์ ํ™” ๋ฐฉ๋ฒ• : Reflow, Repaint ์ตœ์ ํ™”

Reflow ์ตœ์†Œํ™”๋ฅผ ํ†ตํ•ด ๋ Œ๋”๋ง ์ตœ์ ํ™”๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

1. ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๋…ธ๋“œ์—๋Š” visibilty: invisible ๋Œ€์‹  display: none ์‚ฌ์šฉ

visibility๋Š” ๋ ˆ์ด์•„์›ƒ ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— Reflow์˜ ๋Œ€์ƒ์ด ๋˜์ง€๋งŒ

display๋Š” Layout ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— Render Tree์—์„œ ์ œ์™ธ๋˜๋ฏ€๋กœ

์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด์„œ๋Š” visibilty ๋Œ€์‹  display ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•œ๋‹ค.

visibility, display๋ณด๋‹ค opacity์†์„ฑ์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์„ฑ๋Šฅ๋ฉด์—์„œ ๋” ํšจ์œจ์ ์ด๋‹ค.

 

2. Reflow, Repaint๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ์†์„ฑ ์‚ฌ์šฉ ์ž์ œ

Reflow๊ฐ€ ์ง„ํ–‰๋  ๊ฒฝ์šฐ Repaint๋„ ํ•จ๊ป˜ ์ง„ํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์—

๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด Reflow๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ์†์„ฑ๋ณด๋‹ค Repaint๋งŒ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ์†์„ฑ ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•œ๋‹ค.

 

Reflow ๋Œ€ํ‘œ ์†์„ฑ ์˜ˆ์‹œ

width height margin padding overflow
border(width) font(size,weight,family) line-height text-align vertical-align

 

Repaint ๋Œ€ํ‘œ ์†์„ฑ ์˜ˆ์‹œ

background(image,position,repeat,size) border(radius,style) box-shadow color text-decoration

 

3. ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์žˆ๋Š” ๋…ธ๋“œ๋Š” position fixed ๋˜๋Š” absolute๋กœ ์ง€์ •ํ•œ๋‹ค.

์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋Š” ๋งŽ์€ Reflow ๋น„์šฉ์„ ๋ฐœ์ƒ ์‹œํ‚จ๋‹ค.

์• ๋‹ˆ๋ฉ”์ด์…˜์ด ํ•„์š”ํ•œ ๋…ธ๋“œ์— position ์†์„ฑ์„ fixed ๋˜๋Š” absolute๋กœ ์„ค์ •ํ•˜๊ณ ,

ํ•ด๋‹น ๋…ธ๋“œ๋ฅผ ์ „์ฒด ๋…ธ๋“œ์—์„œ ๋ถ„๋ฆฌ์‹œ์ผœ ํ•ด๋‹น ๋…ธ๋“œ์—์„œ๋งŒ Reflow๊ฐ€ ๋ฐœ์ƒํ•˜๋„๋ก ์ œํ•œํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

๋งŒ์•ฝ, ํ•ด๋‹น ๋…ธ๋“œ์— position ์†์„ฑ์ด ์ ์šฉ์ด ๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด

์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‹œ์ž‘ํ•  ๋•Œ position ์†์„ฑ(fixed ๋˜๋Š” absolute)์„ ์ ์šฉํ•œ ๋‹ค์Œ

์• ๋‹ˆ๋ฉ”์ด์…˜ ์ข…๋ฃŒ ํ›„ ๋‹ค์‹œ ์›๋ณต์‹œ์ผœ์„œ ๋ Œ๋”๋ง์„ ์ตœ์ ํ™” ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

4. table ๋ ˆ์ด์•„์›ƒ์„ ์ž์ œํ•œ๋‹ค.
<table>์€ ์ ์ง„์ ์œผ๋กœ ๋ Œ๋”๋ง ๋˜์ง€ ์•Š๊ณ , ๋ชจ๋‘ ๋กœ๋“œ๋œ ๋‹ค์Œ ํ…Œ์ด๋ธ” ํฌ๊ธฐ๊ฐ€ ๊ณ„์‚ฐ๋œ ํ›„์— ํ™”๋ฉด์— ๊ทธ๋ ค์ง€๊ณ 

ํ…Œ์ด๋ธ” ์•ˆ์˜ ์ปจํ…์ธ  ๊ฐ’์— ๋”ฐ๋ผ ํ…Œ์ด๋ธ” ํฌ๊ธฐ๊ฐ€ ๊ณ„์‚ฐ ๋œ๋‹ค.

์ฆ‰, ํ…Œ์ด๋ธ”์€ ์ปจํ…์ธ ์˜ ์ž‘์€ ๋ณ€๊ฒฝ์—๋„ ํ…Œ์ด๋ธ” ํฌ๊ธฐ๊ฐ€ ๋‹ค์‹œ ๊ณ„์‚ฐ๋˜๊ณ  ํ…Œ์ด๋ธ”์˜ ๋ชจ๋“  ๋…ธ๋“œ๋“ค์— Reflow๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— <table>์„ ๋ ˆ์ด์•„์›ƒ ์šฉ๋„๋กœ ์‚ฌ์šฉํ•˜๋Š” ์ผ์€ ํ”ผํ•ด์•ผ ํ•œ๋‹ค.

 

5. CSS ํ•˜์œ„ ์„ ํƒ์ž๋ฅผ ์ตœ์†Œํ™” ํ•œ๋‹ค.
์ด ๋ฐฉ๋ฒ•์€ Render Tree๊ณ„์‚ฐ์„ ์ตœ์†Œํ™” ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

CSS ํ•˜์œ„ ์„ ํƒ์ž๊ฐ€ ๋งŽ์•„์ง€๋ฉด CSSOM์˜ ๊นŠ์ด๊ฐ€ ๊นŠ์–ด์ง€๊ณ , Render Tree๋ฅผ ๋งŒ๋“œ๋Š” ์‹œ๊ฐ„์ด ์ฆ๊ฐ€ํ•˜๊ฒŒ ๋œ๋‹ค.

/* Bad */
.box ul li .btn{
  display: block;
}

/* Good */
.box .btn {
  display: block;
}

 

6. ์ˆจ๊ฒจ์ง„ ๋…ธ๋“œ์˜ ์Šคํƒ€์ผ์„ ๋ฏธ๋ฆฌ ๋ณ€๊ฒฝํ•œ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด display: none์ธ ๋…ธ๋“œ์˜ ์Šคํƒ€์ผ์„ ๋ณ€๊ฒฝํ•  ๋•Œ๋Š” ํ™”๋ฉด์— ํ‘œ์‹œ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ Reflow๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค.

์ด๋ ‡๊ฒŒ ์ˆจ๊ฒจ์ง„ ๋…ธ๋“œ๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๊ธฐ ์ „์— ๋…ธ๋“œ์˜ ์Šคํƒ€์ผ์„ ๋จผ์ € ๋ณ€๊ฒฝํ•œ ํ›„ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ด๋ฉด Reflow๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

 

7. DOM ์‚ฌ์šฉ ์ตœ์†Œํ™”

์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด DOM์„ ํ™”๋ฉด์— ๊ทธ๋ ค์•ผํ•  ๊ฒฝ์šฐ

DOM์„ ํ•˜๋‚˜์”ฉ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํ•˜๋‚˜์˜ ๋ฌถ์Œ์œผ๋กœ ๋ชจ์€ ํ›„ ํ•œ ๋ฒˆ์— ์ถ”๊ฐ€ํ•œ๋‹ค๋ฉด Reflow๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

๋ฐฐ์น˜ ์—…๋ฐ์ดํŠธ๋ฅผ ์˜๋ฏธํ•˜๋ฉฐ ๋ฆฌ์•กํŠธ์—์„œ๋Š” ์ด๋ฅผ ํ™œ์šฉํ•œ๋‹ค.

 

8. ํ”„๋ ˆ์ž„ ์ตœ์†Œํ™”
0.1s์— 1px์”ฉ ์ด๋™ํ•˜๋Š” ์š”์†Œ๋ณด๋‹ค 0.1s์— 3px์”ฉ ์ด๋™ํ•˜๋Š” ์š”์†Œ๊ฐ€

Reflow, Repaint ์—ฐ์‚ฐ๋น„์šฉ์ด 3๋ฐฐ๊ฐ€ ์ค„์–ด๋“ ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ฆ‰, ๋ถ€๋“œ๋Ÿฌ์šด ํšจ๊ณผ(ํ”„๋ ˆ์ž„)๋ฅผ ์ค„์—ฌ์„œ ์„ฑ๋Šฅ ๊ฐœ์„ ์— ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

 

 

โ— ์ •๋ฆฌ

Reflow์™€ Repaint๋Š” ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ๊ฐœ๋…์ด๋ฏ€๋กœ

Reflow์™€ Repaint๋ฅผ ์ดํ•ด ํ•œ๋‹ค๋ฉด ๋” ๋‚˜์€ ์„ฑ๋Šฅ ๊ฐœ์„ ์„ ์ด๋Œ์–ด ๋‚ผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—

ํŠนํžˆ, ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ์ด๊ฒƒ์— ๋Œ€ํ•œ ์ดํ•ด๋Š” ๊ผญ ํ•„์š”ํ•˜๋‹ค.

 

 

 

์ฐธ๊ณ 

https://developers.google.com/speed/docs/insights/browser-reflow?hl=ko 

 

๋ธŒ๋ผ์šฐ์ € ๋ฆฌํ”Œ๋กœ์šฐ ์ตœ์†Œํ™”  |  PageSpeed Insights  |  Google Developers

๋ธŒ๋ผ์šฐ์ € ๋ฆฌํ”Œ๋กœ์šฐ ์ตœ์†Œํ™” ์ปฌ๋ ‰์…˜์„ ์‚ฌ์šฉํ•ด ์ •๋ฆฌํ•˜๊ธฐ ๋‚ด ํ™˜๊ฒฝ์„ค์ •์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜์„ธ์š”. ์ž‘์„ฑ์ž: Lindsey Simon, UX ๊ฐœ๋ฐœ์ž ์ถ”์ฒœ ์ง€์‹: ๊ธฐ๋ณธ HTML, ๊ธฐ๋ณธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, CSS ์‹ค๋ฌด ์ง€

developers.google.com

 

 

'๐Ÿ”ŽWeb' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

SPA vs MPA (CSR, SSR)  (0) 2022.12.29
Comments