웹 사이트 및 앱에서 대용량 목록을 더 빨리 렌더링하는 방법

웹 사이트 및 앱에서 대용량 목록을 더 빨리 렌더링하는 방법

많은 웹 사이트에서 목록을 스크롤하는 자신을 발견할 수 있습니다. 어떤 것들은 더 단순하지만, 다른 것들은 더 공상적이다. 현대의 웹사이트들은 많은 콘텐츠를 갖추고 있지만 아무도 반응이 느린 경험을 좋아하지 않는다. 성능이 좋지 않으면 사용자가 튕겨나갈 가능성이 높습니다. 따라서, 우리는 사용자 경험을 최대한 즐겁게 만들기 위해 노력합니다.

컨텐츠 목록을 대량으로 렌더링하는 것은 다음과 같은 여러 가지 이유로 인해 어려울 수 있습니다.

다음은 컨텐츠 목록을 렌더링할 때 인식되는 성능과 실제 성능을 모두 개선하는 데 도움이 되는 몇 가지 일반적인 전략입니다.

이러한 전략을 실제로 적용할 수 있는 방법에 대해 자세히 살펴보겠습니다. 코드 예시는 Angular framework를 사용하겠습니다. 그러나 이러한 전략은 사용하는 플랫폼 또는 프레임워크에 관계없이 적용할 수 있습니다.

백엔드에서 발생하는 유휴 로드 결과

아마존에서 새 노트북을 찾는다고 가정해 보자. 수천 가지의 다양한 노트북 모델을 사용할 수 있습니다. 사용자는 각 모델을 검사하지 않을 수 있습니다. 오히려 처음 10개의 결과를 보고 표시된 결과가 만족스럽지 않을 경우 계속 스크롤할 수 있다. 따라서 백엔드에서 적절한 수의 결과를 요청하고 사용자가 더 많은 결과를 요청할 경우 계속해서 더 많은 결과를 요청하는 것이 좋습니다.

인기 있는 기술은 무한 스크롤을 사용하는 것이다. Twitter, YouTube, Instagram과 같은 인기 있는 웹사이트들은 무한 스크롤을 사용하여 계속 스크롤할수록 더 많은 결과를 가져옵니다. 무한 스크롤을 쉽게 사용할 수 있는 ngx-무한 스크롤과 같은 타사 라이브러리가 있다. 일반적으로 구현은 매우 간단합니다.

뷰포트 내부의 내용만 렌더링

웹 사이트와 응용 프로그램의 많은 콘텐츠가 즉시 표시되지 않습니다. 백엔드에서 가져온 결과 수를 제한하더라도 사용자는 모든 결과를 한 번에 볼 수 없습니다. 따라서 표시되지 않는 UI 요소를 렌더링하지 않음으로써 렌더링 속도를 높일 수 있습니다.

가상 스크롤은 화면에 맞는 요소만 렌더링하여 많은 요소 목록을 성능적으로 렌더링하는 데 사용되는 기술입니다. 무한 스크롤과 다른 점은 보이지 않는 요소가 전혀 렌더링되지 않는다는 것입니다. 이렇게 하면 렌더링된 목록 요소의 양을 최소한으로 유지할 수 있습니다. 가상 스크롤을 구현하는 Angular CDK와 같은 타사 라이브러리가 있습니다.

목록 요소에 이미지가 포함된 경우 이미지를 느리게 로드하여 성능을 개선하고 소비된 대역폭을 동시에 줄일 수 있습니다. 최신 브라우저를 사용하면 이미지를 게으르게 로드할지 여부를 지정할 수 있습니다. 이 경우 브라우저는 사용자가 이미지를 가까이 스크롤한 경우에만 해당 이미지를 로드하기 시작합니다.

변경되지 않은 요소를 재렌더하지 않음

정렬 및 필터링은 사용자가 관련 결과를 찾는 데 도움이 되는 일반적인 기능입니다. 목록을 필터링하거나 정렬할 때 클라이언트는 다음과 같은 몇 가지 작업을 수행합니다.

UI 렌더링을 발생시켜 사용자가 느릴 수 있습니다. 따라서, 우리는 재렌더링의 양을 최소한으로 유지하기를 원합니다. 일부 결과는 목록을 필터링하거나 정렬할 때 보관됩니다. 이러한 결과는 변경되지 않았으므로 다시 렌더링할 필요가 없습니다. 성능을 향상시키는 한 가지 방법은 변경되지 않은 요소를 다시 렌더링하지 않는 것입니다.

Angular에는 trackBy라는 메커니즘이 내장되어 있다. Angular에 배열에서 항목의 변경 사항을 추적하는 방법을 알려주는 함수만 지정하면 됩니다. 아래 예에서는 uuid 속성이 이 작업에 사용됩니다. 이제 필터링을 적용할 때 이전에 렌더링되었지만 여전히 존재하는 요소는 다시 렌더링되지 않습니다.

UI를 렌더링하는 데 필요한 작업량 감소

작업이 실행되는 순서는 성능에 있어 큰 차이를 가져올 수 있습니다. 아래 예는 도시 목록을 보여줍니다. 도시에는 1,000개의 응모가 있다고 가정해 보자. 목록을 정렬하고 필터링하기 위해 사용자 지정 Angular 파이프(SortByName, Remove SmallCity) 2개가 사용됩니다.

추측할 수 있듯이, 두 번째 접근 방식은 성능 면에서 더 나은 가격을 제공합니다. 작은 도시들을 제거함으로써, 분류될 목록은 더 작아질 것이고, 따라서 더 적은 일을 할 필요가 있다.

화면이 비어 있지 않도록 로드 상태 표시

빈 화면은 사용자에게 초대되지 않습니다. 특히 무엇을 기대해야 할지 모를 경우 주의 시간이 짧습니다. 만약 그들이 빈 화면을 너무 오래 본다면, 그들은 튕겨나갈 것이다. 물론 일부 작업은 1초 이상 걸릴 수 있으며, 이를 개선하기 어렵습니다(예: 타사 API 호출).

실제 성능 외에도, 인식된 성능도 있으며, 이는 확실히 개선될 수 있습니다.

다음은 Angular 애플리케이션에서 데이터를 비동기적으로 가져오는 동안 스피너를 표시하는 간단한 방법입니다.

결론

대형 리스트의 렌더링 성능 향상에 관한 이 기사를 읽어주셔서 감사합니다. 보시다시피 성능을 향상시켜 훌륭한 사용자 환경을 조성하는 방법은 여러 가지가 있습니다.

리스트 렌더링 성능을 향상시킬 수 있는 다른 방법을 알고 계십니까? 댓글로 알려주세요.

from http://devcloset.tistory.com/124 by ccl(A) rewrite - 2021-03-18 01:00:35