Principle: The principle of this scheme is to use a large container as the scroll area, which has a content area. JS calculates the height of the content area through the number of data and the height of each piece of data. The content area uses padding or absolute positioning to expand the scroll area. To make the container scrollable, and the other is the data item. When scrolling, calculate the current scroll position scrollTop, and then find the height of each item from the data item, and calculate what data is placed in the container at this time.
To summarize, the five main optimizations
-
Change table implementation to other element label implementation
-
Render only the data visible in the viewport
-
Perform function throttling
-
Reduce the resident VNode and Vue components, instead of using the displayed subcomponent slot method, instead manually create a virtual DOM to cut off object references
-
Reduce the number of objects added during operation, the component will be updated and updated during operation, which can reduce the number of sub-components in the component
Remember memory performance analysis and optimization of a long vue list
