반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

짧은코딩

브라우저 로딩 과정 본문

JS

브라우저 로딩 과정

5_hyun 2023. 12. 6. 23:10
반응형

브라우저는 파싱 → 스타일 → 레이아웃 → 페인트 → 합성 → 렌더 등의 과정을 거친다.

JS, CSS의 변화에 의해 DOM, CSS에 변화가 생기면 Reflow 혹은 Repaint 등의 과정을 수행한다.

1. 파싱

브라우저가 HTML을 파싱하고 읽어들이는 과정

 

-DOM Tree

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

이런식으로 코드가 해석되는 과정이 파싱이다.

 

-CSSOM Tree

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

CSS 코드 역시 해석이된다.

2. 스타일

  • DOM Tree, CSSOM Tree가 생성되면 스타일을 매칭해주는 과정이 일어난다.
  • 그 후에 렌더 트리가 구성된다.
  • 렌더링 트리에는 body 태그 같은 페이지를 렌더링하는데 필요한 노드만 포함된다.

3. 레이아웃(Reflow)

  • 기기의 뷰포트 내에서 노드의 정확한 위치와 크기를 계산하는 과정이다.
  • 노드의 정확한 위치와 크기를 계산한다.
  • 경우에 따라 Reflow라고도 한다.

4. 페인트(래스터화)

  • 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계
  • 레이아웃이 완료될 때 브라우저가 ‘Paint Setup’ 및 ‘Paint’ 이벤트를 발생시킨다.
  • background-color, opacity, transform 같은 위치와 관계없는 CSS 속성을 적용한다.

5. 합성(Compositing)

  • 화면에 표시하기 위해 페이지에서 페인트된 부분을 합치는 과정이다.
  • 쉽게 말하면 transform, opacity 등을 사용했을 때 합성 과정을 거친다.

브라우저에서 제일 성능을 많이 잡아먹는건 뭔가요?

브라우저는 렌더링 과정에서 성능을 제일 많이 잡아먹는다. 특히 Reflow가 순간적으로 많이 발생할 경우 치명적이다.

Reflow와 Repaint가 뭔가요?

  • 스타일 → 레이아웃 → 페인트 → 합성의 과정을 렌더링이라고 한다.
  • 렌더링은 상황에 따라 반복하여 발생할 수 있다.
  • Reflow(=Layout)
    • DOM의 추가/삭제
    • CSS 속성으로 기하학적(높이/넓이/위치 등) 변화가 일어나는 경우
      • ex) margin, padding, width, height 등
  • Repaint(=Paint)
    • CSS 속성으로 기하학적 변화가 발생하지 않는 경우
      • ex) color, background, transform 등

 

-출처

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/

반응형
저작자표시

'JS' 카테고리의 다른 글

클로저  (0) 2023.11.30
쿠키(Cookie)란?  (0) 2023.10.17
변수 호이스팅과 값의 할당  (0) 2023.08.25
"forEach" vs "map"  (0) 2023.07.13
얕은 복사와 깊은 복사  (0) 2022.11.17
'JS' Related Articles more
Comments