브라우저 렌더링 과정 및 Reflow Repaint

브라우저 렌더링 과정 및 Reflow Repaint

 

 

웹 브라우저 동작 순서

 

1. 웹브라우저에서 DNS를 통해 사이트 IP주소를 얻음

2. 웹사이트 접속하여 서버와 3번의 handshake (random숫자 +1)를 함

3. 서버에 데이터 요청(HTTP Request)해서 받음(HTTP Response)

4. 데이터 해석 (웹 표준화 기구인 W3C의 명세에 따라 해석)

• 브라우저의 렌더링 엔진이 HTML parsing(해석)하여 DOM Tree 생성
• style 태그 만나면 CSS parsing(해석)하여 CCSOM Tree 생성(HTML parsing 멈추고)
• CSS parsing 마치면 HTML parsing 중단지점부터 다시 parsing 시작
• script 태그 만나면 JS 엔진에 제어 권한을 넘겨 parsing 후 추상 구문 트리인 AST(Abstract Syntax Tree) 생성 후 실행
• HTML parsing 중단지점부터 다시 parsing 시작
• DOM Tree + CSSOM Tree = Render Tree 생성 (Construction 과정)

AST

 

5. 사용자에게 데이터 출력

•   -> Operation 작업 - Layout, Paint, Composition
  • 렌더링 엔진이 Layout 작업(firefox 게코) - Render Tree의 노드들을 화면의 올바른 위치에 표시 (크롬 webkit에서는 reflow)
  • UI Backend가 Paint 작업 -  Render Tree 노드를 돌면서 UI를 그림 (크롬에서는 )
  • Composition - z인덱스 낮은거 먼저 놓음

 

 

6. 서버로부터 데이터 일부를 받고 화면에 표시 x 반복 (모두 받고 parsing 시작 x)

• 부분적으로 화면이 뜸

 

 

 

 

브라우저 구성 요소

 

 

 

 

Reflow와 Repaint 최적화

 

1. 최대한 DOM 구조 상 말단 노드에만 클래스를 사용
   (최대한 리플로우의 영향을 최소화하여 수행 비용을 줄인다네요.)
2. 인라인 스타일 자제
   (인라인 스타일이 주어지면 리플로우가 수차례 발생하게 됩니다. 클래스를 사용합시다.)
3. 애니메이션은 positon을 absolute와 fixed로 하자.
   (주변 레이아웃 영향 X)
4. 테이블로 구성된 레이아웃 자제 (작은 변화도 테이블 전체 노드가 리플로우 발생)
5. CSS에서의 JS표현식 자제 (문서중 일부가 Reflow될
   때마다 표현식이 다시계산되기 때문)
6. JS를 통한 스타일 변화는 최대한 그루핑하자
7. CSS 하위 선택자는 필요한 만큼만 쓰자. (CSS Recalculation할 때, CSS Rule에 따라 오른쪽 -> 왼쪽으로 매치시킬 Rule이 없거나 잘못된 Rule이 튀어나올 때까지 계속 매칭하기 때문)
8. 일부 속성과 메서드는 자주 사용할 때 캐싱하자.
   사용한다는 이유만으로도 리플로우가 발생하는 속성과 메서드가 있기 때문
9. position: relative; 주의!
   -일반적인 경우: Box model → Normal flow
   -position:absolute or fixed: Box model → Out of flow(Positioning)
   -position:relative: Box model → Normal flow → Positioning

 

 

 

 

 

 

참조: https://www.youtube.com/watch?v=FQHNg9gCWpg