새 휴대전화 카드가 빅데이터를 표시하는 방법

프런트엔드 성능 최적화에 대해 이야기할 때마다 빅데이터 목록의 제시는 항상 일반적인 주제입니다. 브라우저가 DOM을 처리하는 방식에 따라 일단 목록 데이터가 충분히 커지면 CPU 및 메모리 사용량으로 인한 지연 문제가 필연적으로 발생합니다. 따라서 큰 데이터 목록의 경우 이를 표시하기 위해 특별한 방법만 사용할 수 있습니다.

이 문제에 직면했을 때 직관적인 반응은 그것을 작은 조각으로 잘라서 제시하는 것입니다. 예를 들어, 현재 100,000개의 데이터가 있는데 처음 1,000개만 표시되고 그 다음 데이터는 스크롤 막대가 슬라이드되면서 점차적으로 표시됩니다. 그러나 이 방법으로 인해 목록 높이가 변경되면 사용자에게 매우 나쁜 슬라이딩 경험을 제공하게 됩니다. 데이터를 보충하거나 원래 목록을 대체하는 경우 사용 방식이 표준 스크롤 막대와 매우 다릅니다. 그러므로 단지 분할만으로는 충분하지 않습니다.

높이 결정

목록 높이 변경으로 인한 스크롤 문제를 방지하기 위해 큰 목록이 표시될 때 높이를 먼저 계산해야 합니다. 즉, 100,000개의 데이터를 제시해야 한다면 처음 1,000개만 먼저 제시하더라도 10,000개의 데이터에 대한 총 높이를 먼저 계산하여 가장 바깥쪽 컨테이너에 설정해야 한다. 그 목적은 슬라이딩할 때 표시되는 데이터가 변경되지만 컨테이너의 전체 높이는 변경되지 않아 경험이 일반 스크롤 막대의 경험과 일관되게 유지되는 것입니다.

100,000개 데이터의 높이를 설정한다는 것은 각 데이터 조각의 높이를 알아야 한다는 의미입니다. 코드 구현 수준에서 해당 높이를 얻기 위해 하나의 데이터를 표시할 수 있습니다. 이러한 방식으로 전체 컨테이너의 높이를 결정할 수 있을 뿐만 아니라 세로 좌표의 각 데이터 조각의 시작 위치도 결정할 수 있어 후속 슬라이딩 표시의 기초를 제공할 수 있습니다.