수천 개의 데이터를 한 번에 가져올 때 DOM을 렌더링하는 방법은 무엇입니까?

Question

으아아아

Firebug로 측정한 시간입니다. 그룹에 8.3밀리초가 추가되고(방법 1), 5.74밀리초가 직접 추가됩니다(방법 2).

개인적으로 그룹화하면 DOM 렌더링이 줄어들고 지연이 방지될 것이라고 생각하지만, Firebug 테스트 생각과 다르게 나온게 데이터가 너무 작아서 그런걸까요?

Answer 1

실제로 그룹핑은 부담을 공유하지 않습니다. 타이머를 추가하고 시간 공유 기능을 사용해야 합니다

WebQQ용 QQ 친구 목록을 만드는 예가 있습니다. 목록에는 일반적으로 수백 또는 수천 명의 친구가 있습니다. 친구가 노드로 표시되는 경우 페이지에 목록을 렌더링할 때 페이지에 한 번에 수백 또는 수천 개의 노드를 만들어야 할 수도 있습니다.
단기간에 많은 수의 DOM 노드를 페이지에 추가하면 분명히 브라우저에 과부하가 걸릴 것입니다. 그 결과는 종종
브라우저의 끊김 현상 또는 심지어 정지된 애니메이션입니다. 코드는 다음과 같습니다:
으아악
이 문제에 대한 해결책 중 하나는 다음과 같은 timeChunk 함수입니다. timeChunk 함수를 사용하면 노드 생성 작업을 일괄적으로 수행할 수 있습니다. 예를 들어 1초에 1000개의 노드를 생성하는 대신 200밀리초마다 8개의 노드를 생성합니다.

으아악

위 내용은 Design Patterns 책에서 발췌한 내용입니다

Answer 2

귀하의 솔루션이 느린 이유는 다음과 같습니다.
$('.list').append(html);
이 코드가 반복될 때마다 dom 요소, 즉 $('.list'의 위치를 ​​변경해야 합니다. )jquery N을 반복하고 N번 위치 지정하는 것과 동일한 .list 문서를 가져와야 합니다. 이는 물론 비효율적이므로 두 번째 옵션은 한 번만 위치를 지정하고 모든 요소를 ​​추가하므로 분명히 더 효율적입니다. .. 배열 샤딩은 js에 전혀 반영되지 않습니다. 그러나 이는 효율성을 향상시키지 않습니다. 또한 JS 자체는 단일 스레드입니다. 나누어도 효율성은 동일합니다

Answer 3

한 번에 수천 개의 데이터를 얻는 것은 API 설계에 문제가 있음을 나타냅니다.

Answer 4

개인적으로는 첫 번째 방법이 더 많은 메모리와 시간을 소비한다고 생각합니다(볼륨이 작을 때). 첫째, 위의 명령문이 합산되어 더 많은 실행 시간이 발생합니다. 둘째, 여러 번 추가하는 것은 확실히 한 번에 추가하는 것만큼 좋지 않습니다.

Answer 5

한 번에 얻은 수천 개의 데이터가 한꺼번에 추가되지는 않습니다.

디스플레이의 중요성과 부차성에 따라 로드하는 것이 합리적인 접근 방식입니다. 먼저 볼 수 있는 항목을 로드한 다음 프로세스가 유휴 상태일 때 나머지 항목을 일괄적으로 페이지에 삽입합니다.