An overview of the

Business scenario: big data rendering Table.

Performance issues: Render a lot of DOM directly with ListData, triggering performance issues and causing stuttering.

Solution: Virtual rendering.

Virtual rendering is not a complex technology. It has long been a basic operation in other interface rendering fields, such as game development. Large-world map rendering is basically area rendering, and no rendering is done outside the event horizon. Well, it’s easy to say, but it’s very complicated when it comes to business scenarios. Table involves cell operations. Let’s analyze the process step by step.

Virtual list principle analysis

Let’s start with the simplest virtual list, a single direction list.

Before we begin, let me draw a schematic diagram to help us understand.

As shown in the figure, first divide the region:

  • The visible area
  • Actual render area (visible area + front buffer + back buffer)
  • The area that has been loaded
  • Unloaded region
  • Full virtual list area (loaded + unloaded)

According to the principle shown in the figure above, we directly analyze the technical realization:

  1. So what we’re actually rendering is the data for an interval [startIndex, endIndex]
  2. Calculate this interval, and listen for onScroll events to update the interval
  3. Render the location of the region DOM node element based on the interval data

The third point is how to render the location of the DOM node correctly, which can be achieved in a variety of ways:

  • Padding is used to push the elements apart and then arrange them automatically
  • Arrange elements through position
  • This is done by transform offset
  • .

The HTML structure is also very simple. It looks something like this:

/*** * stage: visual window, with width, height size information, beyond scrolling * list: list container, with size information that holds all data * row: Each data * * * / rendering node < div class = "stage" > < div class = "list" > < div class = "row" > < / div > < / div > < / div >

OK, the theoretical analysis is over here, the next section we will start to enter the actual practice, how to calculate the location information.