-
JavaScript와 DOM신나는 JavaScript 2022. 1. 13. 21:57
1. DOM(Document Object Model)
구조화된 문서를 객체로 표현하는 방식
2. 웹브라우저 동작 과정
- Html파일 가져오기(보통 Html파일은 웹서버로부터 가져옴)
- 가져온 Html파일을 파싱(parsing)하여 DOM tree생성, CSS정보를 파싱하여 CSSOM tree생성
- DOM/CSSOM tree기반 Render tree생성
- Render tree기반, Rendering
3. 웹브라우저 동작과정과 javascript
- Javascript코드를 <head>내에 <script>로 넣으면, html코드를 기반으로 DOM트리를 구성하기 전에, script를 만나면, 자바스크립트 엔진에 제어권을 넘김
- 자바스트립트 엔진이 해당 javascript코드 파일을 로드해서 실행
- 이후에 다시 html로 넘어와서 나머지 html코드를 읽고, DOM트리 구성부터 화면에 표시까지를 진행하게 됨
- 따라서 <head>내에 javascript를 넣게 되면 화면로딩이 느려질 수 있음
- DOM tree 구성 전에 javascript가 실행되므로, DOM을 조작하는 javascript는 에러가 나거나, 정상 실행이 안될 수 있음
- Javascript코드는 </body>태그 직전에 <script>태그로 코드 파일 형태로 추가해주는 것이 좋다.
'신나는 JavaScript' 카테고리의 다른 글
Modern JS -기본문법 (0) 2022.12.29 Modern JS (0) 2022.12.28 비동기처리를 위한 Promise의 이해 (0) 2022.01.12 JavaScript 배열 (0) 2022.01.02 JavaScript 반복문 (0) 2022.01.02