웹페이지 동작에 관하여 (브라우저 원리)

유저가 브라우저를 실행해 원하는 웹사이트에 접속하고 이용하기 까지....

---

유저는!!

1. 웹 브라우저를 실행한다.
2. 웹 사이트 주소를 입력하고 이동한다.
3. 웹 사이트 주소는 브라우저에 의해 서버에 요청된다.
   • 서버는 요청된 URI에 맞는 response를 브라우저에 전달한다.
   • response는 html, json, image 등 다양한 형태를 갖는다.
     • html 골격
     • css 스타일링
     • js 동작
   • 인증 상태나 기타 요구사항에 따라 서버는 요청 URL로 이동하거나 다른 주소로 Redirect 할 수 있다. 
4. response html
   • html
     • head
       
       • meta : title, description, lang, thumbnail, data for searching (SEO), ...
       • css
       • (optional) js
     • body
       • elements
       • script
5. 브라우저 엔진은 html 문서를 파싱한다.

브라우저 구성

• User Interface
• 브라우저 엔진
• 렌더링 엔진
• 자바스크립트 엔진
• ...

 

파싱

• html 문서를 위에서부터 읽어내려온다.
• 렌더링 엔진
  • HTML 파서 : HTML을 파싱하고 DOM 트리로 변환
    • 파싱 중 파서는 HTML 내 문법적 오류도 바로 잡는다.
  • CSS 파서 : CSS를 파싱하고 CSSOM 트리로 변환
  • DOM 트리와 CSSOM 트리는 렌더 트리로 결합
• 웹은 동기화 모델이므로 script 태그를 만나면 렌더링 엔진의 파싱을 중지하고 스크립트를 실행한다.
  • 파싱을 중단하지 않기 위해서는
    • 지연(defer) 표시
    • HTML5 스크립트 비동기 처리 속성

 

Reference

https://d2.naver.com/helloworld/59361

https://poiemaweb.com/js-browser