React implements a highly adaptive virtual list

Recently, during the development and iteration of a certain platform, I encountered a situation where an extremely long list was nested in an antd Modal and loaded slowly and jammed. So I decided to implement a virtual scrolling list from scratch to optimize the overall experience.

Before transformation:

We can see that before the transformation, there will be a short freeze when opening the edit window Modal, and after clicking Cancel to close it, it does not respond immediately but closes after a slight hesitation.

After transformation:

After the transformation is completed, we can observe that the opening of the entire Modal has become much smoother than before, and it can immediately respond to the user's click event to call up/close the Modal

Performance comparison Demo: codesandbox.io/s/av-list-…

0x0 Basics

So what is virtual scrolling/listing?

A virtual list means that when we have thousands of data to display but the user's "window" (what is visible at one time) is not large, we can use a clever method to render only the maximum number of visible items + "BufferSize" elements and dynamically update the content of each element when the user scrolls, thus achieving the same effect as long list scrolling but with very few resources.

(From the above picture, we can see that the actual elements/content that users can see each time are only item-4 to item-13, which is 9 elements)

0x1 Implementing a "fixed height" virtual list

First we need to define a few variables/names.

• From the above figure we can see that the starting element of the user's actual visible area is Item-4, so its corresponding subscript in the data array is our startIndex
• Similarly, the array index corresponding to Item-13 should be our endIndex
• So Item-1, Item-2 and Item-3 are hidden by the user's upward swipe operation, so we call it startOffset(scrollTop)
  

Because we only render the content in the visible area, in order to keep the behavior of the entire container similar to a long list (scrolling), we must maintain the height of the original list, so we design the HTML structure as follows

<!--ver 1.0 -->
<div className="vListContainer">
  <div className="phantomContent">
    ...
    <!-- item-1 -->
    <!-- item-2 -->
    <!-- item-3 -->
    ....
  </div>
</div>

in:

• vListContainer is the container of the visible area and has the overflow-y: auto property.
• Each piece of data in phantom should have position: absolute
• PhantomContent is our "phantom" part, and its main purpose is to restore the content height of the real List to simulate the normal scrolling behavior of a long list.
  

Next, we bind an onScroll response function to vListContainer, and calculate our startIndex and endIndex in the function according to the scrollTop property of the native scroll event.

• Before we start calculating, we need to define a few values:
  

We need a fixed list element height: rowHeight
We need to know how many items there are in the current list: total
We need to know the height of the current user's visible area: height

• With the above data, we can calculate the following data:
  

Total list height: phantomHeight = total * rowHeight
Number of elements displayed in the visible range: limit = Math.ceil(height/rowHeight)

So we can do the following calculation in the onScroll callback:

onScroll(evt: any) {
  // Determine whether it is a scrolling event we need to respond to if (evt.target === this.scrollingContainer.current) {
    const { scrollTop } = evt.target;
    const { startIndex, total, rowHeight, limit } = this;

    // Calculate the current startIndex
    const currentStartIndex = Math.floor(scrollTop / rowHeight);

    // If currentStartIndex is different from startIndex (we need to update the data)
    if (currentStartIndex !== startIndex ) {
      this.startIndex = currentStartIndex;
      this.endIndex = Math.min(currentStartIndedx + limit, total - 1);
      this.setState({ scrollTop });
    }
  }
}

Once we have the startIndex and endIndex we can render the corresponding data:

renderDisplayContent = () => {
  const { rowHeight, startIndex, endIndex } = this;
  const content = [];
  
  // Note that we use <= here to render x+1 elements to make the scrolling continuous (always render in judgment & render x+2)
  for (let i = startIndex; i <= endIndex; ++i) {
    // rowRenderer is a user-defined list element rendering method that needs to receive an index i and // the style corresponding to the current position
    content.push(
      rowRenderer({
        index: i, 
        style: {
          width: '100%',
          height: rowHeight + 'px',
          position: "absolute",
          left: 0,
          right: 0,
          top: i * rowHeight,
          borderBottom: "1px solid #000",
        }
      })
    );
  }
  
  return content;
};

Online Demo: codesandbox.io/s/a-naive-v…

principle:

So how is this scrolling effect achieved? First we render a "phantom" container of the actual list height in vListContainer to allow the user to scroll. Secondly, we listen to the onScroll event, and dynamically calculate the starting index corresponding to the current scrolling Offset (how much is hidden after being scrolled up) every time the user triggers scrolling. When we find that the new bottom is different from the subscript we are currently displaying, we assign a value and setState triggers a redraw. When the user's current scroll offset does not trigger an index update, the virtual list has the same scrolling ability as a normal list due to the length of the phantom itself. When redrawing is triggered, because we calculate the startIndex, the user cannot perceive the redrawing of the page (because the next frame of the current scroll is consistent with the content we have redrawn).

optimization:

For the virtual list we implemented above, it is not difficult to find that once a quick slide is performed, the list will flicker/not be rendered in time, or be blank. Remember what we said at the beginning: the maximum number of visible lines for rendering users + "BufferSize"? For the actual content we render, we can add the concept of Buffer to it (that is, render more elements up and down to solve the problem of not having enough time to render when sliding quickly). The optimized onScroll function is as follows:

onScroll(evt: any) {
  ........
  // Calculate the current startIndex
  const currentStartIndex = Math.floor(scrollTop / rowHeight);
    
  // If currentStartIndex is different from startIndex (we need to update the data)
  if (currentStartIndex !== originStartIdx) {
    // Note that we have introduced a new variable called originStartIdx, which plays the same role as startIndex.
    // Same effect, record the current real start index.
    this.originStartIdx = currentStartIndex;
    // Perform header buffer calculation for startIndex this.startIndex = Math.max(this.originStartIdx - bufferSize, 0);
    // Perform tail buffer calculation on endIndex this.endIndex = Math.min(
      this.originStartIdx + this.limit + bufferSize,
      total - 1
    );

    this.setState({ scrollTop: scrollTop });
  }
}

Online Demo: codesandbox.io/s/A-better-…

0x2 List element height adaptation

Now that we have implemented a virtual list of "fixed height" elements, what if we encounter a business scenario where the height of the list is not fixed and it is very long?

• Generally, there are three ways to implement virtual lists when encountering indefinite height list elements:
  

1. Change the input data and pass in the height corresponding to each element dynamicHeight[i] = xx is the row height of element i

Need to know the height of each element (impractical)

2. Draw the current element off-screen first and align the height for measurement before rendering it into the user's visible area

This method is equivalent to doubling the rendering cost (not practical)

3. Pass in an estimatedHeight property to estimate the row height first and render it, then get the actual row height after rendering is complete and update and cache it

It will introduce extra transforms (acceptable), and I will explain why extra transforms are needed later...

• Let's go back to the HTML part for a moment.

<!--ver 1.0 -->
<div className="vListContainer">
  <div className="phantomContent">
    ...
    <!-- item-1 -->
    <!-- item-2 -->
    <!-- item-3 -->
    ....
  </div>
</div>


<!--ver 1.1 -->
<div className="vListContainer">
  <div className="phantomContent" />
  <div className="actualContent">
    ...
    <!-- item-1 -->
    <!-- item-2 -->
    <!-- item-3 -->
    ....
  </div>
</div>

• When we implemented the "fixed height" virtual list, we rendered the elements in the phantomContent container, and set the position of each item to absolute and defined the top attribute equal to i * rowHeight to ensure that the rendered content is always within the user's visible range no matter how it scrolls. When the list height is uncertain, we cannot accurately calculate the y position of the current element through estimatedHeight, so we need a container to help us do this absolute positioning.
• actualContent is our newly introduced list content rendering container. By setting the position: absolute property on this container, we avoid setting it on each item.
• There is one difference, because we use the actualContent container instead. When we slide, we need to dynamically perform a y-transform on the container's position so that the container is always in the user's viewport:

getTransform() {
  const { scrollTop } = this.state;
  const { rowHeight, bufferSize, originStartIdx } = this;

  // Current sliding offset - Current truncated (not completely disappeared) distance - Head buffer distance return `translate3d(0,${
    scrollTop -
    (scrollTop % rowHeight) -
    Math.min(originStartIdx, bufferSize) * rowHeight
  }px,0)`;

}

Online Demo: codesandbox.io/s/av-list-…

(Note: When there is no high degree of adaptability and cell reuse is not implemented, rendering elements in phantom via absolute will have better performance than via transform. This is because each time the content is rendered, it will be rearranged, but if transform is used, it is equivalent to (rearrange + transform) > rearrangement)

• Back to the question of adaptive list element height. Now that we have an element rendering container (actualContent) that can perform normal block layout inside, we can now render all the content directly without giving a height. For the places where we previously needed to use rowHeight for height calculation, we uniformly replaced it with estimatedHeight for calculation.

limit = Math.ceil(height / estimateHeight)
phantomHeight = total * estimateHeight

• At the same time, in order to avoid repeatedly calculating the height of each element after rendering (getBoundingClientReact().height), we need an array to store these heights

interface CachedPosition {
  index: number; // The subscript of the element corresponding to the current postop: number; // Top positionbottom: number; // Bottom positionheight: number; // Element heightdValue: number; // Is the height different from the previous (estimate)}

cachedPositions: CachedPosition[] = [];

// Initialize cachedPositions
initCachedPositions = () => {
  const { estimatedRowHeight } = this;
  this.cachedPositions = [];
  for (let i = 0; i < this.total; ++i) {
    this.cachedPositions[i] = {
      index: i,
      height: estimatedRowHeight, // Use estimatedHeight to estimate first top: i * estimatedRowHeight, // Same as above bottom: (i + 1) * estimatedRowHeight, // same above
      dValue: 0,
    };
  }
};

• After we calculate (initialize) cachedPositions, since we calculate the top and bottom of each element, the height of phantom is the bottom value of the last element in cachedPositions.

this.phantomHeight = this.cachedPositions[cachedPositionsLen - 1].bottom;

• After we render the elements in the user's viewport according to estimatedHeight, we need to update the actual height of the rendered elements. At this time, we can use the componentDidUpdate lifecycle hook to calculate, judge and update:

componentDidUpdate() {
  ......
  // actualContentRef must exist current (already rendered) + total must be > 0
  if (this.actualContentRef.current && this.total > 0) {
    this.updateCachedPositions();
  }
}

updateCachedPositions = () => {
  // update cached item height
  const nodes: NodeListOf<any> = this.actualContentRef.current.childNodes;
  const start = nodes[0];

  // calculate height diff for each visible node...
  nodes.forEach((node: HTMLDivElement) => {
    if (!node) {
      // scroll too fast?...
      return;
    }
    const rect = node.getBoundingClientRect();
    const { height } = rect;
    const index = Number(node.id.split('-')[1]);
    const oldHeight = this.cachedPositions[index].height;
    const dValue = oldHeight - height;

    if (dValue) {
      this.cachedPositions[index].bottom -= dValue;
      this.cachedPositions[index].height = height;
      this.cachedPositions[index].dValue = dValue;
    }
  });

  // perform one time height update...
  let startIdx = 0;
  
  if (start) {
    startIdx = Number(start.id.split('-')[1]);
  }
  
  const cachedPositionsLen = this.cachedPositions.length;
  let cumulativeDiffHeight = this.cachedPositions[startIdx].dValue;
  this.cachedPositions[startIdx].dValue = 0;

  for (let i = startIdx + 1; i < cachedPositionsLen; ++i) {
    const item = this.cachedPositions[i];
    // update height
    this.cachedPositions[i].top = this.cachedPositions[i - 1].bottom;
    this.cachedPositions[i].bottom = this.cachedPositions[i].bottom - cumulativeDiffHeight;

    if (item.dValue !== 0) {
      cumulativeDiffHeight += item.dValue;
      item.dValue = 0;
    }
  }

  // update our phantom div height
  const height = this.cachedPositions[cachedPositionsLen - 1].bottom;
  this.phantomHeight = height;
  this.phantomContentRef.current.style.height = `${height}px`;
};

• Now that we have the accurate height and position values ​​of all elements, we modify the method of obtaining the start element corresponding to the current scrollTop (Offset) to obtain it through cachedPositions:

Because our cachedPositions is an ordered array, we can use binary search to reduce the time complexity when searching.

getStartIndex = (scrollTop = 0) => {
  let idx = binarySearch<CachedPosition, number>(this.cachedPositions, scrollTop, 
    (currentValue: CachedPosition, targetValue: number) => {
      const currentCompareValue = currentValue.bottom;
      if (currentCompareValue === targetValue) {
        return CompareResult.eq;
      }

      if (currentCompareValue < targetValue) {
        return CompareResult.lt;
      }

      return CompareResult.gt;
    }
  );

  const targetItem = this.cachedPositions[idx];

  // Incase of binarySearch give us a not visible data(an idx of current visible - 1)...
  if (targetItem.bottom < scrollTop) {
    idx += 1;
  }

  return idx;
};

  

onScroll = (evt: any) => {
  if (evt.target === this.scrollingContainer.current) {
    ....
    const currentStartIndex = this.getStartIndex(scrollTop);
    ....
  }
};

• Binary search implementation:

export enum CompareResult {
  eq = 1,
  lt,
  gt,
}



export function binarySearch<T, VT>(list: T[], value: VT, compareFunc: (current: T, value: VT) => CompareResult) {
  let start = 0;
  let end = list.length - 1;
  let tempIndex = null;

  while (start <= end) {
    tempIndex = Math.floor((start + end) / 2);
    const midValue = list[tempIndex];
    const compareRes: CompareResult = compareFunc(midValue, value);

    if (compareRes === CompareResult.eq) {
      return tempIndex;
    }
    
    if (compareRes === CompareResult.lt) {
      start = tempIndex + 1;
    } else if (compareRes === CompareResult.gt) {
      end = tempIndex - 1;
    }
  }

  return tempIndex;
}

• Finally, the method for getting transform after scrolling is transformed as follows:

getTransform = () =>
    `translate3d(0,${this.startIndex >= 1 ? this.cachedPositions[this.startIndex - 1].bottom : 0}px,0)`;

Online Demo: codesandbox.io/s/av-list-…

The above is the details of how to implement a highly adaptive virtual list in React. For more information about React adaptive virtual list, please pay attention to other related articles on 123WORDPRESS.COM!