용어

• Rendering Engine(렌더링 엔진) : 요청 받은 내용을 브라우저에 표시하는 역할을 한다.

기본 원리

웹 브라우저는 사용자가 참조하고 싶은 웹 페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시한다.

• 웹 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 요청하고 받는다.
• HTML과 CSS파일은 파서(Parser)에 의해 파싱되어 DOM, CSSOM 트리로 변환된다.
• 렌더 트리로 결합된다.

JavaScript 처리

JavaScript는 자바스크립트 엔진이 처리한다.

• HTML 파서는 <script> 태그를 만나면 자바스크립트 코드를 처리하기 위해 DOM 생성 프로세스를 중단하고 자바스크립트 엔진에 제어 권한을 넘긴다.

• 자바스크립트 엔진은 <script> 내에 있는 자바스크립트 코드 또는 <script> 태그의 src에 정의된 자바스크립트 파일을 로드하여 파서에 의해 파싱하여 실행된다.

• 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 프로세스를 중지했던 시점부터 DOM 생성을 재개한다.

참고 : https://poiemaweb.com/js-browser