[브라우저] 브라우저의 렌더링 과정

 

브라우저란 동기적(Synchronous)으로 HTML, CSS , Javascript 를 해석하여 해석한 내용을 화면에 보여주는 소프트웨어이다. 

•  브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript를 처리한다. 이것은 script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있다는 것을 의미한다. 그래서 꼼수로 body 태그의 끝쪽에 script태그를 위치시켜라 하는 게 이 이유라고 생각합니다. HTML5부터는 script의 어트리뷰트로 defer/ async를 제공하고 있기 때문에 해당 문제를 해결할 수 있습니다.

 렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다. 

 

🤸‍♀️한 문단으로 간단하게 설명

  사용자가 웹 사이트에 방문하게 되면 웹 브라우저는 필요한 리소스들(HTML, CSS, JS)를 서버에 요청하여  받아오게 된다. 그 다음 렌더링 엔진이 HTML과 CSS를 파싱하여 DOM트리와 CSSOM트리를 만든다. 둘을 결합하여 렌더 트리를 생성한다. 렌더링 엔진은script 태그를 만나면 DOM생성을 잠시 멈추고 JS엔진에게 권한을 넘기게 된다. 자바크립트 코드는 자바스크립트 엔진에서 파싱하여 실행시킨다. 작업이 끝나면 다시 렌더링 엔진으로 제어권을 넘기고 DOM 생성을 이어나간다. 렌더 트리 생성이 완료되면 레이아웃 작업을 통해 사용자에게 최종 화면을 보여주게 된다. 

 

 

상세 설명 링크▼

웹 브라우저의 동작 원리를 알아보자

파싱이란 무엇인가?