>

플랫 트리 :

In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead are rendered as siblings in sequence

중첩 된 나무 :

In Nested tree, children nodes are placed inside their parent node in DOM. The parent node has an outlet to keep all the children nodes.

평평한 나무를 사용하여 표시하는 800 개의 요소 명명법이 있습니다.
가장 적합한 트리처럼 보였으므로 중첩 트리를 먼저 사용해 보았습니다. 빌드하는 데 깜박이는 데 DOM이 트리를로드하는 데 5 초가 걸리므로 플랫 트리를 사용해 보았으므로 완벽하게 작동합니다.

문제는 플랫 트리의 결과가 동일한 경우 중첩 트리를 사용하는 지점은 무엇입니까? 트리가 올바르게 렌더링되고 DOM이 계층 구조를 이해합니다.

플랫 트리의 DOM :

네스트 트리는 빌드하기가 더 어렵고 DOM이 표시 될 때마다 DOM을 명확하게 오버로드합니다. 평평한 나무로는 할 수없는 중첩 된 나무는 무엇을 할 수 있습니까? 자재 문서가 명확하지 않습니다.

  • 답변 # 1

    HTML이 Angular 또는 단순 플랫 파일을 통해 동적으로 렌더링 되더라도 중첩 트리에는 몇 가지 중요한 이점이 있습니다.

    이벤트 버블 링을 활용하면 DOM과의 사용자 상호 작용을 캡처하기 위해 작성해야하는 코드의 양을 크게 줄일 수 있습니다. 또한 둘 이상의 이벤트를 캡처해야 할 경우 중첩을 통해 이벤트를보다 쉽게 ​​수행 할 수 있습니다.

    자식 요소로 상속 될 부모 노드에 스타일을 적용 할 수 있으므로 서식을보다 세밀하게 제어 할 수 있습니다.

    필요한 트리는 LESS 또는 Sass와 같은 CSS 프리 프로세서를 사용할 때 큰 이점이 있습니다. 작성해야 할 스타일의 양을 크게 줄입니다.

    두 트리 렌더링 사이의 성능은 동일 할 수 있지만 연결 속도가 느리거나 모바일 서비스가 나쁜 사용자를 고려해야 할 때는 일반적으로 DOM 요소가 적을수록 좋습니다.

  • 이전 python - 여러 열에 대한 pyspark 데이터 프레임의 열에서 각 범주 형 변수의 빈도를 어떻게 계산합니까?
  • 다음 graph - MATLAB에서 플로팅 시간 대 주파수