DEV

2022-03-17 11:32

JS Asynchronous

Promise

Promise์™€ ๊ฐ™์€ ๋น„๋™๊ธฐ ์ž‘์—…์€ eventQueue์— ๋“ค์–ด๊ฐ„๋‹ค.
main thread๊ฐ€ ๋๋‚œ ํ›„ ์‹คํ–‰๋˜์–ด Javascript์˜ block ํ˜„์ƒ์„ ๋ง‰๋Š”๋‹ค.
queued๋œ ์ž‘์—…๋“ค์€ ๊ฐ€๋Šฅํ•œ ๋นจ๋ฆฌ ์‹คํ–‰๋˜์–ด Javascript ํ™˜๊ฒฝ์œผ๋กœ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ค€๋‹ค.

Worker

๋ถ„๋ฆฌ๋œ thread์—์„œ ํƒœ์Šคํฌ๋“ค์„ ์‹คํ–‰ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•œ๋‹ค.
ํ•˜์ง€๋งŒ ์—ฌ๋Ÿฌ thread๋ฅผ ๋™์‹œ์— ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๋™์‹œ์„ฑ์„ ๋ณด์žฅํ•˜๊ธฐ ์–ด๋ ต๋‹ค.
๋”ฐ๋ผ์„œ ์ด๋Ÿฌํ•œ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋ฅผ ๋ง‰๊ธฐ ์œ„ํ•ด์„œ main ์ชฝ ์ฝ”๋“œ์™€ worker์˜ ์ฝ”๋“œ๋Š” ์™„๋ฒฝํžˆ ๋ถ„๋ฆฌ๋˜์–ด์•ผ ํ•œ๋‹ค. ๊ฐ™์€ ๋ณ€์ˆ˜๋ฅผ ๊ณต์œ ํ•˜๋ฉด ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๊ฐ€ ์ผ์–ด๋‚œ๋‹ค.

์ข…๋ฅ˜

  • Shared Worker
  • Dedicated Worker
  • Service Worker

Animation

element.animate();

์˜ˆ์‹œ

const aliceTumbling = [
  { transform: 'rotate(0) scale(1)' },
  { transform: 'rotate(360deg) scale(0)' }
];

const aliceTiming = {
  duration: 2000,
  iterations: 1,
  fill: 'forwards'
}

const alice1 = document.querySelector("#alice1");
const alice2 = document.querySelector("#alice2");
const alice3 = document.querySelector("#alice3");

alice1.animate(aliceTumbling, aliceTiming);