세리프 따라잡기

브라우저 동작 원리 및 렌더링 & 리페인트/리플로우 본문

Study

브라우저 동작 원리 및 렌더링 & 리페인트/리플로우

맑은 고딕 2024. 4. 29. 20:09

웹 브라우저가 하는 일

🗣️ html, css, js를 통해 웹을 그려줌

웹 브라우저의 구조

  • user interface: 주소 표시줄, 이전/다음/새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스.
  • rendering engine: html, css를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진
  • browser engine: 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진
  • networking: 각종 네트워크 요청을 수행하는 네트워킹 파트
  • ui backend: 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 ui 백엔드 파트
  • data persistence: localstorage나 cookie와 같이 보조 기억장치에 데이터를 저장하는 파트
  • javascript interpreter: js코드를 실행하는 인터프리터
    • 크롬의 경우 v8엔진을 사용함

웹 브라우저마다 다른 렌더링 엔진

  • safari - webkit
  • firefox - gecko
  • chrome - blink [크롬도 예전에는 webkit을 사용했는데, 2013년에 갈라진 블링크를 사용함]

렌더링 엔진의 목표

  1. html, css, js, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여줌
  2. 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성
    1. 사용자의 동작으로 인한 입력 발생
    2. 스크롤 발생
    3. 애니메이션 동작
    4. 비동기 요청으로 인한 데이터 로딩

렌더링 엔진의 동작 과정

🗣️ critical rendering path라고 한다.

 

dom tree 생성 과정

  • 브라우저가 사용자가 요청한 웹페이지의 문서를 불러오고 파싱을 함
<!DOCTYPE html>
<html>
    <head>
        <title>
            critical rendering path에 관한 공부
        </title>
        <link rel="stylesheet" href="style.css" />
        <meta charset="utf-8"/>
    </head>
    <body>
        <h1>브라우저 렌더링</h1>
        <p>눈누난나</p>
        <span>이건 안 보임</span>
        <div>
            <img src="image.jpg" alt="이미지"/>
        </div>
    </body>
</html>
  • 이 코드는 어휘 분석을 통해 html5 표준에 지정된 고유한 토큰으로 변환됨

  • 브라우저의 렉싱 과정(구문 분석)을 통해, 토큰의 해당 속성과 규칙을 정리하는 노드 객체로 변환

  • 그리고 각 노드가 서로 연관성을 가질 수 있도록 트리를 생성하는데, 이게 바로 dom tree의 생성임.

  • html 문서의 모든 것은 dom을 구성하는데,
    • 최상위 노드는 document객체
    • tag는 element 노드
    • tag의 요소는 atribute 노드 ← 이렇게 트리 구조 생성
    • 브라우저는 html 문서를 파싱하는 과정에서 js나 css 등 추가로 필요한 파일들을 불러오기도 함.

cssom tree 생성 과정

  • html을 dom tree로 만드는 과정과 cssom도 비슷함 (위에서 아래로 스타일 규칙 정해짐).
  • cssom은 dom이 어떻게 화면에 표시될 지를 알려주는 역할을 함.
body{
    margin: 0;
    padding: 0;
    text-align: center;
}

h1 {
    color: red;
}

p {
    font-size: 20px;
    text-align: right;
}

div {
    width: 50%;
    margin: 0 auto;
}

span {
    display: none;
}

 

  • 트리 구조를 갖고 있기 때문에, body에 가진 속성이 자식 요소들에도 동일한 속성이 적용됨.

render tree 생성

🗣️ dom tree와 cssom tree를 합쳐서 render tree라는 것을 만든 것

  • 화면에 표시되어야 할 모든 노드의 콘텐츠, 스타일 정보를 포함하는 트리.
  • render tree가 만들어지는 과정은 document부터 각 노드를 순회하면서 각각에 맞는 cssom을 찾아서 규칙을 적용.
    • 렌더와 관련된 요소들은 render tree에 포함
    • 이때 meta, display: none과 같은 속성은 포함되지 않는다. [render 관계에 포함되지 않기 때문]

render tree 배치 및 그리기

render tree가 생성되었다면 layout이라는 과정을 거치는데, 이를 리플로우라고도 한다.

  • viewport 내에서 요소들의 정확한 위치와 크기를 계산하는 과정
  • text나 요소들이 화면에서 차지하는 영역이나 여백, 스타일 속성 등이 계산됨.
    • 이때 css의 %나 em같은 상대적인 단위를 사용했을 때는 기계의 viewport에 따라서 pixel 단위로 변환이 됨.
  • 레이아웃 과정에서 rendering engine이 각 요소들이 어떻게 생겼고 어떻게 보여줄지 알게 되면, 화면에 실제 픽셀로 변환하는 과정을 거치는데
    • 이게 바로 paint(페인트) 과정
    • render tree에 포함된 요소들이나 text, 이미지들이 실제 픽셀로 그려짐

critical rendering path의 시간을 줄이면?

브라우저가 웹 페이지를 보여주는 시간도 줄일 수 있음.

근데 사용자 동작으로 js가 실행되어서 css가 변경되거나 애니메이션 재생이 일어났을 때는 어떻게 됨??

🗣️ 크게 3가지가 일어남

1. 다시 layout이 발생하는 경우

  • 주로 요소의 크기나 위치가 바뀔 때나 브라우저 창의 크기가 바뀌었을 때 그림의 순서처럼 다시 발생함.
    • 이때 layout 수치를 다시 계산해서 배치를 해야하기 때문에

2. paint부터 다시 발생되는 경우

  • 주로 배경 이미지나 텍스트 색상, 그림자 등. 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생함.
    • layout 과정이 발생하지 않기 때문에 성능상에 이점이 있다.

3. 레이어의 합성만 다시 발생하는 경우

  • 레이어란?
    • 포토샵의 layer와 비슷함.
    • 페인팅할 영역을 나누어 놓은 것을 말함.
      • 크롬의 경우 layout 과정 이후에 정해진 기준이나 필요에 의해서 브라우저가 layer를 생성함. 그리고 render tree에 있는 node 객체들은 이 생성된 layer에 포함됨.
      • layer들은 트리의 형태로 구성이 됨.
      • redering engine이 페인팅 과정에서 각각 그려준 다음에 하나의 비트맵으로 합성해서 페이지를 완성함
      → 이때 과정은 layout과 paint를 수행하지 않고 layer의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가짐
  • 3가지 그림 요약

https://csstriggers.com [이 사이트 근데 안 들어가짐 ㅋㅋ]

⇒ 어떤 경우의 css일 때 변경되는 지 볼 수 있는 사이트라고 하는데…

이건 그냥 tip?

🗣️ performance tap → 아래의 …을 눌러서 rendering을 누르면 paint flashing이 있는데 그거 누르면, 페인팅 되는 애가 초록색으로 빛나는 거 볼 수 있음

 

'Study' 카테고리의 다른 글

SOP와 CORS  (0) 2024.04.30
normalize vs reset css 란  (0) 2024.03.31
이미지로 웹 성능 개선할 수 있을까  (0) 2024.02.29
크롬 오류 해결 방법  (2) 2022.06.24
aws 인스턴스 및 탄력적 주소 해제  (0) 2022.05.27
'Study' Related Articles more
Comments