브라우저의 동작방식

송승찬·2020년 9월 7일
1

TIL

목록 보기
20/52

진행 과정

  • 요청과 응답:브라우저->서버에 웹페이지(HTML/CSS/JS/이미지 파일) 요청->서버가 응답(HTML/CSS/JS/이미지 파일)

  • Parsing(돔 트리를 만드는 과정): 브라우저의 렌더링 엔진(서버에서 받아온 자료를 브라우저가 이해하고 사용할 수 있게 DOM구조로 만드는 기능을 함)이 HTML/CSS을 HTML/CSS parser를 통해 DOM ,CSSOM 트리 형성

  • 렌더 트리의 형성: DOM/CSSOM트리를 결합하여 렌더트리를 형성 후 이것이 화면에 드러남

주의

  • js는 렌더링 엔진이 아닌, js엔진이 처리
  • 렌더링 엔진의 HTML parser가 <script>태그를 만나면 js실행을 우선적으로 함
  • 따라서 <script>태그를 만나면 HTML파서가 DOM생성을 중지하고 js엔진에게 제어 권한을 전달,그 후 js엔진이 js를 파싱후 실행
  • js실행이 완료되면 다시 HTML parser가 권한을 받아서
    중단되었던 DOM부터 다시 생성(script태그를 <body></body>태그 가장 밑에 두는 이유)

렌더링 엔진이란?

  • 역할: 브라우저가 요청한 내용을 서버로부터 받아 브라우저 화면에 표시함
  • 화면에 표시하는 과정에서 parsing을 한다(서버로부터 받은 문서를 브라우저가 이해하고 사용할 수 있는 구조(DOM트리)로 변환)
  • 종류: webkit(크롬/사파리),Gecko(파이어폭스)
  • 표시가능한 것들: HTML/XML 문서/이미지/pdf
profile
superfly

0개의 댓글