브라우저의 렌더링

1. 클라이언트에서 불러오고 싶은 파일을 서버에 요청한다.
2. 요청된 URI 를 DNS 를 통해 IP 주소로 변환한다.
3. 해당 아이피를 가진 서버에 get 요청을 보내고 HTML, CSS 파일을 다운받는다.
4. 다운받은 HTML 파일을 파싱하여 DOM 트리를 생성한다.
5. 다운받은 CSS 파일을 파싱하여 CSSOM(object model)을 트리를 생성한다.
6. dom 과 cssom 을 결합하여 렌더 트리를 형성한다.

• 렌더트리에는 에는 실제 화면에 표현되는 노드(요소)들로만 구성된다. 모든 노드가 들어가지는 않는다.

7. 레이아웃 단계: 렌더 트리를 기반으로 노드들의 위치와 크기등의 레이아웃을 계산한다.
8. 페인트 단계: 레이아웃 계산이 완료되면 화면에 페인트한다.

브라우저의 렌더링 과정에서 자바스크립트는 어떻게 동작하는가

1. html 을 한줄씩 파싱하며 DOM 을 만들어 나가다가 스크립트 태그를 만나면 DOM 을 일시적으로 중단한다.
2. script 태그의 src 특성에 정의된 자바스크립트 파일을 서버에 요청하거나 태그 안에 있는 코드를 파싱한다. 자바스크립트 파싱이 종료되면 다시 DOM 을 만들어나간다.
3. DOM 은 브라우저 렌더링 엔진이, 자바스크립트 파싱은 자바스크립트 엔진이 처리한다. 자바스크립트 엔진은 CPU 가 이해할 수 있도록 기계어로 변환해준다.

리플로우/리페인트

• 만약 자바스크립트 코드에 dom 이나 cssom 을 변경하는 경우 변경된 dom 과 cssom 은 다시 렌더 트리로 결합되고, 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링한다 = 리플로우, 리페인트

script 태그를 body 태그 밑에 둬야하는 이유

HTML 이 파싱되어 DOM 트리가 만들어지기 전에 특정 DOM 노드를 참조하는 스크립트가 실행될 경우 에러가 발생한다. 따라서 DOM 트리가 완전히 만들어진 이후 스크립트를 실행해야 한다.

생길 수 있는 문제

렌더링이 완료되면 스크립트를 로드하여 해석하는데, 이때 사용자가 보는 화면에는 이미 렌더링이 끝나있다. 이때 만약에 사용자가 상호작용을 시도하면 제대로 동작하지 않을 것이다. 아직 스크립트를 로딩하는 중이기 때문이다. 이런 문제 때문에 async 와 defer 이 등장했다. 이들은 브라우저가 html,css 파일과 스크립트 파일을 동시에 로드한다.

async/defer

• async
  html 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 단 자바스크립트의 파싱과 실행은 자바스크립트의 파일의 로드가 완료된 직후 진행되며 이때 html 파싱은 중단된다.
  여러개의 script 태그에 async 어트리뷰트를 지정하면 script 태그의 순서와는 상관없이 로드가 완료된 자바스크립트부터 먼저 실행되므로 순서가 보장되지 않는다.
  -> dom 이나 다른 스크립트에 의존성이 없고 실행 순서가 중요하지 않으면 script async

• defer
  async 와 마찬가지로 html 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 단 자바스크립트의 파싱과 실행은 html 파싱이 완료된 직후 즉 dom 생성이 완료된 직후 진행된다.
  -> dom 이나 다른 스크립트에 의존성이 있고 실행 순서가 중요하면 script defer