ํ์ผ์ ๋ธ๋ผ์ฐ์ ์์ ๋๋๋ง ์๋ฆฌ๋ฅผ ์๊ธฐ์ ์๋ ๋จ์ด๋ฅผ ์์์ผ ํฉ๋๋ค.
๋ธ๋ผ์ฐ์ ๊ฐ ํ๋์ ํ๋ฉด์ ๊ทธ๋ ค๋ด๋ ๊ณผ์ ์ ์ค์ ๋๋๋ง ๊ฒฝ๋ก(Critical Rendering Path)
๋ผ๊ณ ํฉ๋๋ค.
Webkit์ ์ ํ์ด ์คํ์์ค๋ก ๊ฐ๋ฐํ ์น ๋ ๋๋ง ์์ง
์ผ๋ก ์ฌํ๋ฆฌ
, ํฌ๋กฌ
๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉํฉ๋๋ค.
ํฌ๋กฌ
์ Webkit ์ง์์ ์ค๋จํ๊ณ ๊ธฐ๋ฐ์ผ๋ก ์ ์ํ Blink๋ฅผ ์ฌ์ฉํฉ๋๋ค.
Gecko๋ ๋ชจ์ง๋ผ ์ฌ๋จ์์ ๊ฐ๋ฐํ ์น ๋ ๋๋ง ์์ง
์ผ๋ก Firefox ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉํฉ๋๋ค.
๋ธ๋ผ์ฐ์ ์์ ๋๋๋ง ์๋ฆฌ๋ ์๋์ ๊ฐ์ต๋๋ค.
์๋ฒ๋ก ๋ถํฐ ์๋ต ๋ฐ์ HTML ํ์ผ์ ํ๋ํ๋ ํ์ฑํ๊ธฐ ์์ํ๋ฉด์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฐ์ดํฐ๋ฅผ ํ๋ฉด์ ๊ทธ๋ฆฌ๋ ๊ณผ์ ์ด ์์๋ฉ๋๋ค.
โjavascript๋ฅผ ๋ง๋๋ฉด ํด๋น ํ์ผ์ ๋ฐ์์์ ์คํํ ๋๊น์ง
ํ์ฑ์ด ๋ฉ์ถฅ
๋๋ค.โ
ํ๋ฉด์ ๋ณด์ด๋ ์์ ๊ฐ๊ฐ์ด ์ด๋์ ์ด๋ป๊ฒ ์์นํ ์ง๋ฅผ ์ ํด์ฃผ๋ ๊ณผ์ ์
Webkit์์๋ โ
layout
โ์ผ๋ก, Gecko์์๋ โreflow
โ๋ก ๋ถ๋ฅด๊ณ ์์ต๋๋ค.
๋ง์ฝ Render Layer๊ฐ 2๊ฐ ์ด์์ด๋ผ๋ฉด ๊ฐ๊ฐ์ Layer๋ฅผ paintํ ๋ค ํ๋์ ์ด๋ฏธ์ง๋ก Compositeํ๋ ๊ณผ์ ์ ์ถ๊ฐ๋ก ๊ฑฐ์น ๋ค์ ์ค์ ๋ก ํ๋ฉด์ ๊ทธ๋ ค์ง๊ฒ ๋๋๋ฐ ์ด ๊ณผ์ ์
โ
repaint
โ์ด๋ผ ๋ถ๋ฆ ๋๋ค.
๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ๊ณผ์ ์ ์ดํดํ๋ฉด reflow์ repaint๋ฅผ ์ค์ฌ ์ฑ๋ฅ์ ๋์ด๊ฑฐ๋, ๋ถํ์ํ ์ฑ๋ฅ ์ ํ๋ฅผ ์ค์ฌ ์ต์ ํ
๋ฅผ ํด์ค์ผ ํฉ๋๋ค.
6๋ฒ Render Tree ๊ณผ์ ์์ ํ๋ฉด์ ๋ณด์ด๋ ์์ ๊ฐ๊ฐ์ด ์ด๋์ ์ด๋ป๊ฒ ์์นํ ์ง๋ฅผ ์ ํด์ฃผ๋ ๊ณผ์ ์ ๊ฒช์๋ ํ๋ฒ ํธ์ถ๋๋๋ฐ, ์ต์ด ํ๋ฒ ์คํ๋๊ณ , ์ดํ์ ์์๋ค์์ ๋ ์ด์์์ ์ํฅ์ ์ฃผ๋ ๋ณํ๊ฐ ์๊ธธ๋ ๋ค์ Render Tree๋ฅผ ๊ตฌ์ฑํ๋ค.
// bad
// ์ด ์ฝ๋๋ Render Tree๋ฅผ ๋ฐ๋ณตํด์ ์์ ํ๊ธฐ ๋๋ฌธ์ ์ต์ ํ๊ฐ ๋์ด์์ง ์๋ค.
const ulElement = document.getElementsByTagName('ul')[0];
for(let i=0; i<10; i++) {
ulElement.innerHTML += `<li> list${i} </li>`;
}
// good
const ulElement = document.getElementsByTagName('ul')[0];
let strHtml = ulElement.innerHTML;
for(let i=0; i<10; i++) {
strHtml += `<li> list${i} </li>`;
}
ulElement.innerHTML = strHtml;
์ฌ๋ฌ๊ฐ์ ์๋ฆฌ๋จผํธ๊ฐ ์ถ๊ฐ๋ ๋, ์์ ๊ฐ์ด ๊ฐ์์ ํํ๋ก ์ถ๊ฐํ ์๋ฆฌ๋จผํธ๋ฅผ ๊ตฌ์ฑํ๊ณ ํ๋ฒ์ ์์ ํด์ reflow๋ฅผ ์ค์ผ ์ ์๋ค.
๋ง์ฝ Render Layer๊ฐ 2๊ฐ ์ด์์ด๋ผ๋ฉด ๊ฐ๊ฐ์ Layer๋ฅผ paintํ ๋ค ํ๋์ ์ด๋ฏธ์ง๋ก Compositeํ๋ ๊ณผ์ ์ ์ถ๊ฐ๋ก ๊ฑฐ์น ๋ค์ ์ค์ ๋ก ํ๋ฉด์ ๊ทธ๋ ค์ง๊ฒ ๋๋๋ฐ ์ด ๊ณผ์ ์ repaint๋ผ๊ณ ํ๋ค.
ํ๋ง๋๋ก. Layer๋ฅผ paintํ๋๋ฐ ๋ค์ paint๋ฅผ ํด์ผํ๋ ๊ณผ์ ์ด ์๊ธฐ๋ ๊ฒฝ์ฐ ์ต์ ํ
๊ฐ ๋์ด์์ง ์๋ค๊ณ ํ ์ ์๋ค.
๋ ์์ธํ ๋ด์ฉ์ ํ๋ก ํธ์๋ ๋ก๋๋งต ์คํฐ๋ - 1ํธ ์ธํฐ๋ท ๋ถ๋ถ์ ์ฐธ์กฐ!