ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ๊ณผ์ • & Render Tree์™€ DOM Tree์˜ ์ฐจ์ด์ 
    ๊ฐœ๋ฐœ 2022. 3. 15. 20:36

    ๐ŸŒฒ ๋ Œ๋”๋ง ํŠธ๋ฆฌ ์ƒ์„ฑ ๊ณผ์ •

     

    1.  ๊ฐ์ฒด ๋ชจ๋ธ (Object Model) ์ƒ์„ฑ

    << DOM ๊ฐ์ฒด๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ณผ์ • >>

     

    DOM ๊ฐ์ฒด๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ณผ์ •

    1. ๋ณ€ํ™˜
      HTML ์ฝ”๋“œ๊ฐ€ ์žˆ์œผ๋ฉด ๋ Œ๋”๋ง ์—”์ง„์€ HTML์˜ ์›์‹œ ๋ฐ”์ดํŠธ๋ฅผ ๋””์Šคํฌ๋‚˜ ๋„คํŠธ์›Œํฌ์—์„œ ์ฝ์–ด์™€์„œ, ํ•ด๋‹น ํŒŒ์ผ์— ๋Œ€ํ•ด ๊ฐœ๋ณ„ ๋ฌธ์ž๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค.

    2. ํ† ํฐํ™”
      ๊ฐœ๋ณ„ ๋ฌธ์ž๋กœ ๋ณ€ํ™˜๋œ ๊ฒƒ์„ HTML5 ํ‘œ์ค€์œผ๋กœ ์ง€์ •๋œ ๊ณ ์œ  ํ† ํฐ์œผ๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค. ๊ฐ ํ† ํฐ์€ ๊ณ ์œ ํ•œ ์˜๋ฏธ์™€ ๊ทœ์น™์„ ๊ฐ€์ง„๋‹ค.
    3. DOM ์ƒ์„ฑ
      ๋งˆ์ง€๋ง‰์œผ๋กœ HTML ๋งˆํฌ์—…์ด ์—ฌ๋Ÿฌ ํƒœ๊ทธ ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ์ •์˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์„ฑ๋œ ๊ฐ์ฒด๋Š” ํŠธ๋ฆฌ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ๋‚ด์— ์—ฐ๊ฒฐ๋œ๋‹ค.
      ์ด ํŠธ๋ฆฌ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ์—๋Š” ๋งˆํฌ์—…์— ์ •์˜๋œ ์ƒ์œ„-ํ•˜์œ„ ๊ด€๊ณ„๋ฅผ ํฌํ•จํ•œ๋‹ค. (ex: HTML ๊ฐ์ฒด๋Š” body ๊ฐ์ฒด์˜ ์ƒ์œ„๋ผ๋Š” ๊ด€๊ณ„๋‹ค.)
      ์ด๋ ‡๊ฒŒ ๊ตฌ์„ฑ๋œ DOM ํŠธ๋ฆฌ๋Š” HTML ๋ฌธ์„œ ๋งˆํฌ์—…์˜ ์†์„ฑ๊ณผ ๊ฐ ๋…ธ๋“œ์˜ ๊ด€๊ณ„์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์ง€๋งŒ, ์•„์ง ์ด ์š”์†Œ๋“ค์ด ๋ Œ๋”๋ง ๋  ๋•Œ ์–ด๋–ป๊ฒŒ ํ‘œ์‹œํ• ์ง€์— ๋Œ€ํ•ด์„œ๋Š” ์•Œ ์ˆ˜๊ฐ€ ์—†๋‹ค. ์ด๋Š” CSSOM์˜ ์—ญํ• ์ด๋‹ค.

     

    << CSSOM ๊ฐ์ฒด๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ณผ์ • >>

     

    ๋ Œ๋”๋ง ์—”์ง„์ด HTML DOM์„ ์ƒ์„ฑํ•˜๋ฉด์„œ ์™ธ๋ถ€ CSS StyleSheet ํŒŒ์ผ์„ ์ฐธ์กฐํ•˜๋Š” <head> ์„น์…˜์—์„œ ๋งํฌ ํƒœ๊ทธ๋ฅผ ์ ‘ํ•˜๋ฉด, ์ด ๋ฆฌ์†Œ์Šค์—๋Œ€ํ•œ ์š”์ฒญ์„ ๋„คํŠธ์›Œํฌ ๋ ˆ์ด์–ด์— ์ฆ‰์‹œ ๋ฐœ์†กํ•˜๊ณ  ์š”์ฒญ์˜ ๊ฒฐ๊ณผ๋กœ css ํŒŒ์ผ์„ ์‘๋‹ต๋ฐ›๋Š”๋‹ค.
    HTML๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ˆ˜์‹ ๋œ CSS๊ทœ์น™์„ ๋ Œ๋”๋ง ์—”์ง„์ด ์ดํ•ดํ•˜๊ณ  ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•์‹์œผ๋กœ ๋ณ€ํ™˜ํ•ด์•ผ ํ•œ๋‹ค.

    HTML์ฒ˜๋Ÿผ CSS๋„ ๋ฐ”์ดํŠธ๊ฐ€ ๋ฌธ์ž๋กœ ๋ณ€ํ™˜๋˜๊ณ  -> ํ† ํฐ์œผ๋กœ ๋ณ€ํ™˜ -> ๋…ธ๋“œ๋กœ ๋ณ€ํ™˜ -> ๋งˆ์ง€๋ง‰์œผ๋กœ CSSOM์ด๋ผ๋Š” ํŠธ๋ฆฌ ๊ตฌ์กฐ์— ๋งํฌ๊ฐ€ ๋œ๋‹ค. CSSOM์ด ํŠธ๋ฆฌ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง€๋Š” ์ด์œ ๋Š”, ์ตœ์ƒ์˜ ๋…ธ๋“œ์—์„œ ํ•˜์œ„๋กœ ๋‚ด๋ ค๊ฐˆ์ˆ˜๋ก ๋”์šฑ ๊ตฌ์ฒด์ ์ธ ๊ทœ์น™์„ ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

    ์ฆ‰, ์Šคํƒ€์ผ์„ ํ•˜ํ–ฅ์‹์œผ๋กœ ๊ตฌ์ฒดํ™”ํ•œ๋‹ค. ๋˜ ์—ฌ๊ธฐ์„œ ๊ตฌ์„ฑ๋œ CSSOM ํŠธ๋ฆฌ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์Šคํƒ€์ผ์‹œํŠธ์—์„œ ์ •์˜ํ•˜๋„๋ก ์ง์ ‘ ์ž‘์„ฑํ•œ ์Šคํƒ€์ผ๋งŒ ํ‘œ์‹œ๊ฐ€ ๋œ๋‹ค.

     

     

    2. Rendering Tree ๊ตฌ์ถ•, ๋ฐฐ์น˜, ๊ทธ๋ฆฌ๊ธฐ

    DOM ํŠธ๋ฆฌ์™€ CSSOM ํŠธ๋ฆฌ๋Š” ๋…๋ฆฝ์ ์ธ ๊ฐ์ฒด๋‹ค. ์ด ๋‘ ๊ฐ€์ง€๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ๋ Œ๋”๋ง ํŠธ๋ฆฌ๋ฅผ ํ˜•์„ฑํ•ด์•ผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ™”๋ฉด์— ํ”ฝ์…€์„ ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์žˆ๋‹ค.

     

    << ๋ Œ๋”๋ง ํŠธ๋ฆฌ ๊ตฌ์ถ• >>

    DOM ํŠธ๋ฆฌ์˜ ๋ฃจํŠธ์—์„œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ๋…ธ๋“œ๋งŒ ๋‚จ๊ธด๋‹ค. 
    ์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ๋‚˜ ๋ฉ”ํƒ€ ํƒœ๊ทธ ๊ฐ™์€ ์š”์†Œ๋Š” ๋ Œ๋”๋ง์— ๋ฐ˜์˜๋˜์ง€ ์•Š๊ณ , css์˜ display: none; ์†์„ฑ๋„ ๋ Œ๋”๋ง ํŠธ๋ฆฌ์— ํฌํ•จ๋˜์ง€ ์•Š๋Š”๋‹ค.
    ํ•˜์ง€๋งŒ visibility: hidden;์€ ๋ณด์ด์ง€๋Š” ์•Š์ง€๋งŒ ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ Œ๋”๋ง ํŠธ๋ฆฌ์— ํฌํ•จ๋œ๋‹ค.
    ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ๋ชจ๋“  ๋…ธ๋“œ์˜ ์ปจํ…์ธ  ๋ฐ ์Šคํƒ€์ผ ์ •๋ณด๋“ค์„ ํฌํ•จํ•˜๋Š” ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ง„ ๋ Œ๋”๋ง ํŠธ๋ฆฌ๊ฐ€ ์ตœ์ข…์ ์œผ๋กœ ๊ตฌ์ถ•๋œ๋‹ค.

     

    << ๋ Œ๋”๋ง ํŠธ๋ฆฌ ๋ฐฐ์น˜ >>

    ์‚ฌ์šฉ์ž์˜ ๋ทฐํฌํŠธ ๊ธฐ์ค€์œผ๋กœ ๋ Œ๋”๋ง ํŠธ๋ฆฌ๊ฐ€ ๊ทธ๋ ค์งˆ ์œ„์น˜์™€ ํฌ๊ธฐ๋“ค์„ ๊ณ„์‚ฐํ•˜๋Š” ๋‹จ๊ณ„์ด๋‹ค.
    ํŽ˜์ด์ง€์—์„œ ๊ฐ ๊ฐ์ฒด์˜ ์ •ํ™•ํ•œ ํฌ๊ธฐ์™€ ์œ„์น˜๋ฅผ ํŒŒ์•…ํ•˜๊ธฐ ์œ„ํ•ด ๋ Œ๋”๋ง ์—”์ง„์€ ๋‹ค์‹œ ๋ Œ๋”๋ง ํŠธ๋ฆฌ์˜ ๋ฃจํŠธ์—์„œ๋ถ€ํ„ฐ ๊ณ„์‚ฐ์— ๋“ค์–ด๊ฐ„๋‹ค.
    ๊ฐ ๋…ธ๋“œ๋“ค์˜ ์ •ํ™•ํ•œ ์œ„์น˜์™€ ํฌ๊ธฐ๊ฐ€ ๊ณ„์‚ฐ๋˜์–ด ๋ ˆ์ด์•„์›ƒ์ด ์™„๋ฃŒ๋˜๋ฉด ๋ Œ๋”๋ง ์—”์ง„์€ Paint Setup ๋ฐ Paint ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ๋‹ค.

     

    << ๋ Œ๋”๋ง ํŠธ๋ฆฌ ๊ทธ๋ฆฌ๊ธฐ >>

    ์ด ๊ณผ์ •์—์„œ ์Šคํƒ€์ผ์ด ๋ณต์žกํ•  ์ˆ˜๋ก ํŽ˜์ธํŒ…์— ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„์ด ๋Š˜์–ด๋‚œ๋‹ค. ์ด๋ ‡๊ฒŒ ๋ Œ๋”๋ง ๊ณผ์ •์„ ๊ฑฐ์น˜๊ฒŒ ๋˜๋ฉฐ ๋งŒ์•ฝ DOM์ด๋‚˜ CSSOM์ด ์ˆ˜์ •๋˜๋ฉด ํ™”๋ฉด์— ๋‹ค์‹œ ๋ Œ๋”๋งํ•  ํ•„์š”๊ฐ€ ์žˆ๋Š” ํ”ฝ์…€์„ ํŒŒ์•…ํ•˜๋ ค๋ฉด, ์ „๋ถ€ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋ฐ˜๋ณตํ•ด์•ผํ•œ๋‹ค.


    ๐ŸŽฌ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ • ( Browser Rendering Process )

    ์‚ฌ์šฉ์ž๊ฐ€ ์ฃผ์†Œํ‘œ์‹œ์ค„์— URL์„ ์ž…๋ ฅํ•˜๊ณ  ์—”ํ„ฐ๋ฅผ ์น˜๋Š” ์ˆœ๊ฐ„๋ถ€ํ„ฐ ๋ธŒ๋ผ์šฐ์ €์˜ ๊ฐ ์š”์†Œ๋Š” ์ƒํ˜ธ์ž‘์šฉ์„ ํ•˜๋ฉฐ ์›นํŽ˜์ด์ง€๋ฅผ ํ™”๋ฉด์— ๋„์šด๋‹ค.

     

    1. ๋ธŒ๋ผ์šฐ์ € ์—”์ง„์ด ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋กœ๋ถ€ํ„ฐ URI๋ฅผ ๋ฐ›์•„ ์ž๋ฃŒ ์ €์žฅ์†Œ๋ฅผ ์ฐพ๋Š”๋‹ค.

    ** URI ์™€ URL์˜ ์ฐจ์ด์  **
    URI: URI๋Š” ํŠน์ • ๋ฆฌ์†Œ์Šค๋ฅผ ์‹๋ณ„ํ•˜๋Š” ํ†ตํ•ฉ ์ž์› ์‹๋ณ„์ž(Uniform Resource Identifier)๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ์›น ๊ธฐ์ˆ ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋…ผ๋ฆฌ์  ๋˜๋Š” ๋ฌผ๋ฆฌ์  ๋ฆฌ์†Œ์Šค๋ฅผ ์‹๋ณ„ํ•˜๋Š” ๊ณ ์œ ํ•œ ๋ฌธ์ž์—ด ์‹œํ€€์Šค๋‹ค.
    URL: URL์€ ํ”ํžˆ ์›น ์ฃผ์†Œ๋ผ๊ณ ๋„ ํ•˜๋ฉฐ, ์ปดํ“จํ„ฐ ๋„คํŠธ์›Œํฌ ์ƒ์—์„œ ๋ฆฌ์†Œ์Šค๊ฐ€ ์–ด๋”” ์žˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ๊ธฐ ์œ„ํ•œ ๊ทœ์•ฝ์ด๋‹ค. URI์˜ ์„œ๋ธŒ์…‹์ด๋‹ค.

    ์‚ฌ์šฉ์ž๊ฐ€ ์ฃผ์†Œ์ฐฝ์— ์ž…๋ ฅํ•˜๋Š” ์ˆœ๊ฐ„ ๋ธŒ๋ผ์šฐ์ € ์—”์ง„์—๊ฒŒ ์ „๋‹ฌํ•˜๊ณ , ๋ธŒ๋ผ์šฐ์ € ์—”์ง„์€ ์ฃผ์†Œ ๊ฐ’์— ํ•ด๋‹นํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋จผ์ € ์ž๋ฃŒ ์ €์žฅ์†Œ์—์„œ ์ฐพ์•„๋ณธ๋‹ค.

    ์‚ฌ์šฉ์ž๊ฐ€ URI๋ฅผ ์ž…๋ ฅํ•  ๋•Œ๋งˆ๋‹ค ํ•ญ์ƒ ์„œ๋ฒ„๋กœ ๊ฐ€์„œ ๋˜‘๊ฐ™์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„ ์˜ค๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ, ๋ถˆํ•„์š”ํ•œ ํ†ต์‹ ์„ ์ค„์ด๊ธฐ ์œ„ํ•ด ์ž๋ฃŒ ์ €์žฅ์†Œ์— ์ž์ฃผ ๋ฐฉ๋ฌธํ•˜๋Š” ์‚ฌ์ดํŠธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•ด๋‘”๋‹ค. ์ด๊ฒƒ์„ ์บ์‹ฑ์ด๋ผ๊ณ  ํ•œ๋‹ค.

    ์บ์‹œ์— ๋Œ€ํ•ด ๋” ์•Œ์•„๋ณด๊ธฐ ์œ„ํ•ด ์ฐธ๊ณ ํ•  ๋งํฌ

     

    ๋”ฐ๋ผ์„œ, ๋ธŒ๋ผ์šฐ์ € ์—”์ง„์€ URI์— ํ•ด๋‹นํ•˜๋Š” ์ž๋ฃŒ๋ฅผ ์ž๋ฃŒ ์ €์žฅ์†Œ์—์„œ ์ฐพ๊ณ , ์žˆ์œผ๋ฉด ๊ทธ๋Œ€๋กœ ๋ Œ๋”๋ง ์—”์ง„์—๊ฒŒ ์ค€๋‹ค.

     

    2. ๋ Œ๋”๋ง ์—”์ง„์ด ๋ธŒ๋ผ์šฐ์ € ์—”์ง„ ๋˜๋Š” ๋„คํŠธ์›Œํฌ ๋ ˆ์ด์–ด๋กœ๋ถ€ํ„ฐ ์ž๋ฃŒ๋ฅผ ๋ฐ›๋Š”๋‹ค.

    ์บ์‹ฑ๋œ ์ž๋ฃŒ๊ฐ€ ์žˆ๋‹ค๋ฉด ? ๋ Œ๋”๋ง ์—”์ง„์€ ๋ธŒ๋ผ์šฐ์ € ์—”์ง„์œผ๋กœ๋ถ€ํ„ฐ ์ž๋ฃŒ๋ฅผ ๋ฐ›์•„ HTML, CSS, image ๋“ฑ์„ ํŒŒ์‹ฑ.

    ์บ์‹ฑ๋œ ์ž๋ฃŒ๊ฐ€ ์—†๋‹ค๋ฉด ? ์„œ๋ฒ„์— ์š”์ฒญํ•ด์„œ ์ž๋ฃŒ๋ฅผ ์ฐพ์•„์˜จ๋‹ค.

    ์ด ๊ฒฝ์šฐ ๋ Œ๋”๋ง ์—”์ง„์—๊ฒŒ ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ์ฃผ์†Œ๊ฐ’(URI)๋ฅผ ์ „๋‹ฌํ•˜๊ณ  ๋ Œ๋”๋ง ์—”์ง„์€ ํ†ต์‹  ๋ ˆ์ด์–ด์— ์ „๋‹ฌํ•œ๋‹ค.
    ํ†ต์‹  ๋ ˆ์ด์–ด๋Š” URI ์ฃผ์†Œ ๊ฐ’์œผ๋กœ ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ , ์‘๋‹ต์œผ๋กœ ์ฃผ์†Œ ๊ฐ’์— ํ•ด๋‹นํ•˜๋Š” HTML, CSS, JS ๊ฐ’์„ ๋ฐ›์œผ๋ฉด ๋ Œ๋”๋ง ์—”์ง„์—๊ฒŒ ์ค€๋‹ค.

     

    3. ๋ Œ๋”๋ง ์—”์ง„์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•ด์„๊ธฐ ๋ฐ ๋„คํŠธ์›Œํฌ์™€ ์†Œํ†ตํ•˜๋ฉฐ ๋ Œ๋”๋ง ๊ตฌ์กฐ๋ฅผ ๊ทธ๋ ค UI ๋ฐฑ์—”๋“œ์— ๋„˜๊ธด๋‹ค.

    UI ๋ฐฑ์—”๋“œ๋ž€?
    ๋ Œ๋”๋ง ์—”์ง„์—์„œ ์ƒ์„ฑ๋œ ๋ Œ๋” ํŠธ๋ฆฌ๋ฅผ ๋ธŒ๋ผ์šฐ์ €์— ๊ทธ๋ฆฌ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. (ํŽ˜์ธํŠธ ์ž‘์—…)

    ๋ Œ๋”๋ง ๊ณผ์ •์˜ ์ค‘์ถ” ์—ญํ• ์„ ํ•˜๋Š” ๋ Œ๋”๋ง ์—”์ง„์ด HTML๊ณผ CSS๋ฅผ ํŒŒ์‹ฑํ•˜์—ฌ ๋ Œ๋”๋ง ํŠธ๋ฆฌ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์นœ๋‹ค.
    ๋ Œ๋”๋ง ์—”์ง„์€ ๋ธŒ๋ผ์šฐ์ € ์—”์ง„์œผ๋กœ ๋ฐ›๊ฑฐ๋‚˜ ํ†ต์‹  ๋ ˆ์ด์–ด๋กœ๋ถ€ํ„ฐ ๋„˜๊ฒจ๋ฐ›์€ ๋ฆฌ์†Œ์Šค ์ค‘, HTML๊ณผ CSS๋Š” ์ง์ ‘ ํŒŒ์‹ฑํ•˜๊ณ , JS๋Š” ํฌ๋กฌ ๊ธฐ์ค€ V8์—”์ง„์œผ๋กœ ํŒŒ์„œ์—๊ฒŒ ์ „๋‹ฌํ•˜์—ฌ ํŒŒ์‹ฑํ•œ๋‹ค. ํŒŒ์‹ฑํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ Œ๋”๋ง ์—”์ง„์—๊ฒŒ ๋‹ค์‹œ ์ „๋‹ฌํ•˜์—ฌ, ํŒŒ์‹ฑํ•œ HTML์˜ ๊ฒฐ๊ณผ์ธ DOM Tree๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์กฐ์ž‘ํ•œ๋‹ค. ์กฐ์ž‘์ด ์™„๋ฃŒ๋œ DOM ํŠธ๋ฆฌ ๊ตฌ์„ฑ์š”์†Œ๋Š” ๋ Œ๋”๋ง ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ๋ณ€ํ™˜๋˜๊ณ , ์ด๋ ‡๊ฒŒ ์ตœ์ข…์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ Render Object๋ฅผ ๋ Œ๋”๋ง ์—”์ง„์ด UI ๋ฐฑ์—”๋“œ์— ์ฃผ์–ด์„œ ํ™”๋ฉด์— ํŽ˜์ธํŒ…ํ•ด์ค€๋‹ค.

     


    Render Tree์™€ DOM Tree์˜ ์ฐจ์ด์ 

    • Render Tree๋Š” DOM๊ณผ CSSOM์„ ํ•ฉํ•œ ํ›„์— ์ตœ์ข…์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ๊ธฐํ•  ๋…ธ๋“œ๋“ค๋งŒ ์„ ๋ณ„๋˜์–ด ํŠธ๋ฆฌ๊ฐ€ ์ƒ์„ฑ์ด ๋œ๋‹ค.
    • DOM์€ ๋ธŒ๋ผ์šฐ์ €์— ๋ณด์ด๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๊ณ  Render Tree๋Š” ๋ธŒ๋ผ์šฐ์ €์— ๋ณด์ด๋Š” ๊ฒƒ์ด๋‹ค.
    • ๋ทฐํฌํŠธ์— ๋ฌด์—‡์„ ๋ Œ๋”๋งํ• ์ง€ ๊ฒฐ์ •ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์ด DOM์ด๊ณ  Render Tree๋Š” ๋ทฐํฌํŠธ์— ๋ฌด์—‡์„ ๋ Œ๋”๋งํ• ์ง€ ๊ฒฐ์ •๋œ ์ตœ์ข…์ ์ธ ํŠธ๋ฆฌ๋‹ค.

     

Designed by Tistory.