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);