virtual list

For a long list, the traditional method is to use lazy loading, pull down to the bottom to get new content to load in, but as more and more data is loaded, the browser's reflow and redraw overhead will increase. Sliding things can also cause lag. At this time, we need to use a virtual list to solve such problems.

virtual list

Visible area: the visually visible area of the scrolling container element,
Scrollable area: the inner content area of the scrollable container element

Suppose there are 1000 pieces of data, the height of each list item is 50, and the height of the scrollable area is 1000*50. When the user changes the current scroll value of the scroll bar of the list, the content of the visible area will be changed. , the virtual list is when the user scrolls, the main purpose is to change the rendering part of the list in the visible area

Specific steps:

1. First calculate the startIndex of the start data of the current visible area and the endIndex of the end data of the current visible area,
2. If the height of the element is fixed, the algorithm of startIndex is very simple, which is equal to the current scrollTop/itemHeight (height of the scroll bar/height of the list item),
3. endIndex = startIndex+(clientHieght/itemHeight)，
4. Then take the corresponding range of data according to startIndex and endIndex, and render it to the visible area.
5. Then calculate startOffset and endOffset. It can be seen from the figure that startOffset and endOffset are a hidden area, which will stretch the content height of the container element, which can act as a buffer to keep the scrolling smoothness and the scroll bar. in a correct position,
6. The final effect, how to scroll, just change the height position of the scroll bar and the content of the element, without adding any extra elements