주소창에 웹사이트 주소를 입력하고 해당 웹 사이트의 화면이 뜨기 전까지의 과정에 대해 알아보자
✔ 과정을 알기 전!
브라우저 렌더링 과정을 알기 전 미리 알아두면 좋은 개념을 정리해보자 📝
💻 브라우저 (browser) ?
- HTML, CSS, JavaScript들을 해석해서 화면에 띄어주는 응용 소프트웨어
💻 렌더링 (rendering) ?
- HTML, CSS, JavaScript 파일을 파싱(parsing)해, 브라우저에 시각적으로 출력하는 과정
💻 파싱 (parsing) ?
- 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계
📁 브라우저의 구조
브라우저마다 구조는 조금씩 다를 수 있다.
사용자 인터페이스 User Interface: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분브라우저 엔진 Browser Engine: User Interface와 Rendering Engine 사이의 동작을 제어렌더링 엔진 Rendering Engine: 요청한 콘텐츠를 표시, HTML을 요청하면 HTML과 CSS를 파싱 하여 화면에 표시함 (렌더링 동작 원리 핵심)통신 Networking: HTTP 요청으로 네트워크 호출을 하고 브라우저마다 독릭접인 인터페이스자바스크립트 해석기 Javascript Interpreter(또는 Engine): 자바스크립트 코드를 해석하고 실행함. ex) 크롬 - V8 엔진UI 백엔드 Display Backend: 기본적인 위젯(콤보 박스 등..)을 그림자료 저장소 Data Persistence: LocalStorage, SessionStorage, Cookie 등 클라이언트 사이드에서 데이터를 저장하는 영역
🔎 브라우저 렌더링 과정?
- 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다.
- 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더 트리를 생성한다.
- 브라우저 JS 엔진은 받아온 JS를 파싱해 AST를 생성하고, 바이트코드로 변환해 실행한다.
- 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다.
- 화면에 HTML요소를 페인팅한다.(실제 화면에 그리게된다.)
📍 요청 및 응답
- 브라우저는 우선 필요한 리소스(HTML, CSS, JS, 이미지, 폰트 등)를 서버에 요청하고, 응답으로 받아와야 한다.
📍 HTML 파싱, DOM 트리 구축
HTML을 파싱하여 DOM 노드를 생성하며, DOM 노드들을 병합하여 DOM 트리가 구축된다.
DOM (Document Object Model): DOM은 HTML 문서에 대한 인터페이스, 자바스크립트에서 수정될 수 있는 동적 모델
📍 CSS 문서 파싱, CSSOM 트리
- 앞서 html 파일을 파싱하다가
<link><style>태그를 만나면 파싱을 잠시 멈추고 리소스 파일을 서버로 요청한다 CSSOM (CSS Object Model):DOM+CSS= CSSOM
📍 DOM 트리와 CSSOM 트리 = Render 트리 생성
- DOM, CSSOM 에 있던 속성들이 합쳐져 렌더 트리를 구성한다.
📍 자바스크립트 코드 해석
- JavaScript 엔진이 JavaScript 파일의 코드를 파싱해서 컴퓨터가 이해할 수 있는 기계어로 변환하고 실행한다. 먼저 단순한 텍스트 문자열인 코드를 토큰 단위로 분해한 후, 이렇게 분해된 토큰에 문법적인 의미와 구조가 더해져,
AST(추상 구문 트리)라는 트리가 구축된다.
📍 배치 (Layout)
- 브라우저는 각 요소들이 전체 화면에서 어디에, 어떤 크기로 배치되어야 할 지 파악하기 위해 렌더트리의 맨 윗부분부터 아래로 내려가며 계산을 진행한다. 모든 값들은 절대적인 단위인 px값으로 변환된다.
📍 화면에 그리기 (Painting)
- 각각 정보를 가진 픽셀들이 모여 하나의 이미지, 화면을 구성하게된다.
🔗 참고
https://joooing.tistory.com/entry/rendering
https://hun-dev.tistory.com/21
https://beomy.github.io/tech/browser/browser-rendering/
#의욕넘치는#💻#✨#FE#💪🏻