반응형
브라우저
-
[WEB] 브라우저는 어떻게 렌더링할까?Front-end/Web 2020. 5. 4. 22:03
웹 어플리케이션을 개발하다보면 DOM(Document Object Model)을 참조하거나 부득이하게 변경할 때가 있다. 이 때문에 "DOM은 정체"와, 퍼포먼스의 이유로 "브라우저는 어떻게 렌더링"의 과정이 궁금해지게 된다. 자주 쓰고 있는 웹이든 Vue.js든 본인이 사용하는 기술의 Lifecycle을 이해하는 것은 중요하다고 생각한다. 브라우저의 구성 요소 그림1처럼 브라우저는 구성되어 있다. 네트워크를 가르쳐주시는 교수님 또는 책에서 종종 쓰는 Top-down 방식으로 보면 우리가 접하는 UI 레이어부터 이 UI의 백엔드까지 내려오게 된다. 이번 포스트에서는 브라우저의 렌더링 과정을 다룰 예정이므로, 구성 요소 중 렌더링 엔진이 주인공이다. 브라우저의 렌더링 엔진은 요청한 컨텐츠를 표시한다. 예를..