[JavaScript] 브라우저 동작 원리

Peter·2022년 4월 14일
0

JavaScript

목록 보기
8/9
post-thumbnail

브라우저 동작 원리

1. 요청(Request)과 응답(Response)

  • 사용자가 참조하고자 하는 웹페이지 서버에 요청
  • 서버는 사용자에게 HTML, CSS, JavaScript, 이미지 파일등을 응답

2. HTML, CSS Parser

  • 서버로부터 받은 HTML, CSS 파일을 HTML파서와 CSS파서가 파싱
    - 파싱 과정에서 최대 20개의 중첩만 허용하고 나머지는 무시
  • 파싱된 HTML을 DOM 노드로 변환
  • CSS파서는 선택자, 선언을 파싱
  • 각각 DOM, CSSOM 트리로 변환
  • 두 트리가 렌더 트리로 결합
  • 렌더 트리 배치

3. JavaScript 엔진

  • HTML 파서가 Script태그에 접근하면 DOM생성 프로세스를 중지하고 자바스크립트 엔진에 제어 권한 넘김
  • 자바스크립트 엔진은 스크립트 파일을 파싱하고 실행함
  • 스크립트 파일 실행이 완료되면 HTML 파서로 다시 권한을 넘겨 DOM 생성을 재개

4. 그리기

  • 다시 권한을 가진 HTML파서가 DOM트리를 완성하고
  • 렌더트리로 병합 후 배치
  • 그리기를 통해서 브라우저에 표시
profile
컴퓨터가 좋아

0개의 댓글