Fusion DesignAfter more than three years of work inside Alibaba Group, the system was finally opened to the public last month as the basic skeleton of the design system
Next component libraryIt is also officially open source 🎉🎉


Fusion Next (package name @alifd/ Next) is a React implementation, PC oriented configurable component library. While serving more than 2000 projects of Ali Group, many basic components have been deposited, and now it has reached more than 50. This series will introduce the interesting features and implementation principles of the Fusion component library through real-world requirements scenarios. You are welcome to discuss 👏



Usage scenarios

In the case of a long list, such as an item selection with thousands of items, the initialization of the option group takes a long time and has obvious lag.



Cause analysis,

In the React environment, there are many possible reasons for the lag, such as arbitrary setState, shouldComponentUpdate parent component not set so that all child components are redrawn, DOM node hierarchy is too deep so that HTML parsing is too slow, etc. In the current scene, the reason is obviously the last one. There are too many DOM nodes on the page, which leads to the comparison of virtual DOM, excessive rendering consumption and page lag.



The solution

Whether it is IOS, Android client, H5, PC page, there is a unanimous call for the optimization of long lists —
Virtual rolling.

Since too many DOM nodes is the problem, reduce the number of nodes. The DOM structure of the page is not designed properly, so it is necessary to optimize the DOM structure, remove unnecessary nodes, and reduce the resources consumed by DOM operations.

The effect

Let’s start with a comparison of how long it takes to render from start to finish. It can be seen from the figure that when the amount of data becomes larger and larger, virtual scrolling has outstanding performance and the time consumed is kept within 80ms.



The principle of

The screen height is limited, and the user may see only a dozen items at a time. Maintain an array domArray, which is used to store the list items eventually displayed on the page, and always control the number of list items to be rendered within a certain range. When scrolling, the array is dynamically updated based on the position of the vertical scroll, along with transform: translateY to achieve infinite scrolling.


There are two key points:

  1. List body transform: change of translateY(offset) value
  2. Update rules for domArray arrays that are finally rendered to the page


1. How does the relative displacement change

TranslateY (offset) offsets the element from its parent element downward.
Jsfiddle.net/youluna/w6d…

When the first element of the array is switched from the first from to from+1, the whole list looks like the height of the first from element has been moved up. In this case, increment the height of the first from element with translateY. I can keep the element from+1 in relative position.



2. When the array is updated

DomArray stores the partial list items that the user might see, usually taken from [from, from + size] in a very long source data, such as [36, 53] in the figure below.

  • Where does the FROM value come from?
To keep a small number of domArray elements, record the scrollTop distance to dynamically add and delete elements in the array during scrolling. Ensure that the following formula is true, dynamically update the value of from according to scrollTop changes:

Scrolltop-bufferheight < Sum of previous FROM + 1 element height


  • What are the requirements for the value from + size?
[from, from + size] The total render height of these elements on the page is just greater than the visibleHeight + buffer*2 height, i.e.

domsHeight > visibleHeight + bufferHeight*2
If the height condition is not satisfied, the values of from and SIZE are recalculated to update the domArray.

The domArray update is combined with the translateY value change to create a visually continuous scrolling effect. Fusion has built-in VirtualList component, which can be used with Select component and Cascader component at present. Table component is relatively complex but also supports infinite scrolling through its own transformation.



The Fusion Next component library also has a variety of interesting features, and we are looking forward to exploring them. Come and try them out! 👉 , I will continue to play commiter on Github, welcome you to come to play, issue/PR two flowering 🐒🐒