자바스크립트 실행 최적화

JavaScript는 시각적 변경사항을 트리거하는 경우가 많습니다. 스타일 조작을 통해 직접 변경되는 경우도 있고, 데이터 검색이나 정렬과 같이 시각적 변경사항을 초래하는 계산을 통해 변경되는 경우도 있습니다. 타이밍이 잘못되거나 오래 실행되는 JavaScript는 성능 문제의 일반적인 원인입니다. 가능한 한 영향을 최소화해야 합니다.

JavaScript는 시각적 변경사항을 트리거하는 경우가 많습니다. 스타일 조작을 통해 직접 변경되는 경우도 있고, 데이터 검색이나 정렬과 같이 시각적 변경사항을 초래하는 계산을 통해 변경되는 경우도 있습니다. 타이밍이 잘못되었거나 장시간 실행되는 JavaScript는 성능 문제의 일반적인 원인입니다. 가능한 한 영향을 최소화해야 합니다.

작성한 JavaScript가 실제로 실행되는 코드와는 전혀 다르기 때문에 JavaScript 성능 프로파일링은 기술이 필요할 수 있습니다. 최신 브라우저는 JIT 컴파일러와 모든 종류의 최적화 및 트릭을 사용하여 최대한 빠른 실행을 제공하려고 시도하며, 이로 인해 코드의 동역학이 크게 달라집니다.

하지만 앱이 JavaScript를 잘 실행하도록 돕기 위해 할 수 있는 몇 가지 작업이 있습니다.

요약

• 시각적 업데이트에 setTimeout 또는 setInterval을 사용하지 마세요. 대신 항상 requestAnimationFrame을 사용하세요.
• 장기 실행 JavaScript를 기본 스레드에서 웹 작업자로 이동합니다.
• 마이크로 태스크를 사용하여 여러 프레임에 걸쳐 DOM을 변경합니다.
• Chrome DevTools의 타임라인 및 JavaScript 프로파일러를 사용하여 JavaScript의 영향을 평가합니다.

시각적 변경사항에 requestAnimationFrame 사용

화면에서 시각적 변경사항이 발생할 때 브라우저에 적합한 시점, 즉 프레임 시작 시점에 작업을 실행해야 합니다. JavaScript가 프레임 시작 시 실행되도록 보장하는 유일한 방법은 requestAnimationFrame를 사용하는 것입니다.

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

프레임워크나 샘플은 setTimeout 또는 setInterval를 사용하여 애니메이션과 같은 시각적 변경사항을 실행할 수 있지만, 이 경우 콜백이 프레임의 어느 시점(아마도 마지막)에 실행되므로 프레임을 놓쳐 버벅거림이 발생할 수 있습니다.