JS - 렌더링

브라우저의 렌더링 과정

1. 브라우저는 HTML, CSS, jS 등 렌더링에 필요한 리소스를 요청 -> 서버로부터 응답
2. 브라우저의 렌더링 엔진은 서버로부터 응담된 HTML과 CSS를 *파싱하여 DOM, CSSOM을 생성하고 결합하여 렌더 트리를 생성
3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱 AST 생성 바이트코드(?)로 변환, 이때 자바스크립트는 DOM API를 통해 DOM과 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.
4. 렌더트리를 기반으로 HTML 요소의 레이아웃을 계싼 후 브라우저 화면에 HTML 요소를 페인팅

파싱 : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들이기 위해 텍스트 문서의 문자열 토큰으로 분해. 쉽게 해석이라고 생각하면 된다.

뭔가 이해가 안되는 것 같아서 다시 찾아봤다....

브라우저의 동작 원리
1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.)
3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정)
4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.)
5. 개별 노드를 화면에 페인트한다.(or 래스터화)

참고 자료 : 모던 자바스크립트 딥 다이브
참고 자료 : https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/main/FrontEnd#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC