[Browser Rendering] - 1. 브라우저 구성 요소, 렌더링 과정

위의 강의를 보면서 이해한 내용을 토대로 정리한 내용입니다 : )

사실 글로 보는건 훗날 다시 보기 위함이기 때문에 정확한 이해를 위해 영상 보시는걸 추천드립니다 😁

 

 

Browser Elements

1. 사용자 인터페이스 

페이지를 보여주는 창 외에 사용자가 컨트롤 할 수 있는 부분을 의미

 

2. 브라우저 엔진

1. 사용자 인터페이스와 렌더링 엔진 사이에서 동작

   사용자가 입력한 URL의 URI값이나 사용자 인터페이서에서 입력된 값을 렌더링 엔진에게 전달하는 역할

2. 자료 저장소로 이동하는 역할

 

3. 렌더링 엔진 ✨

사용자가 URI를 입력했을때 그에 해당하는 데이터를 파서를 통해 html, css를 파싱한 후 렌더링 한다.

 

4. 통신

렌더링 엔진으로부터 http요청 명령을 받아 서버에게 요청하고, 응답을 받아서 렌더링 엔진에게 반환

 

5. 자바스크립트 해석기

Html의 태그들에 동적인 기능들을 적용하는 등의 자바스크립트를 파싱하는 역할

크롬에서는 v8이라는 엔진을 이용한다.

 

7. 자료저장소

쿠키등의 자료들을 컴퓨터 하드디스크에 저장.
localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 자료저장소.

6. UI 백엔드

최종 렌더트리를 브라우저에 그리는 역할을 담당한다.

 

 

 

 

 

Browser Rendering Process

1. 사용자가 주소표시줄(사용자 인터페이스)에 URI를 입력

2. 브라우저 엔진에게 URI(입력받은 주소값) 전달

3. 브라우저 엔진은  URI(입력받은 주소값)에 해당하는 데이터를 자료저장소에서 먼저 찾아본다.

      같은 데이터를 받아오면는 낭비를 방지하기 위해 자주 받아오는 데이터를 저장해두고 사용하기 때문 (캐싱)

      이로인해 효율적인 렌더링을 사용 할 수 있다.

     ( Web Storage > localStorage, sessionStorage, Cookie )

4-1. 자료저장소에 값이 없는경우 렌더링 엔진에게 URI값을 전달

4-2. 렌더링 엔진은 3번에 값이 있다면 그 대한 데이터를 분석하고,
          없어서 추가 데이터 요청이 필요하면 URI(입력받은 주소값)을 통신레이어에 전달한다.

5. 통신레이어에게 전달  > 서버에  html,css,javascript  값을 서버에 요청

6. 통신레이어에게 전달받은  html,css 는 렌더링 엔진이 파싱  (DOM tree, CSSOM tree 구축)  한다.

7. 통신레이어에게 전달받은   javascript 를 통신레이어가 자바스크립트 해석기에게 전달해서 해석

     자바스크립트 해석기에서 해석된 결과가 6번에서 파싱된  DOM tree 를 조작한다.

8. 조작이 완료된  DOM node(DOM tree 구성요소) 는  render object(render tree구성요소) 로 변한다.

9. ui 백엔드에 전달되어 render object가 화면에 그려진다.

 

---

✔️  참고

https://www.youtube.com/watch?v=oLC_QYPmtS0 

https://velog.io/@grinding_hannah/Web-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%9E%91%EB%8F%99-%EC%9B%90%EB%A6%AC