브라우저의 동작원리

참고 : 브라우저 동작 원리

1. 브라우저의 주요 기능

• 사용자가 선택한 자원을 서버에 요청하고, 브라우저에 표시
  자원 : 보통 HTML문서 -> HTML과 CSS명세에 따라 HTML파일을 해석
  

2. 브라우저의 기본 구조

1. 사용자 인터페이스 : HTML이 보여지는 화면을 제외한, 모든 부분 ( 주소 표시줄, 이전/다음 페이지 등 ..)
2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
3. 자료 저장소 : 모든 종류의 자원을 하드 디스크에 저장
4. 렌더링 엔진 : 요청 받은 내용을 브라우저 화면에 표시
5. 통신 : HTTP요청과 같은 네트워크 호출에 사용
6. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행
7. UI 백엔드 : 렌더트리의 형상을 만들어 내는 그리기 과정을 실행
   

3. 렌더링 엔진은

1. 통신으로부터 요청한 문서를 얻어
2. 렌더링 과정을 통해, 렌더트리를 생성
3. 렌더트리를 통해, UI백엔드로 그리기 과정을 실행
   
   렌더트리 : 스타일정보(CSS)와 HTML표시 규칙
4. 파싱 : 렌더링 엔진에서 중요한 과정
   • 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
     

3. 브라우저 동작 과정

1. ( html문서 -> html파서 ) + ( css문서 -> css파서 ) => 렌더링 트리

1. html파서 (html 문서 해석기) :
   html파서를 통해 html문서를 읽은 후 DOM트리를 형성 함.
2. css 파서 (css 문서 해석기) :
   css파서를 통해 css문서를 브라우저용 스타일 데이터로 만들어 줌.
3. 렌더링 트리 : 페이지에 렌더링
   즉, html문서와 css문서를 시각적인 구성요소로 트리 내용 순서대로 페이지를 그려냄

2. javascript는 렌더링 엔진이 아닌 javascript엔진에서 처리 됨

• scrtipt태그가 맨 끝에 위치하는 것이 좋은 이유 :
  html파서가 중간에 javascript를 만나면 javascript엔진으로 넘어가서 DOM생성을 중지하게 된다!