HTML렌더링 중 자바스크립트를 만난다면?

HTML이 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는데 그 이유는?

• 렌더링 과정 중에 <script> 태그를 만나게 되면 진행중인 HTML파싱을 중지하고 js엔진으로 제어 권한을 넘긴다. JS파싱과 실행이 종료되면 렌더링 엔진으로 다시 돌아가 파싱이 중단된 시점부터 다시 파싱을 시작한다.

• 이러한 원리 때문에 스크립트 소스는 body 태그 끝에 두는 것을 권장한다.

• 자바스크립트 파싱과 실행은 브라우저 엔진이 아닌 자바스크립트 엔진에서 처리한다.

• 만약 스크립트 파일을 먼저 로드하게 되는 경우
  - 스크립트가 문서를 파싱하는 동안 브라우저는 다른 작업을 수행하지 않기 때문에 스타일이 파싱되지 않은 상태가 되고
  - 이렇게 되었을때 화면 레이아웃이 제대로 구성되지 않은 상태로 사용자에게 뷰를 제공하게 될 확률이 높기 때문에 사용자 경험(UX)을 떨어뜨리는 결과를 초래하게 된다.

• 스크립트 소스를 하단에 두게 되면 HTML문서를 화면에 표시하는 속도가 빨라지게 되고 사용자가 뷰를 보는데 필요한 웬만한 문서를 해석한 상태기 때문에 사용자의 불편을 초래하지 않을 수 있다.

<요약>

• HTML렌더링 중 자바스크립트를 만나게되면?
  HTML 파서는 스크립트 태그를 만나게되면 렌더링 제어 권한을 자바스크립트 엔진으로 넘겨주게 되고, 문서를 파싱하는 과정을 중단한다.
  자바스크립트의 엔진의 권한이 끝나면 렌더링 과정으로 다시 돌아가서 중단된 시점부터 다시 파싱을 시작한다.
  이러한 원리로 스크립트 태그는 바디 끝에 위치하도록 권장한다.

바디 끝에 위치할 경우 HTML문서를 화면에 표시하는 속도가 빨라짐, 사용자가 뷰를 보는데 필요한 웬만한 문서를 해석한 상태기 때문에 사용자 불편 감소

• 스크립트 파일을 먼저 로드할 경우?
  스크립트가 파싱되는 동안에 HTML,CSS같은 다른 브라우저 문서 작업을 수행할 수 없기 때문에 화면의 레이아웃이 제대로 구성되지 않은 뷰를 사용자에게 보여주고 이는 사용자경험을 떨어지게하는 결과를 초래한다.

브라우저 렌더링과정

1. 서버로부터 HTML과 CSS 자원을 받아와서 DOM Tree와 SSOM Tree를 생성한다.
2. DOM Tree와 SSOM Tree로 브라우저에 레이아웃을 잡아줄 렌더트리를 생성한다.
3. 렌더트리 노드 있는 속성이나 스타일을 기반으로 브라우저에 크기, 위치, 크기에 맞게 레이아웃을 잡는다.
4. 브라우저에 페인트 한다.

출처

• 브라우저 렌더링이 이루어지는 과정
• 브라우저의 렌더링 과정, JS의 작동원리