본문 바로가기

dom2

210708_Virtual DOM 이 빠른 이유 VirtualDOM 이 빠른 이유 브라우저 렌더링 에 대한 이해 VirtualDOM 이 빠른 이유 프론트앤드를 공부하다보면, "Virtual DOM" 이라는 단어를 한번씩 마주치게 됩니다. 많이 사용되는 프레임워크들은, 주로 Virtual DOM 을 사용해서 속도를 올립니다. 어떻게 이렇게 빠른걸까요? 그리고 왜 실제 DOM 은 느리고 비효율적일까요? 브라우저 렌더링 에 대한 이해 사실 프론트앤드 개발자들은 복잡하더라도 DOM 을 기본적으로 이해할 필요가 있습니다. HTML/CSS 페이지만 서버에서 요청해온다고 가정해보겠습니다. JS 는 여기서 필요하지 않습니다. HTML/CSS 형식의 파일을 응답으로 받은 후에는, 아래와 같은 일들이 일어납니다. 1. HTML 파싱 브라우저는 HTML 파일들을 파싱하고.. 2021. 7. 8.
Vue - Virtual DOM에 대하여 Vitual DOM - 가상 DOM DOM 이란? Virtual DOM에 대해 들어가 보기 전에, DOM 이 무엇인지 살펴보도록 합시다. DOM은 Document Object Model(문서객체모델) 이고, 기본적으로 HTML 마크업과 HTML 요소를 위한 객체로 구성되어 있습니다. 이 객체들은 tree 구조로 저장되어있는데, 브라우저는 이 구조를 웹 페이지를 로딩할 때 만들어내고, DOM은 우리에게 interaction(상호작용)과 HTML 요소(elements나 css 등)를 제작할 수 있도록 합니다. DOM을 이용하는것은 규모가 작은 웹 어플리케이션을 작업할때 아주 깔끔하지만, 앱이 커지면 커질수록, DOM을 직접 제작하는일은 느려지며, 비효율적입니다. 이것이 Virtual DOM이 생겨나게 된 이.. 2020. 7. 26.