브라우저 렌더링 과정(Browser’s Rendering Process)

유연희·2022년 7월 1일
0

렌더링이란?

HTML , CSS , JavaScript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정을 말한다.


렌더링 과정

  1. HTML , CSS 를 다운로드.

  2. 다운받은 HTML , CSS => Object Model로 만든다.
    HTML => DOM , CSS => CSSOM

    2-1. HTML => DOM (Document Object Model)
    2-2. CSS => CSSOM (CSS Object Model)
    2-3. DOM 과 CSSOM 이용 => Render Tree를 생성

3.Layout

레이아웃 단계는 *뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산 한다.
즉 , 브라우저 화면의 어떤위치에 어떤크기로 출력될지 계산 하는 단계라고 할수 있다.



리플로우(Reflow), 리페인트(Repaint)


사용자가 웹 페이지에 처음 접속을 하면, 렌더링 과정을 거쳐서 화면에 모든 요소가 그려지게 된다. 이후에 사용자는 다양한 액션을 수행하게 되고, 여기서 발생되는 이벤트로 인해서 새로운 HTML 요소가 추가되거나, 기존 요소의 스타일이 바뀌거나 하는 변경이 일어나게 된다. 이런 변경을 통해 영향을 받게되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하게 된다. 이러한 과정을 리플로우(Reflow)라고 한다.

리플로우는 단지 변경사항을 반영하기 위해서 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것이고, 실제 이 결과를 화면에 그려지기 위해서는 다시 페인팅 단계를 수행해야 한다. 이 과정을 리페인트(Repaint)라고 한다.

reflow의 경우 repaint도 같이 동반되어야한다는 것이다.
따라서 성능면에서 보면 reflow 가 repaint 보다 한 단계를 더 거치기 때문에 느리다고 판단할 수 있다.



https://velog.io/@st2702/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95

리플로우, 리페인트 참고 | https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce

profile
developer

0개의 댓글