브라우저 렌더링

렌더링

• 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정
  • HTML, CSS, JavaScript 코드의 사용을 말한다.
  • 화면에 표시할 웹 페이지를 만드는 과정
• 웹 사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차
• 렌더링 엔진에 의해 완성

렌더링 엔진

웹 페이지를 렌더링 하기 위해 웹 브라우저에서 사용하는 소프트웨어

브라우저 엔진이라고 불리기도 한다.

브라우저 렌더링

1. 브라우저가 서버로부터 HTML 문서를 다운받는다.
2. 렌더링 엔진이 HTML 문서를 파싱해서 DOM 트리를 만든다.
   • DOM: HTML의 JavaScript 표현
3. 외부 CSS파일과 함께 포함된 스타일 요소를 파싱해 CSSOM 트리(CSS 개체 모델)를 만든다.
   • 스타일은 브라우저의 자체 스타일, 사용자 정의 스타일, HTML 태그에 걸려 있는 스타일 순서로 처리되며, 나중에 처리되는 스타일을 따르게 된다.
   • 즉, 인라인으로 들어가있는 스타일 속성이 우선순위를 가진다.
4. DOM트리와 CSSOM을 결합해 렌더링 트리(Rendering Tree)를 형성한다.
   • 이때 화면에 드러나지 않는 head태그나 display 속성에 none값이 할당된 요소는 렌더링 트리에 포함되지 않는다.
5. 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산한다. (레이아웃 단계 / 리플로우)
6. 렌더링 엔진이 페인트 이벤트를 발생시켜 렌더링 트리(개별 노드)를 화면에 그린다. (페인팅 / 레스터화)

렌더링이 완료된 상태에서 사용자의 인터렉션에 의해 화면의 일부 영역이 변경되면?

• 레이아웃이 변경될 경우 : 리플로우 또는 리페인트가 발생한다.
  • DOM 엘리먼트 추가/제거/변경, CSS 스타일 추가/제거/변경 등
• 가시성에 영향을 주는 엘리먼트만 변경될 경우 : 리페인트
  • opacity, background-color 등

따라서 최적의 렌더링 성능을 얻기 위해서는 위 단계를 최적화 해야한다.

---

References.

https://defineall.tistory.com/707

https://chunggaeguri.tistory.com/entry/HTML-%EB%A0%8C%EB%8D%94%EB%A7%81Rendering%EC%9D%B4%EB%9E%80#:~:text=%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%80%20%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EC%BD%94%EB%93%9C,%EC%97%94%EC%A7%84%EC%97%90%20%EC%9D%98%ED%95%B4%EC%84%9C%20%EC%99%84%EC%84%B1%EB%90%A9%EB%8B%88%EB%8B%A4.

https://velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80