728x90
๋ฐ˜์‘ํ˜•

2025/06/19 1
[js] requestAnimationFrame()

requestAnimationFrame()์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹ค์Œ ํ™”๋ฉด์„ ๊ทธ๋ฆฌ๊ธฐ ์ง์ „์— ์‹คํ–‰ํ•  ์ฝœ๋ฐฑ์„ ์˜ˆ์•ฝํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.์ฃผ๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ฒ˜๋ฆฌ๋‚˜ ๋ Œ๋”๋ง ํƒ€์ด๋ฐ์„ ์ •ํ™•ํ•˜๊ฒŒ ๋งž์ถ”๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. โœ… ๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•js requestAnimationFrame(() => { // ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹ค์Œ repaint ์ „์— ์‹คํ–‰ํ•  ์ฝ”๋“œ // DOM์ด ๋ Œ๋”๋ง๋œ ์ดํ›„์— ์•ˆ์ „ํ•˜๊ฒŒ ์‹คํ–‰๋จ});๐Ÿง  ๊ฐœ๋… ์š”์•ฝํ•ญ๋ชฉ์„ค๋ช…์‹คํ–‰ ์‹œ์ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹ค์Œ ํ”„๋ ˆ์ž„์„ ๊ทธ๋ฆฌ๊ธฐ ์ง์ „ํ˜ธ์ถœ ๋นˆ๋„์ผ๋ฐ˜์ ์œผ๋กœ ์ดˆ๋‹น 60ํšŒ (60fps)์ฃผ ๋ชฉ์ ๋ถ€๋“œ๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜ / ๋ Œ๋”๋ง ์ดํ›„ DOM ์กฐ์ž‘์ด์ setTimeout๋ณด๋‹ค ๋ถ€๋“œ๋Ÿฝ๊ณ  ํšจ์œจ์ ์ด๋ฉฐ, ๋ Œ๋”๋ง ํƒ€์ด๋ฐ ๋ณด์žฅ ๐ŸŽฏ ์–ธ์ œ ์‚ฌ์šฉํ•˜๋‚˜?DOM ๋ณ€๊ฒฝ ์งํ›„ ํ›„์† ์ฒ˜๋ฆฌ์˜ˆ: innerHTML ๋˜๋Š” .append() ํ›„ ํŠน์ • ์š”์†Œ..
Front/JS & jQuery 2025.06.19
1
๋”๋ณด๊ธฐ
728x90
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”