Explore table component virtualization

Bean skin powder , I meet you again , Today's issue , Jump the data platform by bytes , Take you to explore Table Principle and scheme of component virtualization .

The author of this article ： Gong Feng

Preface

Virtual optimization of lists and tables is not a new topic , In the near future , The team found ： Industry for table Virtualization doesn't have a relatively once and for all solution . Why is that ？ How to solve ？ In this paper , We will introduce in a step-by-step manner React+AntDesign Under the technology stack , Within the team Table Different practice ideas of component virtualization , Analyze possible difficult problems .

Description of virtualization issues

On the list page 、 The waterfall flow 、Select In the component , We are all likely to encounter scenes that render large orders of magnitude lists . in the past , We have summed up a set of effective measures ：
For a list of , We calculate , Make sure that when you scroll through the window , Render only some elements at a time . This reduces the pressure on the first screen , It also ensures that there will be no more performance burden when loading for a long time , It can meet the high-performance optimization requirements of most of the above scenarios .
In terms of specific measures , We use the known fixed row height and roll offset , Calculate the index of the scrolled table row , Render only the elements needed in a limited window ,, And set the list accordingly , The brief process is as follows ：

• Calculate the starting data of the current visible area startIndex
• Calculate the end data of the current visible area endIndex
• Calculate the data of the current visible area , And render to the page
• Calculation startIndex The offset of the corresponding data in the whole list startOffset, And set it to the list
• Calculation endIndex The corresponding data is offset from the bottom of the scrollable area endOffset, And set it to the list

This scheme is widely discussed by most developers . I recommend On the realization principle of virtual list , His thinking on the problem , Realization , Have a more detailed description .
Now , Our scene has come AntDesign Of Table Components . We face very similar problems ：
In the business ,Table involve 1000+ That's ok &100+ Column number level rendering time , Because there is some complex logic in the cell , Therefore, the page rendering time often needs to be blocked 5000ms Time before and after . This is obviously unacceptable .
actually , From long list to Table Components , Our list is nothing more than rising from a one-dimensional axis to a two-dimensional plane . therefore , So called table virtualization , I just hope that the table can be realized ：
Compatible with Table In the case of existing functions , Implement tables to render only window plane content , For rows outside the window 、 Columns are hidden .

Sort out the status quo

AntDesign

Our internal React + umi + AntDesign Technology stack is a common architecture foundation in front-end industry .AntD As an industry react Common component libraries , It provides Table Components , It can easily help us solve many common needs , Including is not limited to ： Row selection 、 OK, expand 、 Line screening 、 Data paging 、 Column fixed ...
at present AntDesign Yes [email protected] and [email protected] Two major editions , The latter has been restructured and optimized , It is the latest content officially recommended .AntDesign3 Support for virtualization has been removed from the documentation demo（ Actually, you can also use ）, And in the AntDesign4 In the document , You can see the official recommended users to access react-window To solve the problem of virtualized tables .

From the official Demo Look at ,AntD Provides a components attribute , By passing in an object , In its body Attribute ReactWindow Virtualization components provided , To meet the requirements

 ...
 // VariableSizeGrid is a component provided by react-window
 const renderVirtualList = (rawData, { scrollbarSize, ref, onScroll })=>
     <VariableSizeGrid 
       {...props}
     />
 ...
 <Table
    {...props}
    className="virtual-table"
    columns={mergedColumns}
    pagination={false}
    components={{
      // overwrite the body set by AntD
      body: renderVirtualList,
    }}
  />
  ...

ReactWindow

react-window Is a popular open source code library for solving the problem of table virtualization , It produces virtualization components with different characteristics , So that users can focus on the problem solving of different virtual scenes .

react-window It's not complicated , It is mainly about the realization of virtualization requirements in this paper . Mainly through monitoring onScroll, Dynamically adjust table horizontal axis offset , Extract an appropriate amount of partial data , Render the contents of the visual area .

His predecessor was react-virtualized. After refactoring and upgrading , The author of table and list Two different scenarios are better abstracted , By reusing the logic of common parts , Better performance , The code packaging size has also been reduced to the original 20%.

Problems encountered during access

it seems ,AntD A set of virtualization schemes have been given . But a little in-depth investigation is not difficult to find , stay Github Of Issue in , For official recommendations , User feedback is not very satisfactory .
such as ：

• In question #21022 It is proposed that , Use AntD3 after , an 、 Multiple selection and other function points are missing .
• In question #20339 It is proposed that , Use AntD4 after , Most table function nodes are missing .

For the above problems , The official reply is that the user should solve the problem by himself , therefore ：

according to AntD Documents are configured using virtualization , Although it can be virtualized to some extent , However, it will cause many table functions to be lost .

This is the main problem to be solved at present .

rc-table

Because the government has not given a good virtualization scheme , We have to learn more about AntD Internal structure , Find the entry point of the problem .
After reading the code, you can understand , stay 4.11 Of AntD/Table The code architecture is briefly described below ：

• stay AntDesign/Table in ：

  • Initialize table size and row and column contents
  • Preliminary sorting of events and data
  • Sort 、 Pagination 、 Filtering and other functions are right data and column Calculation logic of
  • call rc-table rely on

• stay rc-table in ：

  • Register various row, column and cell events
  • Complete various style requirements , If the column is fixed , OK, expand
  • Finish rendering

thus , We can see ,AntD The architecture itself has actually divided the table logic to a certain extent , And data Data sequence and content independent logic , It has been abstracted to rc-table In this library . In general, we can understand it as the following figure ：

We must also think clearly ：

• These three layers of logic , We reserve them separately , reform , Or replace ？
• If reserved , How to solve the problem after the introduction of virtualization logic , The impact of virtualization logic on existing frameworks ？
• If not reserved , How to choose a new framework ？

Group scheme display

Within the project team for table There are many different ways of thinking about virtualization ：

programme 1： be based on rc-table Do not rely on react-window and AntD Virtualization

• Realize the idea ：

In different businesses , The function points of the table components we need are not consistent , Under extreme circumstances , We may only need to use a small amount AntD Of Feature, And high customization . So we can consider giving up using AntD, Use it directly rc-table And do some transformation .

• Realization way ：

  • fork A stable version rc-table Put it in the code base
  • According to the principle of virtualization rc-table Complete necessary modifications
  • Sort by yourself 、 choice 、 Upper level function nodes such as column fixation

• The plan is good or bad ：

  • advantage ：

    • You no longer need to implement basic table rendering by yourself , This part has rc-table complete , We only need to make a few changes to rolling events for virtualization .
    • external function feature Easy to customize .

  • shortcoming ：

    • lost AntD The functional basis of .

programme 2：AntD Capture display data in , Manually destroy out of the form dom, Create placeholders manually .

• Realize the idea ：

When the business relies heavily on AntD Various functions of , Can't remove... Directly AntD. We can only keep the overall framework , Find the breakthrough point and do some transformation . So transform antD Inner table scroll event , Use the new onScroll Logic ：

• determine dom Row position , Calculation index
• setState When it's done , Manually destroy out of window dom Content , At the same time, create an equal height blank area , To maintain the scroll bar position .
• Yes data Cut and update the data content , Ensure the correctness of the data in the window .

Under this logic, only AntD Incoming data Content , The rest of the operations are based on jsdom Manual completion , The influence is small , High degree of completion . However, the impact on each table function node needs to be carefully tested .

• The plan is good or bad ：

  • advantage ：

    • Forward compatible Antd Table Configuration parameters for , Just add a few props, The transformation cost is extremely low
    • Direct Manipulation dom, In addition to data interception, the development work , Most of the rest do not depend on AntD/rcTable Code , Guaranteed performance .

  • shortcoming ：

    • The column fixation of the modified scheme needs to be handled carefully 、 Row expansion and other characteristics .
    • The row height cannot be obtained in advance , Direct positioning is not supported , The equivalence scheme needs to search the corresponding data first , Then load the results into InfinityTable

programme 3： Re implement the table

• Realize the idea

When the project is highly customized , Consider giving up antd. programme 3 Retain the AntD Of props Definition , To ensure that from AntD Ease of migration , Then use react-table Complete most functions , Virtualization partly relies on react-window, The bottom layer develops a new basic table with virtualization function .

• Reasons for frame selection

This scheme introduces github Open source, which is hot in the world react hook frame react-table, This is a data logic hook frame , Because of the order 、 choice 、 Such data logic is similar , So there is no need to rewrite , It helps to save the cost of data processing , And there is no interference UI And virtualization .

• The plan is good or bad ：

  • advantage ：

    • Deep transformation , High degree of refactoring , It is convenient for any subsequent expansion , Easy performance optimization
    • Use open source products to realize the original AntD Development content of , Save some cost

  • shortcoming ：

    • The cost of form based implementation is high , Basics table Need to combine react-table Of api Re actualize , You need to step on all kinds of pits

Re examination of key problems in transformation

Blank flashing

• Problem statement ：

stay react-window Of README in , You can see the description of this problem . When virtualization is applied , Too fast scroll The action will cause the placeholder not to be updated , Only blank content can be seen , It takes a little time to load . When scrolling the table continuously and quickly , Presents a state of flashing blank content .

• Problem solving ：

  • There is no better solution at present , Increase the preload area size , And optimize the cell rendering content , Can reduce the severity of the problem .
  • Some students proposed to monitor scroll When the speed Dynamically adjust the size of the preload area , It is a train of thought without practice .

Cell adaptive wrapping

• Problem statement ：

When the cell text content is long , I hope the height can be adaptive . At first glance, this requirement seems to be exploitable react-window The variable height components of , But actually , This component needs to provide a height function ：

// Returns the size of a item in the direction being windowed. 
// For vertical lists, this is the row height. 
// For horizontal lists, this is the column width.
itemSize: (index: number) => number

When the text changes , We also need render Then the height of each row can be obtained , So this api It's not as beautiful as I imagined . This problem still needs the help of second rendering , adopt ref take dom Node can be solved , But this slows down performance , So after considering , This scheme is not supported

Column fixed

• Problem description

In the scheme 3 in , Due to the use of div Of flex Typesetting, not native table, To achieve column fixation , We need to use three table To make a fixed effect , So when scrolling , We need to change the of multiple tables at the same time scrollTop And its data interception .

• Problem solving

  • You can use one state Synchronize multiple table Between scrollTop, But this implementation may be due to performance , The sequence of generating table rendering , Thus, the problem of three tables not being aligned .（AntD Of Header And body Alignment itself has this problem ）
  • AntD Do not distinguish between three table, But in a table Internal use of native tr/td, as well as css Of sticky characteristic , This question is partially avoided , But it hasn't been solved very well ,fixedcolumn In the context of existence ,header and body There are still similar problems in the synchronization of .
  • You can change three tables into one table , Then take advantage of the best 3Dtransform To solve this problem . Open source products recommended below rsuite-table This solution solves the problem well .

Column virtualization

• Problem description ：

  • Because the current scheme focuses on scenarios with a large amount of row data , Therefore, when a large amount of table column data is encountered , There are still performance problems .
  • If we introduce react-window Of Grid Component for column virtualization , Compatible child columns will be required , Column fixation and other functions , The actual implementation is more complicated than expected .

• Problem solving ：

  • Too many columns are unreasonable in terms of product design . It is suggested to improve the data display from the product level .
  • Currently, column virtualization is not supported .

Open source table components are recommended

Since internal resources cannot be shared externally , Therefore, there is no way to release the products of the above scheme . If you want to use tables with virtualization , But I don't want to do any development work , Here are some good open source products

• rsuite-table

  • http://rsuite.github.io/rsuit...
  • Excellent virtualization and table performance , Most function points are complete
  • The function of the meter head is weak , No column filter , No drag to change the column width

• react-base-table

  • https://github.com/Autodesk/r...
  • Built in virtualization , Basic functions are complete , Other functions and AntD There is a certain gap

summary

Table Component virtualization in principle , It is relatively simple . Even without the help of react-window, We have also seen that each student can use their own ideas to achieve similar functional requirements .

The reason for this is that there are numerous schemes that cannot be unified , It is mainly because different projects have different requirements for the table library ： Some projects need low cost , Some projects require compatibility with different feature, Some projects have heavy historical burdens .

And a new 、 Everything Table library , There will be replacement costs 、 Stability risk, etc . therefore , Reform your project according to local conditions , It is the fastest way to implement a virtualization scheme suitable for your project , The most accepted .

therefore , This article starts from three different scenarios , Summarize the scope of vision , We have different ideas to solve this problem . For students who want to use it out of the box , It also gives several open source products worth recommending through horizontal comparison .

It is better to teach people to fish than to teach people to fish , I hope the contents discussed in this article , More or less in the direction of improving table performance and table virtualization , Can give readers some inspiration , Bring a faster and better experience to users of byte series products .

The End