TIL - 브라우저 렌더링

이 블로깅은 10분 테코톡 - 결의 브라우저 렌더링을 보고 글로 작성한 글입니다.
자세한 내용은 아래 영상을 보시기 추천드립니다.

브라우저란?
HTML문서, 이미지, 폰트등의 사용자가 선택한 자원을 전송 및 표현하는 소프트웨어이다.

브라우저 기본 구조

• 사용자 인터페이스
  • 주소표시줄
  • 앞,뒤로 가기버튼
  • 북마크
• 브라우저 엔진
  • 사용자 인터페이스와 렌더링 엔진사이에서 제어
• 렌더링 엔진
  • 렌더링 엔진과 레이아웃 엔진으로 나뉘어져 있으나 밀접한 관계이므로, 하나로 간주해도됨
  • 요청받은 내용을 브라우저에 나타내는 역할(도화지에 그리는 화가)
• 자바스크립트 해석기
  • 컴퓨터는 자바스크립트 코드를 이해할 수 없음.
  • 자바스크립트 해석기를 통해 컴퓨터가 이해할 수 있는 코드인 기계코드로 변환함(컴파일러, 인터프리터)

렌더링과정

• 통신
  • 사용자가 주소 표시줄에 주소를 입력하면 UI 스레드는 입력한 내용이 검색어인지 URL인지 확인하여, 검색결과 or 요청한 사이트로 이동할지 결정
  • Enter를 입력하면 UI스레드가 네트워크 호출을 시작
  • 응답이 HTML 파일이면 응답결과를 렌더러 프로세스에 전달한다.

프로세스: 애플리케이션을 실행하는 프로그램
스레드: 프로세스에서 실행하는 프로그램 중 일부를 실행하는 역할

• DOM 트리 구축

• CCSOM 생성
  • CSS 파일이 정의되어 있거나, HTML 태그에 정의된 스타일 요소, 스타일이 따로 지정되어 있지 않은 요소(브라우저 기본 스타일 적용)
  • CCSOM 트리 구축

• Render 트리 생성
  • DOM + CSSOM을 결합하여 Render 트리 생성
  • 화면에 표시되는 모든 Node와 스타일 요소 포함
• Layout (reflow)
  • 페이지에 출력될 Node들의 크기와 위치, 순서를 정함
  • 레이어? : z축을 활용하는 3차원 개념을 렌더링 과정에 삽입
  • Stacking Context(쌓임 맥락): HTML문서에 최상위 요소에서 시작하고 재귀적으로 실행한다.
  • 브라우저는 자체적으로 최적화 로직을 포함하고 있음
  • 그중 하나가 더티 비트 시스템: 특정 엘리먼트가 변경이나 추가 때문에 다시 배치가 필요하다면, 해당 엘리먼트를 더티라고 표시
  • 레이아웃이 재귀적으로 실행될때 더티엘리먼트 부분만 layout 배치 실행

• Paint
  • layout 과정을 통해 배치된 엘리먼트에 색을 입히고, 레이어의 위치를 결정한다.
  • 이 과정도 HTML요소의 최상위 부터 재귀적으로 실행
  • painting 순서는 가장 아래 레이어 z-index가 낮은 순서부터 실행된다.

브라우저 렌더링 최적화

• Reflow
  • 레이아웃, 페인트를 모두 재실행
• Repaint
  • 페인트를 재실행

• 검색을 통해 나온 결과를 그대로 믿지말고, 퍼포멘스 탭을 키고 실제로 동작하는 것인지 확인하는 것이 좋음