브라우저 환경의 자바스크립트

DOM (Document Object Model)

• HTML, XML 문서의 프로그래밍 interface
• 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 도움
• nodes와 objects로 문서 표현
• 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할 담당

 

브라우저 렌더링 순서

1. html 다운로드 → dom tree
2. link 태그를 만나면 css 다운로드 → cssom tree
3. script 만나면 해석이 끝날 때까지 렌더링 중지
4. img와 같은 외부 리소스 파싱
5. dom과 cssom 합쳐서 render tree 생성
6. layout (reflow) : 배치, 배치가 바뀌지 않으면 dom이 바뀌어도 생략
7. paint (repaint) : 그리기, 배치가 바뀌어도 필수
8. render

<script> 태그

• html 파싱 중에 script를 만나면, script를 다운받고 실행하는 동안 파싱 중단됨
• body 태그 하단에 들어감 : head 태그 또는 body 태그 중간에 넣으면 아직 존재하지 않은 dom 접근 에러 등의 문제 발생 가능
• async
  • 다운로드 중에 HTML 파싱을 막지 않지만, 다운로드가 완료되면 즉시 실행
  • 실행하는 동안 브라우저는 HTML 파싱을 멈춤
  • 독립적인 스크립트 또는 실행 순서가 중요하지 않은 경우에 적용
• defer
  • 다운로드 중에 html 파싱을 막지 않고, </html>을 만났을 때 실행
  • 외부 스크립트에서만 유효 (src 없으면 무시)
  • DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용함