728x90
๋ฐ˜์‘ํ˜•

2025/06/20 1

[js] requestAnimationFrame()์˜ ๋‚ด๋ถ€ ๋™์ž‘ ์›๋ฆฌ

โœ… requestAnimationFrame()์˜ ๋‚ด๋ถ€ ๋™์ž‘ ์›๋ฆฌ๐Ÿ“Œ ๋™์ž‘ ์ˆœ์„œJavaScript๊ฐ€ requestAnimationFrame(callback)์„ ํ˜ธ์ถœํ•˜๋ฉด,๋ธŒ๋ผ์šฐ์ €๋Š” ๋‹ค์Œ ํ”„๋ ˆ์ž„์„ ๋ Œ๋”๋งํ•˜๊ธฐ ์ง์ „(callback์„ ํ์— ๋„ฃ๊ธฐ ์ „) ํƒ€์ด๋ฐ์—,callback์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.๋ธŒ๋ผ์šฐ์ €๋Š” ๋ณดํ†ต 1์ดˆ์— 60๋ฒˆ ํ™”๋ฉด์„ ๊ทธ๋ฆฌ๋ฏ€๋กœ(60fps), ๋Œ€๋žต 16.67ms๋งˆ๋‹ค ํ•œ ๋ฒˆ์”ฉ callback์ด ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ๋ฃจํ”„์™€ ๋™๊ธฐํ™”๋˜์–ด DOM ๋ณ€ํ™”๋‚˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๊ฐ€์žฅ ์ž์—ฐ์Šค๋Ÿฝ๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.๐Ÿง  ์–ธ์ œ ์‹คํ–‰๋˜๋Š”๊ฐ€?ํ™”๋ฉด์ด ํ™œ์„ฑ ์ƒํƒœ์ผ ๋•Œ๋งŒ ์‹คํ–‰๋จ→ ํƒญ์ด ๋น„ํ™œ์„ฑํ™”๋˜๋ฉด ์ผ์‹œ ์ค‘์ง€๋จ → CPU ๋‚ญ๋น„ Xํ”„๋ ˆ์ž„ ์Šค์ผ€์ค„์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ์‹คํ–‰ ํƒ€์ด๋ฐ์ด ์กฐ์ ˆ๋จ → setTimeout๋ณด๋‹ค ์ •ํ™•ํ•œ ํƒ€์ด๋ฐ๐Ÿงช..

Front/JS & jQuery 2025.06.20
728x90
๋ฐ˜์‘ํ˜•