DOM(문서 개체 모델) HTML 태그의 트리 구조에 대한 일반적인 이름입니다. 페이지 속도에 미치는 영향은 페이지 렌더링 중 HTML 구조가 복잡할수록 페이지 속도가 느려지는 것과 같습니다.

Lighthouse에 따르면, DOM 구조는 세 가지 측정항목을 사용하여 측정됩니다.. 이러한 측정항목에 참조점을 제공하려면 다음 안내를 따르세요.

  • 총 태그 수는 다음과 같아야 합니다. 1500 이하
  • 최대 태그 깊이는 다음과 같아야 합니다. 32 이하
  • 하위 태그의 최대 개수는 다음과 같습니다. 60 이하

위의 예에서는 총 태그 수가 낮고 최대 태그 깊이도 좋지만 최대 하위 태그 수가 좋지 않습니다.

DOM 요소를 최적화하는 것은 전적으로 프런트엔드 이해관계자의 책임입니다. 페이지 코드가 처음 생성될 때 무작위 또는 임의로 선택된 모든 태그에는 프로젝트가 완료되면 비용이 발생합니다. 그러므로 우리는 모든 프론트엔드 개발자들이 침묵의 순간에 눈을 뜨도록 초대합니다.

부풀려진 DOM이 페이지 성능에 부정적인 영향을 미치는 점은 다음과 같습니다.

  • 노드(태그) 수가 많은 페이지에서는 큰 크기로 인한 네트워크 정체 및 로딩 어려움, 따라서 TTFB(Time to First Byte)가 증가합니다.
  • 로드된 노드를 렌더링하여 생성 그들의 위치와 스타일에는 시간이 걸립니다, 따라서 FCP(첫 번째 콘텐츠가 포함된 페인트)가 증가합니다.
  • 노드 수가 증가함에 따라 필요한 로드는 다음과 같습니다. JavaScript 조작은 메모리에 부담을 줍니다, TFT(Time to Interactive)가 증가합니다.

매우 간단한 예로 DOM 최적화를 설명하려면 DOM의 수와 깊이가 모두 감소된 다음을 고려하세요.

<div id="nav-element">
 <ul>
 </ul>
</div>

이렇게 하는 대신:

<ul id="nav-element">
</ul>

DOM 크기를 줄이기 위해 가장 권장되는 두 가지 방법은 지연 로딩과 페이지 매김입니다. 목록 페이지의 카드 구조에는 많은 DOM이 포함되어 있으므로 무한 스크롤 또는 페이지 매김이 제안됩니다. 페이지 매김 항목 수를 결정할 때 DOM 측정 기준을 반드시 고려해야 합니다. 일반적으로 고려되는 시간 페이지 매김의 제품 수는 15-20초입니다.하지만 이 부분은 실제로 DOM 크기를 고려하여 프런트엔드 이해관계자 측에서 계산해야 합니다.

매우 간단한 해결책 중 하나는 요소를 추가하지 않는 것입니다. CSS로 숨기지 않고 HTML 페이지에 표시되지 않는 항목. 요소를 표시해야 하는 경우 나중에 호출하여 사용자에게 표시해야 합니다. CSS로 요소를 숨기면 DOM이 확대된다는 점을 기억해야 합니다.

출처 :