지연 로딩이 있는 가로 스크롤

최근에 저는 다음과 같은 시나리오를 접했습니다. 사용자가 칸반을 동적으로 생성할 수 있는 워크플로우 관리 소프트웨어(아래 이미지와 같은 것). 사용자 중 한 명이 칸반에 38개의 열을 갖도록 설정했습니다.

이 소프트웨어는 모든 칸반 열이 백엔드에 요청하는 방식으로 설계되었습니다. 이 시나리오에서는 사용자가 칸반 페이지에 액세스할 때마다 38개의 새로운 요청이 만들어졌습니다. 이것은 서버뿐만 아니라 데이터베이스에도 과부하를 줍니다.



먼저 요청 수를 줄여 사용자에게 표시되는 열에 대한 요청을 제한해야 했습니다. 그런 다음 사용자가 한 번에 페이지 끝까지 스크롤하면 열이 일정 시간 동안 표시되지 않는 한 데이터를 요청하지 않도록 해야 했습니다.

보이는 카드로 로드 제한

Javascript는 HTML 요소를 보고 화면에서 가시성을 확인할 수 있는 IntersectionObserver이라는 API를 제공합니다. 아래 코드는 가장 기본적인 작업을 보여줍니다.

const onIntersection = (elements) => {
    elements.forEach(element => {
      if (element.isIntersecting) {
          console.log(element, 'is visible');
      }
  });
};

const observer = new IntersectionObserver(onIntersection);

observer.observe(document.querySelector('.my-elements'));

함수onIntersection는 보이는 요소에 적용될 로직을 담당하며, 요소 목록을 가져와서 보이는 경우(element.isIntersecting) 무언가가 수행되는지 확인합니다. 이 경우 콘솔 메시지가 표시됩니다. 이 표시됩니다.
IntersectionObserver API 호출이 이루어지고 observer 변수로 설정됩니다. 그러면 observer 개체가 HTML의 요소를 관찰할 수 있으며 사용자 화면에 표시될 때만 논리를 실행할 수 있습니다. 내 경우에는 거대한 칸반의 경우 페이지가 5개로 로드될 때 38개 요청을 제한하기에 충분했지만 사용자가 한 번에 페이지를 끝까지 스크롤하면 여러 요청이 만들어질 것입니다(다른 33개 요청).

페이지에 보이는 요소의 일정 시간 이후에만 로드

IntersectionObserver API에는 특정 HTML 요소가 화면에 표시되는 시간을 캡처할 수 있는 version 2 기능이 있어 특정 시간이 지난 후에만 HTML 요소 로드 문제를 쉽게 해결할 수 있습니다. 그러나 버전 2는 여전히 대부분의 브라우저와 호환되는 구현이 없습니다.

제 경우에는 38개의 자식 요소를 렌더링하는 부모 구성 요소를 사용하고 있었고 38개의 자식 요소가 InsertersectionObserver로 관찰하기 위해 렌더링이 완료되었는지 확인할 수 없었기 때문에 각 요소가 화면에 표시되는 시간을 제어합니다. 조금 더 복잡해졌습니다.

38개의 하위 요소 각각은 자신을 렌더링하는 시기를 알고 있으므로 각각에 대해 내부적으로 IntersectionObserver를 사용할 수 있습니다. javascript의 setTimeout 함수를 사용하면 밀리초 단위로 지정된 특정 시간 이후에 요소를 관찰할 수 있습니다.

38개의 요소가 있지만 대부분은 화면에 표시되지 않고 스크롤할 때 표시됩니다. setTimeout 지연으로 인해 이 작업을 실행하는 데 여전히 시간이 걸립니다. 스크롤하는 동안 화면에 표시되는 요소가 아직 지정된 항목setTimeout을 트리거하지 않고 사용자가 이미 다음 요소로 스크롤한 경우 스택에서 이전 요소의 시간 초과를 제거한 후 다음 요소만 로드할 수 있습니다. 요소. 다음 코드는 이 전략을 보여줍니다.

<div class="border border-black m-1 p-10 min-w-max h-10"
       x-data=""
       x-init="() => {
           let timeout;
           let loadColumn = function (elements) {
               clearTimeout(timeout);

               timeout = setTimeout(function() {
                   elements.forEach(element => {
                       if (element.isIntersecting) {
                           // do something
                           observer.unobserve(element.target);
                       }
                   });
               }, 750);
           }

           let observer = new IntersectionObserver(loadColumn);
           let target = $el;
           observer.observe(target);
       }">
  </div>

구성 요소가 페이지에 로드되면 이미 loadColumn 함수를 사용하여 자체 보기를 시작합니다. 이러한 함수는 실행 스택에서 이전 시간 초과(트리거되지 않은)를 제거하고 750밀리초 후에 무언가를 수행하고 요소가 다시 표시되는 경우 동일한 논리를 다시 실행하지 않도록 관찰을 제거하는 새 시간 초과를 추가합니다.

제 경우에는 로직이 서버에 대한 요청이었기 때문에 데이터를 한 번만 로드한 다음 요소가 페이지에 다시 표시되면 무시하면 되었습니다.

Did you find the above code syntax strange? This javascript microframework is called AlpineJS and that's what I used to develop the complete solution.

서버에 대한 요청이 없는 더 간단한 POC는 아래에서 볼 수 있습니다. 화면에 표시되면 흰색 사각형이 검은색으로 바뀌어 서버에 대한 요청을 나타냅니다.



바닐라 자바스크립트this was my reference가 포함된 솔루션에 관심이 있는 경우.