브라우저의 동작원리

브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는것 자원의 주소는 URI에 의해 정해짐

• URI를 입력할 수 있ㄴ느 주소 표시 줄
• 이전 버튼과 다음 버튼
• 북마크
• 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
• 홈 버튼

브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹표준화 기구인 W3C에서 정한다.

*URI(Uniform Resource Identifier) - 네트워크 상 자원을 가리키는 일종의 고유 식별자.

사용자가 선택한 자원의 종류

• HTML, CSS, JS, PDF, Images 등이있다.

브라우저의 기본 구조

• 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴등 요청한 페이지를보여주는 창을 제외한 나머지 모든 부분

• 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

• 렌더링 엔진 - 요청한 콘텐츠를 표시.

  • 예를 들어 HTML과 CSS를 파싱하여 화면에 표시

• 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨.

  • 이것은 플랫폼 독립적인 인터페이스이고 각플랫폼 하부에서 실행

• UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용

• 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행

• 자료 저장소 - 자료 저장 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 웹데이터 베이스가 정의되어있음

(크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지)

렌더링 엔진

렌더링 엔진의 종류

• Gecko - 모질라, 파이어폭스
• Blink(ver.28 이후[크롬]) - 구글, 오페라
• Webkit - 사파리
• Trident - 익스플로러
• EdgeHTML - 마이크로소프트 엣지

동작 과정

1. DOM 트리 구축을 위한 HTML 파싱 [DOM 트리 구축]
2. 렌더링 트리 구축
3. 렌더 트리 배치
4. 렌더 트리 그리기

• 파싱과 DOM 트리 구축

  • 브라우저는 서버로부터 HTML 문서르 모두 전달 받음

  • HTML 문서를 파싱하고, 파싱 트리를 생성

  • 파싱 트리를 기반으로 DOM 요소와 속성 노드를 가지는 DOM 트리를 생성

    

• CSS 파싱과 CSSOM(CSS Object Model) 생성

  • DOM을 생성할 때 거치는 과정을 그대로 CSS에 반복
  • 브라우저가 이해하고 처리할 수 있는 형식 (Style Rules)으로 변환

• JAVAScript 파싱

  • 렌더링 엔진은 HTML 문서를 한 줄씩 순차 적으로 파싱하기 때문에 JS파일을 로드하는 Script Tag를 만나면 DOM 생성을 일시 중단
    [파싱이 끝나면 다시 제어권을 넘기고 DOM생성을 이어나간다.]
  • 만약 생성 되지 않은 DOM을 조작하면 에러가 발생할 수있다. 이를 방지하기 위해 body요소 아래에 Script Tag를 넣거나 DOM 생성이 완료된 시점에 JS를 실행 시켜야 한다.

• 렌더 트리 (DOM + CSSOM) 생성

  • DOM Tree가 구축이 되어가는 동안 브라우저는 DOM Tree를 기반으로 렌더 트리 생성, 문서를 시각적인 구성 요소로 만들어주는 역할을 함
  • 회면에 표시되지 않는 일부 노드들은 렌더에서 제외
    • script,meta 태그 등..
      • css 속성 중 화면에 숨겨지는 속성도 렌더트리에 반영 되지 않음.

• 렌더 트리 배치

  • 렌더링 트리는 위치와 크기를 가지고있지 않기 때문에, 객체들에게 위치와 크기를 결정해줌

• 렌더 트리 기리기

  • 렌더 트리의 각 노드를 화면의 픽셀로 나타냄.
  • 렌더 트리 기리기가 완료되면, 화면에 콘텐츠가 표현됨

Reflow 와 Repaint

렌더링을 모두 마친후 특정 액션이나 이벤트에 따라 HTML 요소의 크기나 위치 등의 레이아웃 수치가 변하면 해당 요소의 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout과정 (Reflow)과정을 다시 수행

각 요소의 크기 위치를 다시 계산하는 과정 Reflow
Reflow된 렌더 트리를 다시 그리는과정 Repaint라고 한다.

Repaint가 일어나는 대표적인 경우

• DOM 노드의 추가, 제거
• DOM 노드의 위치 변경
• DOM 노드의 크기 변화
• CSS3 애니메이션과 트랜지션
• 폰트 변경, 텍스트 내용 변경
• 이미지 크기 변경
• offset, scrollTop, scrollLeft...등 과 같은 계산된 스타일 정보 요천
• 페이지 초기 렌더링
• 윈도우 리사이징

참고 사이트

---

https://velog.io/@thyoondev/%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

https://d2.naver.com/helloworld/59361