브라우저 랜더링 1(과정)

 브라우저 랜더링을 알기 전 간단하게 알아보자 

1) 브라우저 구성요소 

2) 각각의 요소들이 어떤기능을 해서 브라우저가 랜더링하는지 

 

브라우저 구성요소

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

다음과 같은 요소들이 있고 설명은 아래와 같다

• 사용자 인터페이스 : 주소표시줄, 이전 및 다음 버튼 새로고침 북마크등 보여주는 페이지를 제외한 부분
• 브라우저 엔진 : 사용자 인터페이스와 렌더링  엔진 사이의 동작을 제어
• 랜더링엔진 : 요청한 콘텐츠를 표시 요청을 통해 받아온 정보를 HTML과 CSS로 파싱해서 화면에 표시
• 통신레이어 : HTTP요청과 같은 네트워크 호출에 사용됨 플랫폼 독립적인 인터페이스이고 각 플랫폼하부에서 진행됨
• 자바스크립트 해석기 :자바스크립트 코드를 해석하고 실행
• 자료 저장소 :자료를 저장하는 계층  쿠키, 로컬스토리지 등 
• UI 백엔드 : 브라우저가 동작하고있는 운영체제의 인터페이스를 따르는 UI 처리 alert나 select box emd

 

 

시나리오로 알아보면 

 

사용자인터페이스에서 주소를 입력하든 뒤로가기를 하든 동작을 수행하면 

->  브라우저 엔진은 먼저 자료 저장소에서 찾아보고(캐싱)  없으면 해당 명령을 랜더링 엔진으로 전달함 (잦은 통신 낭비 방지)

->  랜더링엔진은 URI에 해당하는 데이터를 파서를 통해서 html ,css를 파싱해서 통신레이어와 자바스크립트 해석기 ui 백엔드에 전달

-> 통신레이어는 HTTP 요청을 서버로 보내고 서버에서 받은 응답을 랜더링엔진에 전달

-> 자바스크립트 해석기에서 자바스크립트를 파싱 랜더링엔진에서 파싱한 DOM tree를 조작

조작이 완료된 DOM은 render tree로 변경

->ui 백엔드는 최종적으로 랜더링엔진에서 생성된 랜더트리를 브라우저에 그림

 

간단하게 단계를 알아보면 이렇습니다

다음은 랜더링엔진의 동작을 상세하게 알아보면서 리액트를 공부하면서 한번쯤은 봤던 랜더링 최적화가 뭔지 

알아보겠습니다