본문 바로가기

💻 프론트엔드19

브라우저 렌더링 원리 모던 자바스크립트 딥다이브 스터디 간략하게 HTML과 CSS 등 리소스를 서버로부터 받으면, 브라우저의 렌더링 엔진에서 파싱한다. HTML을 파싱하면서 DOM트리와 CSSOM트리를 생성한다. DOM트리와 CSSOM트리를 결합헤서 Render 트리를 생성한 후, 레이아웃 작업과 페인팅 작업을 한다. 상세하게 브라우저 렌더링 엔진은 서버로부터 받은 HTML을 토큰(문법적 의미를 갖는 코드의 최소 단위)으로 분해한다. 각 토큰들을 객체로 변환하여 노드들을 생성한다. 각 노드들은 트리 자료구조를 가지고 있으며 이를 DOM이라고 부른다. HTML을 한 줄씩 파싱해나가다가 link태그나 style태그를 만나면 DOM생성을 일시중단하고 CSS파일을 서버에 요청한다. 요청받은 CSS파일 또는 style태그 안의 CSS.. 2023. 12. 27.

이전 1 2 3 4 다음

티스토리툴바