<모던자바스크립트 38장 브라우저의 렌더링 과정> TIL-49

  오늘 공부한 내용은 브라우저의 렌더링 과정이다. 나는 과거에 '인터넷 주소'라는 생각에 컴퓨터가 인터넷을 통해 해당 페이지에 직접 찾아간다고만 생각했었다. 하지만 실제로는 서버로부터 정보를 받아와서 내 컴퓨터가 그림을 그려주는 구조로 돌아간다는 것을 최근에 알게 되었고, 오늘 더 자세하게 어떤식으로 동작하는지도 알게 되었다. 브라우저는 렌더링 엔진과 자바스크립트 엔진을 통해 HTML, CSS, 자바스크립트를 파싱하여, DOM과 CSSOM을 통해 렌더링에 필요한 노드들로만 구성한 렌더트리를 구성하고, 레이아웃해서 페인팅하고 자바스크립트는 파싱하여 AST를 만들고 인터프리터가 실행시킬 수 있게 바이트코드로 변환하여 실행한다는 것을 알 수 있었다. 그리고 자바스크립트 코드에 DOM API를 사용하여 생성된 DOM과 CSSOM을 변경할 수 있다는것도 알게 되었다. 또한 렌더 트리의 노드들이 서로 부모 자식관계와 형제관계를 맺으면서 중첩적으로 돌아간다는 것도 알 수 있었다. 결국 크게 보면 여태까지 공부했던 자바스크립트의 스코프나 프로토타입의 구조와 별반 다르지 않은것 같다는 생각이 들었다. 결국 서버로 부터 정보를 받아와서 그 정보들을 정리해서 컴퓨터 화면에 그려주는 구조고, 이 정보들은 서로 꼬리의 꼬리를 물고 있으니 말이다. 오늘 배운 내용들에 대해서 100% 정확하게 이해했다고는 말할 수 없지만 전체적으로 내가 여태까지 공부했던 것들이 실제로 어떻게 돌아가는지를 알게 된 공부였다. 물론 HTML과 CSS에 대해서는 추후 이 책을 다 본뒤에 공부할 예정이지만, 이 정도의 기초 지식을 가지고 들어간다면 HTML과 CSS를 이해하는데 큰 도움이 될 것이라고 생각한다.

 

2022.07.28 - [언어 공부 및 정리/자바스크립트[모던자바스크립트]] - 38장 브라우저의 렌더링 과정

38장 브라우저의 렌더링 과정