iris.dew

브라우저 동작 원리

August 13, 2021

브라우저란?

월드와이드웹(WWW)에서 정보를 검색, 표현, 탐색하기 위한 소프트웨어

브라우저의 핵심 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것

💡 자원 Resource
사용자가 원하는 웹페이지를 구성하기 위해 필요한 파일들 (HTML, CSS, JS, 이미지 …)

브라우저는 HTML과 CSS 명세 (웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정해진 명세) 에 따라 HTML 파일을 해석해서 표시


브라우저 구조

image

  • UI User Interface 사용자 인터페이스 주소 표시 줄 / 이전 버튼과 다음 버튼 / 북마크 / 새로 고침, 정지, 홈 버튼 등…

    요청한 페이지를 보여주는 창을 제외하고 사용자와 상호작용하는 나머지 부분

  • Broweser Engine 브라우저 엔진 사용자 인터페이스와 렌더링 엔진을 연결 브라우저 소프트웨어를 동작시켜주는 핵심 엔진

  • Rendering Engine 렌더링 엔진 요청한 콘텐츠를 브라우저 화면에 표시 HTML과 CSS를 파싱하여 웹페이지를 화면에 표시

    ⚙ Rendering Engine의 목표

    1. HTML, CSS, JS, 이미지 등 웹페이지에 포함된 모든 요소들을 화면에 보여준다

    2. 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다

      • 사용자 동작으로 인해 입력이 발생하거나, 스크롤이 생기거나, 애니메이션이 동작할 때
      • 비동기 요청으로 인한 데이터 로딩이 발생했을 때

    🧭 브라우저마다 다른 렌더링 엔진

    • Webkit (Safari)
    • Gacko (Firefox)

    • Blink (Chrome)

      • 예전에는 Webkit을 사용하다가 2013년부터 Webkit에서 갈라져나온 Blink를 사용

  • Networking 네트워크

    HTTP 요청과 같은 네트워크 호출에 사용, 각종 네트워크 요청을 수행, 서버와 통신

  • JavaScript Interpreter 자바스크립트 해석기

    자바스크립트 코드를 실행하는 인터프리터

    Chrome의 경우 V8을 사용

    💡 JavaScript는 렌더링 엔진이 아닌 JavaScript Interpreter가 처리한다

    • HTML 파서는 <script>태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다
    • 제어 권한을 넘겨받은 자바스크립트 엔진은 <script>태그 내의 자바스크립트 코드 or <script>태그의 src에 정의된 js 파일을 로드하고 파싱하여 실행한다
    • 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨 브라우저가 중지했던 시점부터 DOM 생성을 재개한다
      ➡ 그러므로 HTML 요소를 다 처리한 이후, 자바스크립트를 처리할 수 있도록 <body>태그 하단에 <script>태그를 위치시키는 것이 좋다

    🔧 JavaScript 코드는 body 태그 하단에 위치하면 script 로딩 지연으로 인해 동기적으로 동작하는 브라우저 동작에 blocking이 발생하지 않아 페이지 로딩 시간이 단축된다.

    💄 CSS 코드는 head 태그 안에 위치하여 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋다.

  • UI Backend

    UI를 처리할 수 있는 백엔드 영역

  • Data Persistence 자료 저장소

    자료를 저장하는 계층

    localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 파트


브라우저 렌더링 과정

image

  1. DOM tree 생성

    브라우저의 렌저링 엔진이 HTML 코드를 읽고 파싱하여 DOM tree를 생성

    • HTML 코드를 어휘분석을 통해 HTML5 표준에 지정된 고유한 토큰으로 변환
    • 렉싱 과정을 통해 토큰을 해당 속성과 규칙을 정의하는 Node로 변환
    • 각 Node가 서로 연관성을 가질 수 있도록 DOM tree를 생성

  2. Render tree 생성 화면에 표시되어야 할 모든 Node의 컨텐츠, 스타일 정보를 포함하는 tree

    • CSS 파일이나 HTML에 inline으로 작성된 스타일 코드를 파싱하여 CSSOM을 구성
    • document부터 각 Node를 순회하면서 각각에 맞는 CSSOM을 찾아 규칙을 적용
    • DOM 트리와 CSSOM을 결합하여 Render tree 생성
    • meta 태그나 display:none 속성을 가진 요소 같은 것들은 렌더와 무관하기 때문에 Render tree에 포함되지 않음

  3. Layout(reflow)

    뷰포트 내에 생성된 render tree의 각 노드들의 정확한 위치와 크기를 결정

    • %, em과 같은 상대 단위를 사용했을 때 뷰포트에 맞춰 px로 변환
  4. Paint (repaint) 마지막으로 구성한 레이아웃을 실제로 화면에 픽셀로 그리는 과정

브라우저가 화면을 다시 그리는 경우

image

  1. 다시 Layout이 발생 주로 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀌었을때 다시 발생

    레이아웃 수치를 다시 계산해서 배치를 해야하기 때문에, 레이아웃 과정이 다시 발생하고 페인트와 레이어 합성 과정까지 다시 거쳐야함

  2. Paint부터 다시 발생하는 경우 주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생

    레이아웃 과정이 다시 발생하지 않기 때문에 성능상으로 좀 더 이점

  3. 레이어의 합성만 다시 발생하는 경우 레이어의 합성(Composite)만 발생하기 때문에 성능적으로 가장 큰 이점

    • 레이어는 포토샵의 레이어와 비슷하게 페인팅할 영역을 나누어놓은 것을 의미
    • Chrome의 경우에는 레이아웃 과정 이후에 정해진 기준이나 필요에 의해서 브라우저가 레이어를 생성
    • 렌더링 엔진이 각 레이어를 프린팅 과정에서 각각 그려준 다음에 하나의 비트맵으로 합성해서 페이지를 완성

👀 https://csstriggers.com/ 에서
브라우저, CSS요소에 따라 3가지 중 어떤 경우가 발생하는지 알 수 있음!


Reference

Written by@irisdew
Junior Frontend Developer

GitHub