Input + Output = True
๋ ๋๋ง ์ต์ ํ] ๋ฆฌํ๋ก์ฐ ๋ฆฌํ์ธํธ (Reflow Repaint) ๋ณธ๋ฌธ
๐ ๋ ๋๋ง ์ต์ ํ] ๋ฆฌํ๋ก์ฐ ๋ฆฌํ์ธํธ (Reflow Repaint)
๋ฆฌํ๋ก์ฐ์ ๋ฆฌํ์ธํธ๋ฅผ ์๊ธฐ ์ํด
๋จผ์ ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๋ฐฉ์์ ๊ฐ๋จํ๊ฒ ์์๋ณด์.
โ ๊ธฐ์กด DOM ๋ ๋๋ง ๋ฐฉ์ (๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๋ฐฉ์)
- ๋ธ๋ผ์ฐ์ ๋ ์๋ฒ๊ฐ ๋ณด๋ด์ค HTML ํ์ผ, CSS ํ์ผ์ ํด์(Parsing)ํ์ฌ DOM ํธ๋ฆฌ, CSSOM ํธ๋ฆฌ๋ฅผ ๋ง๋ ๋ค.
- DOM ํธ๋ฆฌ + CSSOM ํธ๋ฆฌ๋ฅผ ๊ฒฐํฉํด Render ํธ๋ฆฌ๋ฅผ ๋ง๋ ๋ค.
- Render ํธ๋ฆฌ๋ก ๊ฐ ๋
ธ๋์ ์์น์ ํฌ๊ธฐ๋ฅผ ๊ณ์ฐํ ๋ ์ด์์(Layout)์ ๋ง๋ค๊ณ
๋ทฐํฌํธ(Viewport) ๋ด์์ ๊ฐ ๋ ธ๋๋ค์ ์์น์ ํฌ๊ธฐ๋ฅผ ๊ณ์ฐํ๋ค. - Layout ๊ณ์ฐ์ด ์๋ฃ๋๋ฉด ์์๋ค์ ํ๋ฉด์์ ์ค์ ํฝ์ ๋ก ๋ณํํ๊ณ , ๋ ์ด์ด๋ฅผ ๋ง๋๋ ํ์ธํธ(Paint)๋ฅผ ํ๋ค.
- ์์ฑ๋ ๋ ์ด์ด๋ฅผ ํฉ์ฑํด์ ์ค์ ํ๋ฉด์ ๋ํ๋ธ๋ค. (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 |
---|