Browser Rendering Process
๐ค๐ฉถ์ฉ์ด ๋จผ์ ์ ๋ฆฌํ๊ธฐ!๐ฉถ๐ค
๐ฉถํ์ฑ(parsing): ํ ์คํธ์ ๋ฌธ์์ด์ ๋ถํดํ๊ณ ๊ตฌ์กฐ๋ฅผ ์์ฑํ๋ ์ผ๋ จ์ ๊ณผ์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ฌธ๋ฒ์ ๋ง๊ฒ ์์ฑ๋ ํ ์คํธ ๋ฌธ์๋ฅผ ์ฝ๊ณ , ์คํํ๊ธฐ ์ํ ๊ณผ์
๐คRendering: HTML, CSS, JS๋ก ์์ฑ๋ ๋ฌธ์๋ฅผ ํ์ฑํ์ฌ ๋ธ๋ผ์ฐ์ ์ ์๊ฐ์ ์ผ๋ก ์ถ๋ ฅํ๋ ๊ฒ
๐ฉถํ ํฐ: ๋ฌธ๋ฒ์ ์ผ๋ก ๋ ์ด์ ๋๋ ์ ์๋ ๊ธฐ๋ณธ์ ์ธ ์ธ์ด ์์
๐คnode: ๋ฐ์ดํฐ ํต์ ๋คํธ์ํฌ ๋ด์์ ๊ต์ฐจ/์ฐ๊ฒฐ ์ง์ ( = ์ปดํจํฐ ๊ณผํ์ ์ฐ์ด๋ ๊ธฐ์ด์ ์ธ ๋จ์) ์ดํ DOM์ ๊ตฌ์ฑํ๋ ๊ธฐ๋ณธ ์์๊ฐ ๋๋ค.
๐ฉถDOM: HTML ๋ฌธ์๋ฅผ ํ์ฑํ ์๋ฃ๊ตฌ์กฐ ํํ์ ๊ฒฐ๊ณผ๋ฌผ HTML element๋ค์ treeํํ๋ก ํํํ ๊ฒ *์๋ฃ๊ตฌ์กฐ ํํ - ๋ ธ๋๋ค๋ก ๊ตฌ์ฑ๋ ํธ๋ฆฌ ์๋ฃ๊ตฌ์กฐ
โ
์นํ์ด์ง ๋น๋ ๊ณผ์ (๋ธ๋ผ์ฐ์ ๊ฐ ๋ ๋๋ง ํ๋ ๊ณผ์ )
1. DOM ํธ๋ฆฌ ์์ฑ
๋ฌธ์๋ฅผ ์ฝ์ด ๋ค์ฌ ๊ทธ๊ฒ์ ํ์ฑํ๊ณ ์ด๋ค ๋ด์ฉ์ ํ์ด์ง์ ๋ ๋๋งํ ์ง ๊ฒฐ์
Html ํ์ฑ & DOM ์์ฑ (๋ธ๋ผ์ฐ์ ) html ํ์ผ ์์ฒญ (์๋ฒ) HTML ํ์ผ์ ์ฝ์ด ๋ค์ฌ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ ํ ๋ฐ์ดํธ๋ก ์๋ต (๋ธ๋ผ์ฐ์ ) metaํ๊ทธ์ charset attribute๋ก ์ง์ ํด ๋ ์ธ์ฝ๋ฉ ๋ฐฉ์(ex. UTF-8)์ ๊ธฐ์ค์ผ๋ก ๋ฌธ์์ด๋ก ๋ณํ 'ํ ํฐ(token)'๋ค๋ก ๋ถํด ํ ํฐ๋ค์ ๊ฐ์ฒด๋ก ๋ณํํ์ฌ ๋ ธ๋ ์์ฑ ์ค์ฒฉ๊ด๊ณ๊ฐ ํ์ฑ๋์ด ํธ๋ฆฌ ์๋ฃ๊ตฌ์กฐ๋ฅผ ๊ตฌ์ฑ โ DOM
HTML ๋ฌธ์ ๋ด์์ <style></style> ๋ง๋๋ฉด โ CSS ํ์ฑ & CSSOM ์์ฑ ๋ ๋๋ง ์์ง์ ์์์๋ถํฐ ์์ฐจ์ ์ผ๋ก ํ์ฑํ๋ฉฐ DOM์ ์์ฑํ๋ค. ์ด๋, ์ค๊ฐ์ CSS๋ฅผ ๋ก๋ํ๋ link๋ style ํ๊ทธ๋ฅผ ๋ง๋๋ฉด DOM ์์ฑ์ ์ผ์ ์ค๋จ. ๊ทธ ํ HTML๊ณผ ๋์ผํ ํ์ฑ๊ณผ์ ์ ๊ฑฐ์ณ CSSOM(CSS Object Model)์ ์์ฑ. ํ์ฑ์ด ์๋ฃ๋๋ฉด HTML ํ์ฑ์ด ์ค๋จ๋ ์์ ์ผ๋ก ๋์๊ฐ ๋ค์ HTML์ ํ์ฑ.
<script></script> ๋ง๋ ๋ โ JS ํ์ฑ & ์คํ ์์ค ์ฝ๋๋ฅผ ํ ํฐ์ผ๋ก ๋ถํด ๋ฐ ํ์ฑ โ AST(์ถ์์ ๊ตฌ๋ฌธ ํธ๋ฆฌ) ์์ฑ โ ๋ฐ์ดํธ์ฝ๋๋ฅผ ์์ฑ ๋ฐ ์คํ (์ธํฐํ๋ฆฌํฐ๊ฐ ์ฝ์ ์ ์๋๋ก)
โป ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ DOM์ด๋ CSSOM์ ๋ณ๊ฒฝํ๋ DOM API๊ฐ ์ฌ์ฉ๋ ๊ฒฝ์ฐ DOM์ด๋ CSSOM์ด ๋ณ๊ฒฝ ๋ณ๊ฒฝ๋ DOM๊ณผ CSSOM์ ๋ค์ ๋ ๋ ํธ๋ฆฌ๋ก ๊ฒฐํฉ๋๋ฉฐ ๋ฆฌ๋ ๋๋ง โ reflow(๋ ์ด์์ ๋ค์ ๊ณ์ฐ), repaint(์ฌ๊ฒฐํฉ๋ ๋ ๋ ํธ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ค์ ํ์ธํธ)
2. Render tree ์์ฑ
์ต์ข ๋ ๋๋ง ํธ๋ฆฌ ์ถ๋ ฅ DOM๊ณผ CSSOM์ ๋ ๋๋ง์ ์ํด ๋ ๋ ํธ๋ฆฌ(Render Tree)๋ก ๊ฒฐํฉ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ๋ ๋๋ง ๋๋ ๋ ธ๋๋ง์ผ๋ก ๊ตฌ์ฑ = ๋ณด์ด๋ ๊ฒ๋ง ํฌํจ ์ ์ธ) HTML meta ํ๊ทธ, CSS์ display: none ๋ฑ
HTML ์์์ ๋ ์ด์์(์์น์ ํฌ๊ธฐ)์ ๊ณ์ฐํ๋๋ฐ ์ฌ์ฉ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ํฝ์ ์ ๋ ๋๋ง ํ๋ ํ์ธํ ์ฒ๋ฆฌ์ ์ ๋ ฅ๋๋ค.
3. Layout
๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง์ ํ์๋๋ ๊ฐ ์์์ ํฌ๊ธฐ, ์์น ๊ณ์ฐ โ ๋ ธ๋ ๋ฐฐ์น
4. Paint
๋ ธ๋ UI ๊ทธ๋ฆฌ๊ธฐ = ์ค์ ํ๋ฉด์ ๊ทธ๋ฆฌ๊ธฐ
5. Composition
Render tree์ ์๋ node๋ฅผ ์์๋๋ก ๊ตฌ์ฑ
6. ์น ์ฌ์ฉ์์๊ฒ ๊ฒฐ๊ณผ ํ๋ฉด ์ถ๋ ฅ
#๏ธโฃ๊ฐ์๋(Virtual Dom)
์ค์ DOM์ ๋ฉ๋ชจ๋ฆฌ์ ๋ณต์ฌํด๋ ๊ฒ
๊ฐ์๋์ ์ฌ์ฉํ๋ ์ด์
DOM ์กฐ์(์์ ๋์ด์ผ ํ ๋ถ๋ถ)์ HTML์์ element๋ฅผ ์ฐพ๊ณ ์ ๊ฑฐ๋ ํ ์์ ๋ element๋ก ๊ต์ฒดํ๋ค. ํธ๋ฆฌ์ ์๋ ์ ๋ณด๋ฅผ ์ ๋ฐ์ดํธ ์ํจ๋ค๋ ์ ์์ ๋ฌด๋ฆฌ ์๋ ์์ ์ ์๋๋ค. ํ์ง๋ง ์ด ์์ ์ด ๋ฐ๋ณต๋๋ค๋ฉด ๋ฌด๊ฑฐ์์ง๋ค. (๋ฌธ์ ) ๊ทธ๋์ ์ง์ ๋ธ๋ผ์ฐ์ ์ ์ ๊ทผํ๋ ๊ฒ์ด ์๋ ๋ณต์ฌ๋ณธ์ธ ๊ฐ์๋์ ์ฌ์ฉํ์ฌ ํจ์จ์ฑ์ ๋์ธ๋ค.
์๋ ๋ฐฉ์
state๊ฐ ๋ณ๊ฒฝ๋๋ฉด ๊ฐ์๋์ ๋ฆฌ๋ ๋๋ง๋๊ณ ์ด์ ์ ์๊ธด ๊ฐ์๋๊ณผ ๋น๊ตํ์ฌ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ์ค์ DOM์ ์ ์ฉ์ํจ๋ค. - ๋ณ๊ฒฝ๋ ๋ถ๋ถ์ ์ฐพ๋ ๊ณผ์ : Diffing - ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ์ค์ ๋์ ์ ์ฉ์์ผ ์ฃผ๋ ๊ฒ: ์ฌ์กฐ์ (reconciliation)
ํจ์จ์ ์ธ ์ด์
Batch Update: ๋ณ๊ฒฝ๋ ๋ชจ๋ Element๋ค์ ์ง๋จํ์์ผ ์ด๋ฅผ ํ๋ฒ์ ์ค์ DOM์ ์ ์ฉํ๋ ๋ฐฉ์
DOM์กฐ์์ ๋น์ฉ์ด ๊ฐ์ฅ ๋ง์ด ๋ฐ์ํ๋ ์ง์ ์ ๋ธ๋ผ์ฐ์ ์ ํ๋ฉด์ ๊ทธ๋ ค์ฃผ๋ ์์ ์ธ ๋งํผ Batch Update๋ ๋ณ๊ฒฝ๋ Element๋ฅผ ๋ณ๊ฐ๋ก ๊ทธ๋ ค์ฃผ๋ ๊ฒ์ด ์๋, ๋ณ๊ฒฝ๋ ๋ด์ฉ์ ํ ๋ฒ์ ๋ฐ์์ ์ด๋ฅผ ์ค์ DOM์ ํ๋ฒ์ ์ ์ฉ์์ผ์ค๋ค๋ ์ ์ด ํจ์จ์ ์ด๋ค.
์ ๋ฆฌ
์ด์ ๊ฐ์ DOM๊ณผ ๋น๊ตํ์ฌ ๋ณ๊ฒฝ๋ ๋ถ๋ถ์ ์๋ณ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง์ ์ค์ DOM์ ์ ์ฉ โ ํ์ํ ์ต์ํ์ DOM ์กฐ์๋ง์ ์ํ ์ด๋ ๋ถํ์ํ ์์ ์ ์ต์ํํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํค๋๋ฐ ๋์์ด ๋๋ค.
์ฐธ๊ณ ์ฌ์ดํธ
Last updated