Weekly I Learned Week03
👊 DOM(Document Object Model)
웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 브라우저가 트리구조로 만든 문서 객체 모델을 의미
다시 말해, DOM은 HTML과 스크립팅언어(Javascript)를 서로 이어주는 역할을 한다
- 문서 객체
문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는
(메모리에 보관할 수 있는) 객체를 의미한다.- Javascript는 어떻게 HTML 태그들을 조종할 수 있는 걸까?
document라는 전역 객체를 통해 접근할 수 있다.
또한 window라는 객체는 document객체의 상위에 위치한다.👊 DOM의 목적은?
자바스크립트를 사용해서 웹콘텐츠 추가, 수정, 삭제 그리고 이벤트 처리 등을 할 수 있게 해준다
출처: 빈둥벤둥ITlogging
👊 가상DOM(Virtual DOM)
DOM은 스크립트 언어를 사용하여 document 객체를 통해 문서(HTML, XML등)에 접근할 수 있도록 도와주는 역할을 하며, 가상 DOM은 실제 DOM의 가벼운 사본이다
👊 가상DOM(Virtual DOM)이 나오게 된 이유
속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선하고자 가상돔(Virtual DOM)이 나왔다.
👉 DOM자체는 빠르다
요즘 흔히 접하는 큰 규모의 웹 애플리케이션(트위터,페이스북)은
스크롤바를 내릴 수록 수많은 데이터가 로딩된다. 그리고 각 데이터를 표현하는 요소들이 있다.
요소 개수가 몇 백 개, 몇 천 개 단위로 많은 규모가 큰 웹 애플리케이션에서
DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 조금씩 발생하기 시작한다.
즉, 느려진다는 말인데 이것이 정확한 말은 아니다
읽고 쓸 때의 성능은 자바스크립트 객체를 처리 할 때의 성능과 비교하여 다르지 않다
단, 웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고,
페이지를 리 페인트 즉 렌더링이 일어 나는 이 과정에서 시간이 허비되는 것이다.
그리고 이 렌더링 과정은 상황에 따라 여러번 반복하여 발생할 수 있고,
돔이 추가,삭제 혹은 태그 위치가 변하는 경우 *렌더링이 일어난다.
*렌더링
브라우저 로딩 과정 중 스타일 이후의 과정(스타일-> 레이아웃 -> 페인트 -> 합성)
출처: 개발자시니
경듀님