[개발면접대비]브라우저의 렌더링 원리 (⭐️⭐️⭐️⭐️⭐️)

 

브라우저에 화면이 렌더링되는 원리에 대해 설명해주시겠어요?🧐

 

브라우저는 동기적으로 화면 구성에 필요한 html,css,javasript 파일들을 서버로부터 받아옵니다.

브라우저가 입력된 url에 의해 html파일을 받으면 html을 먼저 파싱하게되고 이때 DOM트리를 만듭니다.

이때 link 태그를 만나서 stylesheet를 내려받게 될 경우 CSS파싱을 통해 CSSOM트리를 만듭니다.

두 개의 트리가 완성이 되면 둘을 합쳐서 렌더 트리를 만들고,

레이아웃 작업을 통해서 사용자에게 그려줄 영역을 계산한 뒤 사용자에게 보여줍니다.

 

javascript는 렌더링 엔진이 아닌 자바스크립트 엔진에 의하여 처리가 됩니다.

브라우저가 html을 파싱하다가 scipt 태그를 만나면 DOM트리 만들기를 잠시 중단하고

자바스크립트 엔진으로 통제권한을 넘기게 됩니다.

그럼 자바스크립트는 script 태그 안에 JS코드나 src 속성에 입력된 JS 파일을 실행합니다. 

JS파일의 실행이 끝나면 다시 HTML을 파싱을 시작하고 DOM트리를 만드는 과정을 재개합니다.

그 과정이 끝나면 역시 레이아웃 작업을 통해 사용자에게 최종 화면을 보여줍니다.