repaint

    ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(reflow, repaint)

    1. reflow์™€ repaint์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.reflow์™€ repaint๋Š” ๋ชจ๋‘ ๋ Œ๋”๋ง๊ณผ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ™”๋ฉด์ด ๋ฆฌ๋žœ๋”๋ง ๋์„ ๋•Œ, ๊ฐ ์ƒํ™ฉ์— ๋”ฐ๋ผ reflow์™€ repaint๊ฐ€ ์ผ์–ด๋‚˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. reflow๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ์„ ๋‹ค์‹œ ๊ณ„์‚ฐํ•˜๋Š” ๊ณผ์ •์„ ์˜๋ฏธํ•˜๊ณ  repaint๋Š” ๊ณ„์‚ฐ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ํ™”๋ฉด์— ๋‹ค์‹œ ๊ทธ๋ฆฌ๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค. reflow๋Š” DOM์˜ ๊ตฌ์กฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜๊ฑฐ๋‚˜ ์š”์†Œ์˜ ํฌ๊ธฐ๋‚˜ ์œ„์น˜๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ ์ผ์–ด๋‚ฉ๋‹ˆ๋‹ค. repaint๋Š” ๋ ˆ์ด์•„์›ƒ์€ ๊ทธ๋Œ€๋กœ์ด๊ณ  ์ƒ‰์ƒ์ด๋‚˜ ๋ฐฐ๊ฒฝ ๋“ฑ์˜ ์Šคํƒ€์ผ๋งŒ ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋•Œ ์ผ์–ด๋‚ฉ๋‹ˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ์„ ๋‹ค์‹œ ๊ณ„์‚ฐํ•˜๋Š” reflow๊ฐ€ ์ผ์–ด๋‚˜๋ฉด repaint๊ฐ€ ํ•„์—ฐ์ ์œผ๋กœ ์ผ์–ด๋‚˜๊ธฐ๋„ ํ•˜๊ณ , reflow๋Š” ๋น„์šฉ์ด ๋” ๋“ค๊ธฐ ๋•Œ๋ฌธ์— ๋ ˆ์ด์•„์›ƒ ๊ณ„์‚ฐ์ด ๋‹ค์‹œ ์ผ์–ด๋‚˜์ง€ ์•Š๋„๋ก ๊ด€๋ฆฌ..