Portfolio

DOM fragment (1)

브라우저 동작원리

통신

서버와의 통신

브라우저가 서버에 요청을 보내고 서버는 응답함

렌더링

DOM객체를 화면에 그리는 것

DOM : 통신을 통해 받은 HTML을 브라우저가 읽어 생성됨(트리구조로 이루어짐)

스크립트 실행

자바스크립트 실행

브라우저가 스크립트 탭을 통해 자바스크립트 파일을 읽고 실행 시킴 → 동적인 화면 구성

브라우저 렌더링 과정

HTML 읽고 parsing하여 DOM tree 구성 → DOM Tree

스타일 시트 parsing하여 style rules 만들고 DOM요소에 스타일을 입혀 만듦 → CSSOM Tree

⇒ 1 + 2: Attachment(DOM + CSSOM)

Render Tree: Layout or Reflow를 통해 DOM 노드의 위치 정해줌

render tree를 실제 화면에 그려줌

복수 노드 생성과 추가


const $fruits = document.getElementById('fruits');
    ['Apple', 'Banana', 'Orange'].forEach(text => {
	      //1. 요소 노드 생성
	      const $li = document.createElement('li');
	      $li.textContent = text;
	
	      //2. $li요소 노드를 $fruits 요소 노드의 마지막 자식 노드로 추가
	      $fruits.appendChild($li);
})

3개의 요소 노드 생성하여 DOM에 3번 추가 → DOM이 3번 변경 ⇒ 리플로우와 리페인트 3번 실행됨

컨테이너 사용

컨테이너 미리 생성한 다음 DOM에 추가할 3개의 요소 노드를 컨테이너의 자식요소로 추가

컨테이너 요소를 #fruits의 자식요소로 추가

→ DOM이 한 번만 변경됨

⇒ 불필요한 컨테이너 요소가 DOM에 추가되는 부작용

DocumentFragment

문서, 요소, 어트리뷰트, 텍스트와 같은 노드 객체의 일종
부모 노드가 없어서 기존 DOM과는 별도로 존재
별도의 서브 DOM을 구성하여 기존 DOM에 추가하기 위한 용도로 사용
DocumentFragment노드를 DOM에 추가하면 자신은 제거되고 자신의 자식 노드만 DOM에 추가된다

⇒ 리플로우 방지


const $fruits = document.getElementById('fruits');

    //  DocumentFragment 노드 생성
    // 비어있는 DocumentFragment생성하여 반환
    const $fragment = document.createDocumentFragment();

    ['Apple', 'Banana', 'Orange'].forEach(text => {
      //1. 요소 노드 생성
      const $li = document.createElement('li');
      $li.textContent = text;

      //2. $li요소 노드를 DocumentFragment 노드의 마지막 자식 노드로 추가
      $fragment.appendChild($li);
    });

  //  3. DocumentFragment 노드를 #fruits 요소 노드의 마지막 자식 노드로 추가
  $fruits.appendChild($fragment);

실제로 DOM변경이 발생한 것은 한 번!

리플로우와 리페인트도 한 번만 실행됨