[Javascript] 웹 페이지 렌더링

SOLEE_DEV·2021년 8월 10일
0

Javascript

목록 보기
12/19

웹 페이지 렌더링

웹 브라우저 내에서 페이지가 어떻게 렌더링 되는지?

  • 모던 웹 브라우저 들여다보기
  • 렌더링 트리 생성, 레이아웃 및 페인트
  • How Browsers Work : Behind the scenes of modern web browsers

웹 브라우저의 기본적인 구조

        사용자 인터페이스
              ↓
          브라우저 엔진
              ↓				→ 자료 저장소
          렌더링 엔진
              ↓
통신/ 자바스크립트 해석기 / UI 백엔드

1. 사용자 인터페이스

  • 웹 브라우저 주소창, 뒤로 가기, 앞으로 가기, 즐겨찾기, 새로고침
    (보이는 영역 외의 영역을 사용자 인터페이스가 차지!)
  • 브라우저 엔진 : 렌더링 엔진과 사용자 UI를 중개해주는 역할을 수행!
  • 렌더링 엔진
    : 웹 페이지 소스를 사용자에게 렌더링해주는 엔진으로
    우리가 만든 코드를 해석하면서
    1) 통신 : 이미지, 다른 스크립트, 스타일시트를 다운
    2) JS해석기 : 작성한 코드를 해석
    3) UI백엔드 : OS에 의존하는 UI형태
  • 자료 저장소 : 쿠키와 같이 지속적으로 저장해야 할 것들을 저장하는 장소

렌더링 엔진의 역할

렌더링 순서
1) 파싱 2) 스타일 계산 3) 레이아웃 4) 페인트 5) 컴포지팅

1. 파싱

  • 파싱 단계 : HTML을 DOM으로 변환하는 과정 (우리가 작성한 코드를 트리 구조로 만들어줌)
    1) 오타 혹은 잘못된 문법을 사용했을 경우 예외처리
    -> 에러 코드가 뜨진 않음
    2) <link>, <img>와 같은 태그를 만나면 리소스를 다운로드
    3) <script> 태그를 만나면 DOM 파싱을 중단하고 JS를 해석
    -> 중단하는 이유 : 스크립트 코드 내에 DOM 구조를 변화시키는 코드가 있을 수도 o
<html>
  ...
  <body>
    <script>
      document.write("<h2>hi~</h2>");
    </script>
  </body>
</html>

2. 스타일 계산

  • 스타일 계산 단계 : CSS을 파싱하여 CSSOM으로 변환
    1) CSSOM 정보를 통해 돔 노드에 대한 스타일을 결정
    2) 결정된 스타일은 크롬 개발자 도구의 computed 항목에서 확인 가능
    (스타일 계산 단계에서 확정된 스타일!)

3. 레이아웃

  • 레이아웃 트리 (렌더 트리)를 생성
    1) 돔과 계산된 스타일을 따라가며 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생성
    2) 화면에 표현되는 정보만 트리에 담기게 됨
    ex) display:none X, 가상요소 O
    visibility : hidden은 화면에 안보이지만, 영역 레이아웃 자체는 유지되어 있음!

4. 페인트

  • 레이아웃 트리(렌더 트리)가 생성되면 이 트리를 따라 페인트 기록이 생성됨
  • 페인트 기록에는 요소를 렌더링하는 순서가 저장됨 그리고 지금까지의 정보를 바탕으로 한 페이지를 여러 개의 레이어로 나눈 뒤 그 위에 텍스트, 색, 이미지, 보더, 그림자 등의 모든 시각적 부분을 그리는 작업이 진행됨
  • 색, 모양이 실제로 그려지는 단계

5. 컴포지팅 단계

  • 각각의 레이어를 스크린에 픽셀에 표현 (레스터링)
  • 나누었던 레이어들을 합성해 페이지를 그림

정리

  • 파싱 : HTML을 파싱해서 트리 모델을 만듦
  • 스타일 계산 : DOM + CSSOM = 스타일 확정
  • 레이아웃 : 요소의 크기, 좌표 정보가 계산 (렌더트리)
  • 페인트 : 레이어 위에 시각적인 부분을 그림
  • 컴포지팅 : 각각의 레이어를 픽셀화하고 다시 합성
profile
Front-End Developer

0개의 댓글