HTML 렌더링 중에 Javascript가 실행되면 멈추는 이유

HTML 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유는 브라우저의 동기적인 동작 방식 때문이다. 브라우저는 HTML 문서를 파싱하고 렌더링하는 동안 JavaScript 코드를 만나면 그 실행을 중지하고 해당 코드를 실행한다. 이로 인해 렌더링과 JavaScript 실행이 서로 번갈아가며 처리되게 된다.

JavaScript 코드가 실행되는 동안 브라우저는 렌더링에 대한 처리를 일시 중단한다. 이는 JavaScript 코드가 DOM 요소를 조작하거나 스타일을 변경하는 등의 작업을 수행할 때 발생하며, 이러한 작업이 완료될 때까지 렌더링은 중지된다. 이런 현상을 "렌더링 차단" 또는 "렌더링 차단 문제"라고 부른다.

이러한 동작 방식은 웹 페이지의 사용자 경험을 개선하기 위한 것이며, 만약 JavaScript 코드가 실행되는 동안 렌더링이 계속되면, 사용자가 페이지를 불안정하게 느낄 수 있고, 예측 불가능한 동작이 발생할 수 있다.

따라서 큰 작업을 처리하는 동안 렌더링을 차단하지 않는 방법을 사용하거나 비동기적인 코드 실행을 활용하여 사용자 경험을 개선하는 것이 좋다.