브라우저

Freesian·2023년 1월 17일
0

브라우저 구성

  1. User interface
    -> 주소 표시줄, 뒤로가기 앞으로가기 버튼 , 북마크 , 새로 고침버튼 등등 브라우저별로 조금씩 다름

  2. Browser Engine
    User interface 와 Rendering engine 의 중간역할
    User interface에서 발생된 이벤트들을 Rendering engine 으로 전달해줌

  3. Rendering engine
    화면에 페이지를 띄어주는 역할을 함
    띄어주기까지의 과정
    파싱->렌더 트리->레이아웃->페인트

    • 파싱 )
      html, css 코드를 하나하나 쪼개(토큰화 ex{['<','div','>'...]})서 파스트리 구조로 바꿈, 브라우저가 파스트리 구조를 읽지 못하여
      파스트리 구조로 바꾼 html을 DOM객체로 만들고 파스트리 구조로 바꾼 css를 CSSOM 으로 바꿈 그래야 브라우저가 읽을수가 있음
    • 렌더 트리)
      이제 dom, cssom 들을 가지고 렌더 트리가 화면에 나타날 요소들이 어떻게 표현되어질지를 결정함,
      예를들어 p태그에 style이 color:blue 라면
      그걸 인식하여 저 p태그에 쓰여진 글씨들의 색은 블루색이야! 이렇게 결정함. 하지만 아직까지 화면에 표현되지는 않음
    • 레이아웃 )
      화면에 띄울때 위치를 선정하는 단계
    • 페인트 단계 )
      파싱부터 레이아웃 까지의 단계를 모두다 거친 후에 계산된 엘리먼트들을 화면에 표현하는 단계.

    3-1. UI Backend
    운영체제에 맞게 처리하는 역할
    (안드로이드,윈도우,맥 등등 각기다른 운영체제의 interface에 맞게 )

    3-2. Networking
    3-3. JavaScript Interpreter
    => 자바스크립트 해석기

  4. Data Persistence
    => 로컬 스토리지, 세션, 쿠키

profile
prompt('마라탕 몇 단계요?');

0개의 댓글