본문 바로가기
Frontend

브라우저의 동작 원리 (렌더링 과정)

by dug_developer 2022. 6. 17.
반응형
요약
1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.)
3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정)
4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.)
5. 개별 노드를 화면에 페인트한다.

 

 

자세한 내용은 밑에 개인 노션에 정리한 것을 확인해주세요

 

https://sanghoon98.notion.site/4f0c03b5de584f1792310f8ba40d97c7

 

브라우저 렌더링 과정

v8 JS엔진으로 빌드된 JS런타임 환경인 Node.js의 등장으로 JS는 웹브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수있는 범용 개발 언어가 됨

sanghoon98.notion.site

반응형

'Frontend' 카테고리의 다른 글

Client & Server : HTTP & HTTPS  (0) 2022.06.17
CORS 와 SOP  (0) 2022.06.17
[JS] 호이스팅 : Hoisting  (0) 2022.06.08
개발자 단계  (0) 2022.05.08
redux 총정리  (0) 2022.04.29