Blog, COLDSURF

🌊

💻

🎧

🎥

📖

📷

🧑🏻‍💻

JS Asynchronous

#js

Promise

비동기 작업인 Promise는 이벤트 큐에 쌓입니다.

메인 스레드의 작업이 모두 끝난 후, 비동기 함수는 JavaScript의 블로킹을 방지합니다.

큐에 쌓인 작업은 가능한 빨리 실행되며, 결과는 JavaScript 환경으로 반환됩니다.

Worker

Worker는 개별 스레드에서 작업을 실행할 수 있게 해줍니다.

하지만 많은 워커가 여러 스레드를 사용할 경우 동기화가 보장되지 않습니다.

따라서 메인 스레드의 코드와 워커 스레드의 코드는 이 문제를 방지하기 위해 독립적으로 작성되어야 합니다.

메인 스레드의 코드와 워커 스레드의 코드가 동일한 변수를 공유하면 부작용이 발생할 수 있습니다.

워커의 종류

Shared Worker

Dedicated Worker

Service Worker

애니메이션


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