2020-2-14 네트워크 기초

브라우저 동작방법

브라우저의 주요 기능

  1. 자원(html, pdf, image …)을 서버에 요청하고 브라우저에 표시.

  2. html, css를 명세에 따라 html파일을 해석한다.

브라우저의 구조

  • 사용자 인터페이스 : 주소표시줄, 이전/다음버튼, 북마크 등 사용자가 활용하는 서비스들
  • 브라우저엔진 : 사용자 인터페이스와 렌더링엔진 사이 동작제어
  • 렌더링엔진 : 컨텐츠 표시(html 요청이 들어오면 html, css 파싱해서 화면에 표시)
  • 통신 : http요청 등 네트워크 호출
  • JS해석기 : JS코드를 해석하고 실행
  • 자료저장소 : 쿠키 등 모든 종류의 자원을 하드디스크에 저장
  • UI백엔드 : 일반적 인터페이스, 창같은 기본장치를 그림

렌더링

  • 렌더링이란? 렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시해준다. html, xml문서와 이미지를 표시한다.

엔진종류

  • 크롬, 사파리 : 웹킷(Webkit)엔진
  • 파이어폭스 : 게코(Gecko)엔진 사용
렌더링 동작과정

  1. html문서파싱
  2. 태그들을 모두 DOM노드로 변환
  3. CSS파일과 함께 스타일 요소를 파싱
  4. 스타일정보와 html을 적용해서 렌더트리라는 또 다른 트리생성
  5. 렌더트리는 순서대로 화면에 표시.
  6. UI백엔드에서 렌더트리의 각 노드를 가로지르며 형상을 그리는 과정이 진행

DOM

  • Document Object Model(문서객체모델)로 DOM은 웹브라우저가 html을 인식하는 방식(트리구조)

쿠키, 세션

저장위치

  • 쿠키 : 클라이언트 브라우저가 지정하는 메모리, 하드디스크
  • 세션 : 서버의 메모리

만료시점

  • 쿠키 : 저장할때 expires속성을 정의해 무효화시키면 삭제될 날짜를 정할 수 있다.
  • 세션 : 클라이언트가 로그아웃하거나 설정 시간동안 반응이 없으면 무효화되기 때문에 시점을 알 수 없다.

리소스

  • 쿠키 : 클라이언트에 저장되고 클라이언트 메모리를 사용하기 때문에 서버자원 사용안한다.
  • 세션 : 세션은 서버에 저장, 서버 메모리로 로딩 되기때문에 세션이 생길 때마다 리소스를 차지.

용량제한

  • 쿠키 : 클라리언트도 모르게 접속되는 사이트에 의해 설정될 수 있기때문에 한 도메인당 20개, 하나의 쿠키당 4KB로 제한
  • 세션 : 서버자원을 사용하기 때문에 생길때마다 리소스를 차지

Reference

Written on February 14, 2020