[Web] ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ๋ํ์ฌ Part 2
ยท
โผ FrontEnd/Web & HTML, CSS
์ด๋ฒ ํฌ์คํธ๋ ์ ๋ฒ ํฌ์คํธ์ ์ด์ด ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ํ์ดํ๋ผ์ธ(์ดํ ๋ ๋๋ง ํ์ดํ๋ผ์ธ)์ Pre-Paint ๊ณผ์ ๋ถํฐ ์ด์ด ์ค๋ช
ํด๋ณด๊ฒ ์ต๋๋ค. ํฌ์คํธ ์์ฑ์ด ๋ฆ์ด์ง ์ด์ ๋, ์ฌ๋ฟ ์์ง๋ง, ์ฐ์ ์ ๊ฐ ์ฌํ์ ๋ค๋
์๊ณ , ์ฝ๋ฉํ
์คํธ ์บ ํ ์ฐธ์ฌ ๋ฐ ํ๋ก๊ทธ๋๋จธ์ค ๋ฐ๋ธ์ฝ์ค ์ ๋ฐ ์ค๋น ๋ฑ ์ฌ๋ฌ ์ผ๋ค์ ๊ฐ์ด ํ๋ค ๋ณด๋ ๊ธฐ์ ๊ณต๋ถ ๋ฐ ํฌ์คํธ ์์ฑ์ด ๋ฏธ๋ค์ก๊ธฐ ๋๋ฌธ์
๋๋ค.๋ณ๋ช
์ ์ด ์ฏค๋ง ํ๊ณ ..ใ
ใ
์์ํด ๋ณด๊ฒ ์ต๋๋ค. ๋จผ์ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ๊ณผ์ ์ ๋ค์ ์คํด๋ด
์๋ค.1. Parse: HTML์ ํ์ฑํ์ฌ DOM ํธ๋ฆฌ ๊ตฌ์ถ2. Style: CSS๋ฅผ ํ์ฑํ์ฌ CSSOM ํธ๋ฆฌ ๊ตฌ์ถ (+ JS ํ์ฑ)3. Layout: DOM ํธ๋ฆฌ์ CSSOM ํธ๋ฆฌ๋ฅผ ๊ฒฐํฉํด Layer Tree ๊ตฌ์ถ4. Pre-Paint: ์ค์ ์น ํด์ผ ํ ๋
ธ๋๋ค๋ง์ ์ถ๋ฆฌ๋..