DOM 관련 개념

DOM에 대해 스터디를 진행하면서 스터디원들의 정리한 내용을 보고 새로 알게된 내용이 있다. 다음 3가지 링크를 참고하였다.

1. https://dabiny.notion.site/38-31b29be1710445a48d69dce595bc2829
2. https://dabiny.notion.site/39-DOM-a5b1fb593e144b36a5c2e7c8cb0b37dd
3. https://veil-shock-17c.notion.site/JS_DOM-e89cd36e4ff54e8a9dc311a1c1ee48d9

---

파싱

=> HTML 등의 큰 자료에서 내가 원하는 자료만 가공하고 추출해서 불러오는 것

렌더링

=> HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것

브라우저의 Rndering 과정

1. 렌더링에 필요한 리소스 요청 후 서버로부터 응답 받음
2. HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성 결합해 Render Tree 생성
3. Render Tree를 기반으로 레이아웃을 계산해 HTML요소 페인팅

async

=> HTML 파싱과 JS 로드가 동시에 진행
=> JS 파싱, 실행은 JS 로드 직후에 실행

defer

=> HTML 파싱과 JS 로드가 동시에 진행
=> JS 파싱, 실행은 HTML 파싱 즉 DOM 완성 후 실행