A,
In our development, the table component can be said to be the most important, very frequently used. However, the performance of this component can be very difficult if there is a large amount of data.
The render times for listing 10 are shown below
Render times for 100 pieces of data are shown below
Render times for 990 pieces of data are shown below
Summary: Thus, the table component is only suitable for rendering small amounts of data, or for reasonable paging.
Second, optimization ideas
(1) The table data is processed using object.freeze (data), because generally the data in the table will not be changed. Changes are usually made by calling the interface again to brush through the data. This way, Vue does not do getter and setter conversions, meaning that the data is not reactive, which improves table rendering performance.
(2) Reduce the use of computed attributes and DOM judgment rendering. Sometimes the back end will just pass you a status code, and you will render different things with different status codes, such as {status: 0}, and you will render the Member Chinese. You can convert the data in JS to {status: ‘member ‘} and render it directly
(3) The above methods can only solve part of the problem. Finally, veX-Table component is introduced for fundamental optimization
Iii. Use of VEX-table
Document connections: xuliangzhan. Making. IO/vxe – table / #…
* note
After using veX-table, the rendering time of 990 data in the list is as follows
Four, virtual rolling principle
Virtual Scrolling: reuse DOM elements, hide other elements that are not in the view, and delay updating data using placeholders.
From the above results, when scrolling with the mouse,
(1) Although the data volume is tens of thousands, there are only a few HTML tag elements
(2) Some HTML elements will be updated, while some HTML elements will not change
Virtual scrolling can optimize the presentation of tens of thousands of pieces of data and the speed of user scrolling operations, as smooth as the interaction of animation.
2.Virtual scrolling – Props Design
(1) Viewport: this is regarded as the visual area of Table data, and the height of the visual area needs to be provided to calculate the actual number of items rendered in DOM.
(2) size: the height occupied by each data item in the DOM, which is used to calculate the height of the virtual list. The default height of each row is 40px.
(3) Render Items: Items that actually appear in the user’s visual view.
However, the height of idle data outside the area is not displayed in viewport but stored in DOM. It is used when the scrolling distance of the user is not very large, the UI does not need to re-render, and a layer of length optimization is made for scrolling.
Let’s talk about the virtual scroll feature
If the viewport has a given height, we can first treat each data as a single Row data, mark each data with index, and encapsulate the block data with Map. It is stored in the browser’s memory. When the scrolling event is triggered, we only need to render the corresponding block data that can be mapped in the viewport, instead of iterating over all the blocks, which can effectively reduce the HTML file size.
Key = index, we use the data index and the height of each piece of data as the key of the virtual block Map, and combine the scrolling distance and viewport height to mark the items to be rendered in the DOM. That is, each other Item will define its display range according to its key value. For example, the key of Item1 is 0. Then its display range should be within the range of [0~40), item2 within the range of [40,80), and so on… Its purpose is to calculate whether the display range of item is within the rolling range.
Design scenario: When our list has tens of thousands of data, we give it
ItemHeight = 40px
RemainHeight = 80px;
The height of the table is 80px, viewportHeight = 80px,
From this we can design the items in the DOM to render up to 6 items.
So when we scroll, when we scroll to the height of Item12, we want the visual area to be refreshed and the DOM element to be updated as follows
However, when the user does not scroll far enough, such as when it scrolls from Item1 to Item4, we want the DOM not to need to be updated, i.e
Next, let’s simulate data scrolling in detail, as shown below
Solid lines, such as item1 to Item6, represent data that already exists in the DOM
Black entities, such as Item1 to Item2, display data in the visible area,
Whereas the grey entities of Item3 to Item6 are hidden
The Size of the virtual list data determines the Size of the visible area scroll bar
How to determine the height range of Dom items, namely
Scroll down scenario simulation: When we scroll less than the top remainHeight (80px),
Its minDomItemHeight = 0,
MaxDomItemHeight = viewportHeight + 2 * remainHeight = 240px;
But the Items of the DOM to [item1, item2 and item3, item4 and item5, item6] – > no change
When we scroll down to 100px,
The Items of the DOM to [item1, item2 and item3, item4 and item5, item6, item7] – > a new item7
When we scroll down to 120px,
The Items of the DOM to [item2 and item3, item4 and item5, item6, item7] – > item1DOM element to be removed.
Therefore, according to the user’s rolling trend, we have counted the rolling distance, and our data rendering is as follows
The rolling formula
MinItemHeight = scrollTop > remainHeight? Math.floor((scrollTop-remainHeight)/itemHeight) * itemHeight: 0;
MaxItemHeight = scrollTop > remainHeight? (Math.ceil((scrollTop + viewPortHeight + remainHeight) / itemHeight) )* itemHeight : defaultRenderItemsHeight;
DefaultRenderItemsHeight needs the height and leave height of the viewport to determine the number of items to render in the DOM.
const renderItems = Math.ceil(viewPortHeight / itemHeight) + 2 * remainItems; const renderItemsHeight = renderItems * itemHeight;
5.Virtual scrolling – CSS3 Transform optimized data movement
As the data is scrolling up/down, we need to reuse and move elements in the DOM so that they can be displayed in the viewport according to the height we calculate. Normally we use position:relative + TOP to offset elements vertically, but we know that when we use the top attribute, It makes the UI Reflow, which is not very good, so we use the Transform transform property in CSS3 to move it, which has the advantage of not having the UI Reflow and Repaint.
Transform-translatey features are as follows:
(1) Scope: applies to all HTML tag elements
(2) It refers to the movement of the Y axis (vertical axis) in units such as PX,em or percentage
(3) When y is positive, it means that the element moves down in the vertical direction;
When y is negative, it means that the element is moving up in the vertical direction, unlike our mathematical coordinate system
Performance optimization: Element movement does not cause Reflow and Repaint
6.Virtual scrolling – List rendering optimization
Let’s compare two ways of updating an array: mutating and replacing an array
That is, index substitutions in mutating and replacing arrays reuse DOM elements that need to be changed,
The new array assignment will reuse the entire list (DOM element shifts),
When scrolling elements, array new assignment nodes render as follows,
While partial rendering is removed with the new node,
So when we use the translateY attribute to move an element,
Even though elements are inserted into the DOM in an out-of-order order, translateY ensures that the element’s vertical distance is as shown in the figure below.
The red area represents new DOM elements that need to be followed when the mouse is scrolling down
The yellow areas indicate no need to re-render
Therefore, in order to optimize the rendering of the list, it is recommended not to assign new values to the array, but to duplicate the existing nodes by using array replacement + array mutation. If the array changes are completely unequal, you can simply use the array new assignment