브라우저 렌더링 과정

 

• 브라우저 주소창에 주소를 입력한다 (ex. www.naver.com)
• DNS가 해당 서버가 어디있는 지 찾아 연결해준다. (https가 있다면 https방식으로 통신한다)
•  서버에서 index.html 파일을 클라이언트로 전송한다
• 렌더링 엔진의 html 파서와 css 파서가 각각 html,css 파일을 파싱하여 DOM, CSSOM 트리로 변환한다. 
• html파서가 중간에 link태그를 만나면 css를 파싱하며 css 파싱이 끝나면 다시 html파싱을 하여 DOM 트리를 만든다. (css 정보 없음)
• DOM 트리와 CSSOM트리를 합쳐 render tree를 만든다. (여기서는 스타일 정보가 들어간다)
• html 파서는 script 태그를 만나면 javascript 엔진으로 제어권한을 넘기고 자바스크립트를 파싱한 후 다시 html파싱을 마친다 (script태그를 html닫는 태그 바로 앞에 놓는 이유, defer 등으로 해결가능)
• 렌더 트리 생성이 끝나면 스타일 요소에 맞게 화면에 배치하기 위해 위치를 계산한다
• 렌더 트리를 순회하며 화면에 그려서 최초 렌더링을 마친다
• 이 후 비동기 통신 등으로 dom 구조가 변경되면 리플로(배치를 다시한다) 또는 리페인트 (단순 스타일 변경)이 일어난다

+ a (추가 정보)

• 렌더 트리는 DOM과 다르게 각 노드에 스타일 정보가 있다
• display:none인 경우 화면에 포함되지 않느다
• 렌더 트리는 화면에 표시되는 노드로만 구성된다 (head, title, script는 제외된다)
• 리플로, 리페인트 작업 추가 설명 (최적화, 줄이는 방법)
  • Reflow 일어나는 경우
    • page 초기 렌더링,
    • 윈도우 리사이징
    • 노두 추가,제거
    • 요소 위치, 크기 변경
    • 폰트 변경 및 이미지 크기 변경

• Repaint
  • reflow와 별개로 일어난다
  • background-color, visibility 처럼 레이아웃에 영향을 주지 않는 경우에는 스타일 속성이 변했을 경우에는 repaint만 수행
• reflow, repaint 줄이기
  • 사용하지 않는 경우 visibility:hidden보다 display:none 사용
  • reflow, repaint 발생하는 속성 사용 피함 (transform. opacity는 reflow, repaint 둘다 안일어난다)
  • 애니메이션이나 레이아웃 많은 요소는 absolute, fixed 사용

출처

 https://sunnykim91.tistory.com/121

bigstar-vlog.tistory.com/60

boxfoxs.tistory.com/408