TrackBy를 사용한 각속도 향상

<li 
  *ngFor="let item of items; 
  index as i; 

  trackBy: trackByFn">

</li>

위에 표시된 trackBy 지시문은 대규모 속도 향상 장치입니다. 그 이유는 그것이 가리키는 함수가 변경 사항을 추적하는 데 사용할 "색인"열을 Angular에 알려 주기 때문입니다. 고유 인덱스가 있는 데이터베이스와 마찬가지로 tranckByFn이 배열에서 고유 인덱스만 반환하도록 하면 Angular는 변경된 항목만 업데이트합니다!

페이징

firstName, lastName, 유형 및 주소 정보가 있는 People 배열을 가정합니다. 렌더링 지연은 2000개의 레코드에서만 나타납니다. 이것을 극복하는 한 가지 방법; 한 번에 적은 수의 레코드만 검색되는 페이징입니다.

두 가지 유형의 페이징 디자인은 다음과 같습니다.

- 클라이언트에서 페이징
- 서버/엔드포인트에서 페이징

어느 쪽이든 잘 작동하지만 적절한 구현을 위해 각각 약간의 생각이 필요합니다.

매트 테이블에는 페이징 이벤트가 내장된 내장paging control이 있습니다. 1초 미만 범위의 최대 응답 시간을 기준으로 페이지만 가져온다고 가정하면 페이지 이벤트를 통해 다음 요청을 계속 예상할 ​​수 있습니다. 이런 식으로 작동합니다.

초 이하 사양을 충족하기 위해 한 번에 200개의 레코드만 가져올 수 있습니다.

페이지네이터 페이지 크기는 페이지당 10개의 레코드로 설정됩니다.

사용자가 사용할 준비가 된 20페이지의 데이터가 있습니다.

각 페이지 이벤트가 실행될 때 추가 데이터를 가져올 시기를 결정합니다.

trackBy 기능이 제대로 구성되고 작동하는지 확인합니다.

각각의 새로운 get은 앞에서 설명한 고유 인덱스 공식을 사용하여 기존 배열에 추가됩니다.

Angular는 trackBy를 기반으로 하는 렌더링을 보존하며 배열에 대한 새 항목만 필요할 때만 렌더링됩니다.

멋진 소리? Read this for confirmation

또 다른 고려 사항: 이제 우리 대부분은 Async Everywhere 패턴을 구현하고 있으므로 렌더링이 필요할 때 데이터가 이미 있거나 버퍼에 병합할 준비가 되어 있다는 점에서 방정식에 도움이 되는 데이터에 대한 여러 Async 요청을 보낼 수 있습니다.

JWP2020 트랙비