대규모 데이터 세트로 이러한 과제를 극복하기위한 가장 인기 있고 확장 성이 뛰어난 방법은 Ionic의 collectionRepeat 지시문 및 이와 유사한 다른 구현 방식으로 구현됩니다. 이것에 대한 멋진 용어는 ‘오 클루 전 컬링’ 이지만, 요약하면 렌더링 된 DOM 요소의 수를 50, 100, 500과 같은 임의의 (그러나 여전히 높은) 페이지 매김 된 숫자로 제한하지 마십시오 … , 제한 사용자 만 많은 요소를 볼 수에 .

일반적으로 “무한 스크롤”로 알려진 것과 같은 작업을 수행하는 경우 초기 DOM 수를 약간 줄이려고하지만 몇 가지 새로 고침 후에는 모든 새 요소가 맨 아래에 고정되어 있기 때문에 빠르게 증가합니다. 스크롤은 요소 수에 관한 것이기 때문에 스크롤이 크롤링됩니다. 그것에 대해 무한한 것은 없습니다.

반면, collectionRepeat접근 방식은 뷰포트에 맞는만큼의 요소 만 사용한 다음 재활용하는 것 입니다. 한 요소가 시야에서 벗어나면 렌더 트리에서 분리되어 목록의 새 항목에 대한 데이터로 다시 채워진 다음 목록의 다른 쪽 끝에있는 렌더 트리에 다시 연결됩니다. 이것은 사람이 DOM으로 들어오고 나가는 새로운 정보를 얻는 가장 빠른 방법으로, 기존의 생성 / 파괴주기 인 생성 / 파괴주기보다는 제한된 기존 요소 세트를 사용합니다. 이 방법을 사용하면 무한 스크롤을 실제로 구현할 수 있습니다 .

Ionic을 사용하여 / hack / adapt collectionRepeat또는 이와 유사한 도구 를 사용할 필요는 없습니다 . 이것이 그들이 오픈 소스라고 부르는 이유입니다. 🙂 (이온 팀은주의를 기울일만한 아주 독창적 인 일을하고 있습니다.)

React에서 매우 비슷한 것을하는 훌륭한 예가 적어도 하나 있습니다. 업데이트 된 컨텐츠가있는 요소를 재활용하는 대신 트리에서 보이지 않는 것을 렌더링하지 않기로 선택하는 것입니다. 매우 간단한 POC 구현으로 약간의 깜박임이 허용되지만 5000 항목에서 빠르게 타 오르고 있습니다 …

또한 … 다른 게시물 중 일부를 반향하려면 track by작은 데이터 세트에서도 사용하는 것이 매우 유용합니다. 필수라고 생각하십시오.

답변

var app = angular.module("app", ['sly']);

<tr sly-repeat="m in rows"> .....<tr>

<span ng-bind="::stock.name"></span>

<div ng-repeat="stock in ::ctrl.stocks">{{::stock.name}}</div>

<div ng-repeat="a in arr track by a.trackingKey">

<div ng-repeat="a in arr">

function applyItemlist(items){
    var item = items.shift();
    if(item){
        $timeout(function(){
            $scope.items.push(item);
            applyItemlist(items);
        }, 0); // <-- try a little gap of 10ms
    }
}