DOM์์ ํฝ์ ๊น์ง, ๋ธ๋ผ์ฐ์ ๋ ๋๋ง๊ณผ CRP ์์ ์ ๋ณต - [DOM ์์ ์ ๋ณต Part 3]
์ด ๊ฐ์๋ ๋ธ๋ผ์ฐ์ ๊ฐ HTML์ ๋ฐ์ DOM์ ๋ง๋ค๊ณ , CSSOM๊ณผ ๊ฒฐํฉํด ํ๋ฉด์ ํฝ์ ์ ๊ทธ๋ ค๋ด๋ Critical Rendering Path(CRP) ๊ณผ์ ์ ์ฒ์๋ถํฐ ๋๊น์ง ๋ค๋ฃน๋๋ค. ๋จ์ํ DOM ์กฐ์์ ๋์ด, CSS์ JS๊ฐ ์ฑ๋ฅ์ ์ด๋ค ์ํฅ์ ์ฃผ๋์ง, ์ด๋ฏธ์งยทํฐํธ ์ต์ ํ, Lazy Loading, Intersection Observer, ๊ฐ์ ๋ฆฌ์คํธ, ๊ทธ๋ฆฌ๊ณ DevTools ์ค์ต๊น์ง ์ด์ด์ง๋ฉฐ ์ค์ ์น ์ฑ๋ฅ์ ๋์ ๋๊ฒ ๊ฐ์ ํ ์ ์๋ ์ค์ ์ ๋ต์ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
์๊ฐ์ 109๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ํด๊ฒฐ
๋ ๋๋ง ์ฐจ๋จ ๋ฆฌ์์ค javascript ์คํ์ ๊ด๋ จํด์ ์ง๋ฌธ ์์ต๋๋ค.
์๋ ํ์ธ์? ์์ ์ ๋ฃ๋ค ์ง๋ฌธ์ด ์์ด์ ๋จ๊ธฐ๊ฒ ๋์ต๋๋ค!๋ธ๋ผ์ฐ์ ๊ฐ ๋ ๋๋ง ๊ณผ์ ์ด DOM & CSSOM -> Render Tree -> layou
HTML/CSSjavascriptdomfrontendeddie
ใป
25์ผ ์
0
48
2
- ํด๊ฒฐ
๋ ๋๋ง ์ฐจ๋จ ๋ฆฌ์์ค ๊ด๋ จํด์ CSS ์ง๋ฌธ์ด ์์ต๋๋ค.
์๋ ํ์ธ์? ์์ ์ ๋ฃ๊ณ ์์ต๋๋ค.๋ง์ฐํ๊ฒ ์๊ณ ์๋ ๋ ๋๋ง์ ๋ํด์ ์์ธํ ์ ์ ์์ด์ ์ ๋ง ๋ง์ ๋์์ด ๋๊ณ ์์ต๋๋ค.์์ ์ ๋ฃ๋ค ๋ณด๋ ๊ถ๊ธํ ๊ฒ์ด
HTML/CSSfrontendeddie
ใป
25์ผ ์
0
36
2
- ํด๊ฒฐ
์ง๊ธ ์ด ํ๋ฉด์์ ๋ญ๋ก fps๋ฅผ ์ ์ ์๋์?
<img src="https://cdn.inflearn.com/public/files/posts/3ee1b04b-ae32-48a3-970b-de2dd81f71af/b2b32b7f-22be-4d88-9ceb-13b19efaa494.png" media-type="img"
HTML/CSSjavascriptreactdomfrontendah young kim
ใป
6๋ฌ ์
0
141
2
- ํด๊ฒฐ
CSS๊น์ง๋ง ์ง์ฐ์ ์ํฅ์ ์ฃผ๋๊ฑด๊ฐ์?
์๋ ํ์ธ์~! ๊ถ๊ธํ ์ ์ด ์๊ฒจ ๋ฌธ์๋๋ฆฝ๋๋ค! DOM + CSSOM > Ren
HTML/CSSjavascriptreactdomfrontend์ ์์ง
ใป
7๋ฌ ์
0
75
2






