더 많은 DOM 요소가 성능 문제를 만듭니다.

Question

asp.net mvc, javascript 및 jQuery (로컬 컴퓨터에서 호스팅 됨)를 사용하여 응용 프로그램을 만들었습니다. 기본 디자인은 사용자가 한 페이지에서 다른 페이지로 이동할 때 HTML 페이지를 숨기고 표시하여 DOM 객체 (브라우저)에 모든 HMTL 요소를 파기하는 대신 보관했습니다.

매일 우리의 응용 프로그램이 커지고 있습니다. 이전에는 프로젝트에서 성능 문제가 발생하지 않았습니다. 하지만 요즘에는 한 페이지를 다른 페이지로 이동하는 데 오랜 시간이 걸립니다. 오늘 내 페이지에서 DOM 요소를 확인했는데 20,000 개가 넘었습니다.

질문 :

---

숨기기/HTML 페이지를 보여주는 것은 파괴하고 다시 만드는 것보다 더 좋은 디자인은 무엇입니까?

DOM 조작으로 20,000 개의 DOM 객체가있는 자바 스크립트에서 리플 로우 및 재 인쇄라는 용어의 성능에 미치는 영향은 무엇입니까?

Answer 1

single-page HTML5 spec itself은이 글을 쓸 당시 109k 개의 DOM 요소 (그리고 더 많은 DOM 노드)를 가지고 있습니다.

HTML 페이지를 숨기거나 표시하는 대신 삭제하고 다시 만드는 것이 좋은 디자인입니까? 대부분이 있는지 여부에 따라 달라집니다

필요 (예를 들어, 때문에 느린 것 제거 섹션을 다시 작성) 및/또는 가능성이 (사용자 상호 작용이 자주 숨겨진 부분이 다시 표시됩니다).

아래

A) 가비지 컬렉션을 늦출 수있는 여러 가지가 있습니다. more nodes = 가비지 컬렉터가 트래버스하는 모드 오브젝트. 원칙적으로 현대의 가비지 컬렉터는 수명이 긴 많은 객체를 오래된 영역에 채워서 다시 처리 할 수 ​​있어야하지만 모든 브라우저가 최첨단 GC를 갖는 것은 아닙니다. 문서 크기와 심하게 확장 자바 스크립트 코드

B) 리플 이벤트/DOM 쿼리/탐색 작업 등

C). 일부 O (n²) 알고리즘은 복잡한 응용 프로그램을 복잡하게 만들 수 있습니다. 콜백은 추가 콜백 등을 트리거합니다.

DOM 트리를 줄이려하지 않으면 a) 할 수있는 일이 많지 않습니다. 그러나 B) 및 c) 여러 가지 방법으로 최적화 할 수 있습니다 :

• 문서에서 하위 트리를 분리하고 자바 스크립트/문서 조각에 보관, 문서 트리를 통과하는이 방법은 아무것도 그들과 거래를 할 필요가 없습니다
• 1. 등의 레이아웃 상태 (예 : 계산 된 CSS 속성, 경계 사각형, 오프셋 등)를 읽는 작업은 인터리브하지 마십시오.)
     
     실행을 어떤 방식으로 또는 트리거 이벤트에서 DOM에
  2. 쓰기 읽기 및 자바 스크립트

에 리플 로우

최적화 핫스팟의 수를 최소화하기 위해 대량으로 별도로 기록하지만 그입니다 그냥 일반적인 지침. GC, 자바 스크립트 실행 또는 페인트 이벤트가 지배적인지 여부에 상관없이 CPU 시간을 먹는 것을 파악하기 위해 애플리케이션을 프로파일 링해야합니다.