HTML Rendering

Creator

Creator

Seonglae Cho

Created

Created

2020 May 6 1:47

Editor

Editor

Seonglae Cho

Edited

Edited

2021 Apr 4 11:36

Refs

Refs

HTML을 읽기 시작한다.

HTML을 파싱한다.

DOM 트리를 생성한다.

Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성되고

Display에 표시한다

notion image

이로인해 HTML태그들 사이에 script 태그가 위치하면 두가지 문제가 발생합니다.

HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.

DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.

태그는 어디에 위치해야 할까요?

태그는 어디에 위치하는 게 가장 좋을까요? 일단은 body 태그 최하단에 위치하는 게 가장 좋습니다. 이를 이해하기 위해선 브라우저의 동작 방식을 이해할 필요가 있습니다. 🔍 브라우저의 동작 방식 HTML을 읽기 시작한다. HTML을 파싱한다. DOM 트리를 생성한다. Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성되...

태그는 어디에 위치해야 할까요?

https://velog.io/@takeknowledge/script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C%EC%9A%94

태그는 어디에 위치해야 할까요?

DOMContentLoaded 내부의 코드는 DOM 생성이 끝난 후에 실행되고onload 내부의 코드는 문서에 포함된 모든 콘텐츠(images, script, css, ...)가 전부 로드된 후에 실행됩니다.

일반 script 코드 -> DOMContentLoaded 안의 코드 -> window.onload 안의 코드 순으로 출력

Recommendations

//////////