notion-023


네트워크의 HTTP부터 여러 프로토콜,
운영체제로 컴퓨터 작동 방식,
DB는 원래 잘 알고 있었기도 했으니.. 인덱스와 정규화 등 여러 개념을 한번 더 되짚어봤습니다.

근데 문득 ‘브라우저의 작동 원리’가 FE에서 가장 중요하다는 생각이 들었어요.

프론트 코드는 브라우저 위에서 동작합니다.
실제로 JS의 비동기 처리도 브라우저의 힘을 빌려서 동작하죠.

따라서 내가 브라우저 주소창에 무언가를 입력했을 때, 원하는 사이트로 이동하고
사이트의 요소들이 렌더링 되기까지의 과정을 알아보도록 하겠습니다.



01. 브라우저의 주요 기능

브라우저의 주요 기능이라 하면

사용자가 선택한 리소스를 서버에 요청하고 브라우저 창에 표시하여 사용자에게 제공하는 것입니다.

해당 리소스는 대부분 HTML 문서 형식이지만, PDF, IMG 등 다른 형식일 수 있습니다.

사용자가 접속한 웹 페이지의 리소스들을 웹 브라우저는 웹 서버에 요청하게 됩니다.

서버가 브라우저에게 전달한 해당 응답인 HTML, CSS 등의 문서들을 브라우저는 해석한 후 사용자에게 제공하게 됩니다.


브라우저는 HTML, CSS 명세에 따라서 HTML을 해석해서 표시하게 되는데,
이 명세는 웹 표준화 기준인 W3C(World Wide Web Consortium)에서 정해집니다.

흔히 알고있는 브라우저라 하면 크롬, 파이어폭스, 인터넷 익스플로러 등이 있겠네요.



02. 브라우저 기본 구조

  • 사용자 인터페이스

    • 주소 표시줄, 이전/다음 버튼, 북마크 기능 등
    • 요청한 페이지가 표시되는 창을 제외한 브라우저의 모든 부분입니다.

  • 브라우저 엔진
    • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
  • 렌더링 엔진
    • 요청한 리소스를 표시합니다.
    • 예를 들어, 사용자가 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 나타냅니다.
  • 통신
    • HTTP 요청과 같은 네트워크 호출에 사용합니다.
  • UI 백엔드
    • 콤보박스와 창 같은 기본적인 위젯을 표시합니다.
  • JS 인터프리터
    • JavaScript 코드를 구문 분석하고 실행합니다.
  • 데이터 저장
    • 자료를 저장합니다.
    • 쿠키를 저장하는 것과 같이, 모든 종류의 자원을 하드디스크에 저장해야 할 수 있습니다.
    • LocalStorage, IndexedDB, WebSQL, FileSystem과 같은 저장소를 지원합니다.

각 탭은 별도의 프로세스에서 실행됩니다.


파싱(Parsing)
어떤 페이지(문서, HTML 등)에서 원하는 데이터를 특정 페턴이나 순서로 추출해 가공하는 것을 말합니다.



03. 렌더링 엔진

위에서 간단하게 살펴봤듯이, 렌더링 엔진의 역할은 요청을 받은 내용을 브라우저 화면에 표시하는 것 입니다.

렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있습니다.

다른 확장 기능이나 플러그인을 사용하여 PDF와 같은 다른 형식의 파일들도 표시할 수 있지만, HTML과 CSS를 표시하는 주요 기능에 집중해서 설명하도록 하겠습니다.

브라우저마다 각각 다른 렌더링 엔진을 사용합니다.
인터넷 익스플로러는 Trident,
파이어폭스는 Gecko
사파리는 Webkit
크롬과 오페라는 Webkit의 포크인 Blink를 사용합니다.

  • Gecko : Mozilla에서 직접 만든 렌더링 엔진
  • Webkit : 리눅스에서 동작하기 위해 만들어진 오픈소스이며,
    애플에서 맥과 윈도우즈에 사파리 브라우저를 지원하기 위해 수정을 가해 사용

03-1. 렌더링 엔진 동작 순서

  1. DOM 트리 구축을 위한 HTML 파싱
  2. 렌더트리 구축
  3. 렌더트리 배치
  4. 렌더트리 그리기(paint)



우선 렌더링 엔진은 HTML의 문서를 구문 분석하고, 컨텐츠 트리를 DOM 노드로 변환합니다.

외부 CSS 파일과 스타일 요소 모두에서 스타일 데이터를 구문 분석합니다. (파싱)

HTML의 규칙에 맞게 스타일 정보를 사용하여 렌더 트리를 생성합니다.

렌더 트리의 구성 후, 배치 프로세스를 거칩니다.

해당 프로세스는 각 노드가 화면의 어느 곳에 표시되어야 하는지 정확한 좌표를 제공합니다.

렌더 트리가 탐색되고, 각 노드는 UI 백엔드 레이어를 사용해 그리기 과정을 거칩니다. (배치 + 그리기)

모든 내용을 한번에 파싱하고 배치하기에는 속도가 매우 느리기 때문에,

위의 파싱과 배치과정은 함께 일어납니다.

네트워크로부터 나머지 내용이 전송되기 기다리는 동시에, 받은 내용의 일부를 먼저 화면에 표시하게 됩니다.


  • Webkit

  • Gecko

✏ 렌더 트리(Render Tree)

  • Gecko : 형상 트리, 각 요소를 형상(Frame, Frame Tree)
  • Webkit : 렌더 객체로 구성되어 있는 렌더 트리

✏ 배치

  • Gecko : Reflow
  • Webkit : Layout

✏ Attachment

  • Gecko : = Content Sink 레이어
  • Webkit : 렌더 트리를 생성하기 위해 DOM 정보와 시각적 정보를 연결



04. 파싱(Parsing)

파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미합니다.
파싱 결과는 보통 문서 구조를 나타내는 노드 트리(= 파싱 트리, 문법 트리) 입니다.

예를 들어, 2 + 3 - 1 와 같은 표현식은 해당 트리로 변환됩니다.

하지만 HTML의 경우 일반적으로 사용하는 상향식, 하향식 파서로는 파싱이 안됩니다.

  • 언어의 너그러운 속성
  • HTML 오류에 대한 브라우저의 관용
    • 잘 구성되지 않은 많은 HTML 문서를 처리해야 하므로 오류에 관대해야 합니다.
  • 변경에 의한 재파싱 과정
    • 파싱 프로세스가 직접 입력을 수정할 수 있습니다.

위의 세가지 이유 때문에 브라우저는 HTML 파싱을 위해서는 별도의 파서를 만들어 사용합니다.

http://www.w3.org/TR/html5/syntax.html#html-parser


즉 정리하면

  1. HTML, CSS는 파싱되어 DOM으로 변환되고, 렌더 트리로 결합됩니다.
  2. 생성된 렌더트리를 기반으로 Layout(배치)를 거치고 브라우저에 그리기 과정을 진행합니다.

= 렌더링 과정



05. 브라우저 렌더링 과정

먼저 렌더링이란
개발자가 작성한 문서(HTML, CSS, JS)가 브라우저 화면에 출력되는 과정을 말합니다.

브라우저의 기능, 구조, 렌더링 엔진에 대해 알아봤으니
최종적으로 정리하도록 하겠습니다.


05-1. 렌더링 과정

  1. 사용자가 어떠한 웹 페이지의 리소스를 요청
  2. 서버에서 받아온 해당 리소스들(HTML, CSS) 문서를 DOM으로 변환하여 DOM 트리 구축
    1. 파싱 과정을 거쳐 노드 트리를 생성합니다.
  3. 변환된 DOM 트리로 렌더 트리 생성
    1. 렌더 트리에는 CSS 파일, style 요소의 스타일 정보가 포함되어있으며, 화면에 필요한 노드들로만 구성됩니다.
      (display: none은 포함하지 않습니다.)
  4. layout - 렌더트리에서 노드들이 가지고 있는 속성과 스타일에 따라서 브라우저에 어떤 크기로 어떤 위치에 출력할지 받아옵니다. (레이아웃 프로세스)
  5. paint - 레이아웃이 완료되면 실제 화면에 그립니다.


2번 과정에서 해당 리소스에 JS가 포함되어 있다면?

  • HTML 파서는 script 요소를 만나면 DOM 생성을 중지하고 JS 엔진에 권한을 넘깁니다.
  • JS가 끝나면 다시 HTML 파서로 권한을 넘기고, 중지되었던 시점부터 DOM 생성을 진행합니다.

따라서 script 위치에 따라 DOM 생성이 지연될 수 있습니다. 또한 DOM이 생성되지 않은 상태에서 DOM을 조작하면 에러가 생깁니다.

→ body의 끝부분에 script를 넣어주는 것이 좋습니다.



Reference

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

https://it-ist.tistory.com/110

댓글남기기

다른 게시글