브라우저 흐름

부스트코스 공부 기록 : https://www.edwith.org/boostcourse-web/lecture/16663/

참고 자료 : https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

브라우저의 구성 요소

1. 사용자 인터페이스

주소 표시 줄, 뒤로가기, 앞으로가기 버튼, 새로고침 버튼 등

2. 브라우저 엔진

브라우저 소프트웨어를 동작하는 핵심 엔진.

3. 렌더링 엔진

HTML, CSS를 분석하고 화면을 그린다.
파이어폭스의 Gecko, 사파리의 webkit, 크롬의 Blink 등이 있다. 브라우저별로 다 다르다.

4. 네트워킹

http를 통해서 웹서버와 통신한다.

5. 자바스크립트인터프리터

javascript 코드를 해석한다.

6. UI 백엔드

기본 위젯을 그리는데 사용된다.

7. 데이터 저장

브라우저가 쿠키 등 데이터를 로컬에 저장한다.

렌더링 엔진의 기본 흐름 (flow)

1. HTML을 파싱

   HTML 문서를 해석하여 그 의미를 파악한다.

2. DOM트리 구성

   데이터 객체로 구조화한다

3. 렌더 트리 구성
4. 렌더 트리에 스타일정보를 매칭한다. (layout)
5. 렌더 트리를 화면에 그린다 (paint)

노드 추가/제거, 레이아웃 수정 등 렌더 트리 확인이 필요하면 reflow하여 렌더 트리를 다시 만든다, 다시 만든 렌더 트리를 repaint한다. 배경 색 변경 등 레이아웃이 변경되지 않을 때는 repaint만 일어난다.

reflow 최적화 참고

1. 다른 요소에 영향을 끼치지 않고, 해당 요소만 reflow되도록 한다.

1. 클래스 변화에 따른 스타일 변화가 일어날 경우, 최대한 DOM 가장 끝에 위치한 노드에 추가한다.
   변경된 노드의 아래 부분은 새로 만들어진다. 아래 노드를 선택할 수록 빠르다.
2. 애니메이션을 할 때는 “position:fixed”, “position:absolute”를 사용한다.
3. width,height,margin 등의 속성을 이용하기보다 transform속성을 사용하는 것이 좋다.
4. 인라인 스타일을 최대한 배제한다.
5. 테이블 레이아웃을 피하고, 사용한다면 “table-layout:fixed”를 사용한다

2. js로 스타일을 변경할 때는 style을 여러번 호출하는 것보다 클래스를 통하여 스타일을 변경하는 것이 더 빠르다.

3. 변화가 예상되는 요소는 미리 브라우저에게 알린다.

1. will-change를 사용한다. 과하게 사용하면 성능이 저하될 수도 있다. 적절한 사용이 필요하다.
2. “transform:translate3d(0,0,0)” 처럼 기본값을 지정한다.