이벤트 루프 실행 관련

저는 풀스택 주니어입니다.

특수 목적을 위해 바닐라js에서 ,document.innerHTML이나 element.remove(), element.append() 등으로 html element의 생성과 삭제가 빈번한

로직을 다루고 있습니다.

이 때 종종 브라우저 렌더링의 실행 완료에 대해 명확하게 알지 못해서 찝찝한 채로 브라우저에 렌더링 일을 시키고 있습니다.

그러던 중 이벤트 루프 관련 3개 강의(16,17,18강) 를 듣고 복습차, 17강으로 다시 돌아와서 보는 2분18초 경에 브라우저 랜더링에 대해 궁금한게 생겼습니다.

예를 들면

const mySchedule = async () => {
 await randeringPipelineTask(); //랜더링파이프라인
 await macroTask(); // 매크로태스크();
}

으로 구성된 mySchedule 메서드가 있다고 가정하겠습니다.

macroTask()는 renderingPipelineTask()의 브라우저 페인트까지 모두 완료를 확인한 후에 실행될까요? 아니면 JS엔진이라는 것은, 페인트는 브라우저에 렌더링을 해달라고 부탁까지만하고 macroTask()를 실행할까요?

('실행의 시작'과 '실행의 끝'을 나눠서 생각해서 그런지 생각하면 할수록 햇갈립니다.)

안녕하세요, 인프런 AI 인턴입니다. 동군님.

질문하신 내용은 JavaScript의 이벤트 루프와 브라우저 렌더링 과정에서의 작업 순서에 대한 이해를 돕는 핵심적인 부분입니다. JavaScript 엔진과 브라우저가 어떻게 작업을 스케줄링하고 처리하는지를 이해하는 것이 코드 성능 최적화에 매우 중요합니다.

먼저 JavaScript의 이벤트 루프(event loop)는 태스크 큐에서 태스크를 하나씩 가져와 실행하는 구조입니다. 이 때, 브라우저 렌더링도 중요한 태스크 중 하나로 처리됩니다.

주요 개념 요약

Rendering Pipeline Task: JavaScript는 브라우저에게 DOM을 업데이트하도록 요청하고, 브라우저는 태스크가 끝난 후에 렌더링을 처리합니다. 이 과정에는 페인트(paint) 작업도 포함됩니다.
Macro Task: setTimeout, setInterval, requestAnimationFrame과 관련된 태스크들이 있습니다. 각 cycle 동안 하나의 macro task가 처리되고, 이 후에 micro task들이 실행됩니다.
페인트 작업: 브라우저는 JavaScript가 처리하고 있는 현재 상태 변화(예: DOM 변경)을 이용하여 새로운 화면을 그리기 위한 페인트 작업을 수행합니다. 이 단계는 JavaScript 실행과 비슷한 우선 순위를 가지지 않지만, 이벤트 루프 사이클 사이에서 발생합니다.

따라서 코드의 await renderingPipelineTask(); 부분은 브라우저에 페인트 요청을 보내는 작업일 수 있지만, 실제 렌더링은 이후 브라우저의 렌더링 엔진에 처리됩니다. 이후 await macroTask();를 실행할 때는 이미 태스크 큐의 다음 작업을 수행하는 것입니다. 따라서, macroTask는 renderingPipelineTask의 페인트가 완료된 후에 실행되지는 않을 수 있습니다. 브라우저 렌더링은 비동기적이며, JavaScript 엔진과 비동기적으로 동작합니다.

관련된 추가 설명을 제공한 실행 컨텍스트 깊이 파헤치기 질문을 참고하실 수 있습니다. 이 질문에서는 실행 컨텍스트와 관련된 여러 개념을 상세하게 설명하고 있습니다.

이해하는 데 조금 더 도움이 되셨기를 바랍니다. 계속해서 궁금한 점이 있으시면 추가 질문해 주세요!

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

주요 개념 요약