웹 사이트 렌더링 순서 ( 수정중 )

1. 브라우저 문서 표현

• 브라우저는 서버에서 받아온 HTML 문서를 W3C(World Wide Web Consortium)에서 정한 명세를 따라서 HTML를 해석
• 해석된 문서는 렌더링 엔진이 브라우저에 사용자가 볼 수 있도록 그림
• 브라우저마다 화면을 그리는 방식이 다름 ( 그리는 방식은 다르지만 W3C에서 정한 웹표준 명세에 맞게 그리기 때문에 똑같이 보여진다. )
  • Chrome, Safari : Webkit 엔진 사용
  • Firefox : Gecko 엔진 사용

2. 브라우저 구조

• 브라우저는 크게 화면 조정하는 영역, 데이터를 조작하는 영역으로 구분
  1. 사용자 인터페이스 : 사용자가 브라우저를 직접조작하는 영역 ( EX: 앞으로 가기, 뒤로가기, 즐겨찾기 등 )
  2. 브라우저엔진 : 사용자 인터페이스가 렌더링 엔진에 쿼리 전달
  3. 렌더링 엔진 : HTML과 CSS 문서를 파싱 / 해석하여 화면 표현
  4. Networking : Http 요청 및 네트워크 호출
  5. Javascript 해석기 : Javascript 코드를 해석
  6. UI Backend : select / input등 기본적인 위젯을 그리는 인터페이스
  7. 자료 저장소 : Cookie, Local storage등 모든 자료를 저장하는 영역