How to make vue long list load quickly

vue-long-list-load, long list loading that meets special conditions. Support: 1. Each node has a different height and can be set freely. 2. Each node can be modified without affecting the loading effect. 3. Can scroll to the specified position accurately.

background

There is a requirement for rendering a long list, and vue-virtual-scroll-list was originally used. But the height of each node is different, which is a bit problematic to use. If you have corresponding needs, you can refer to my solution. Everyone is welcome to communicate!

vue-long-list-load

Long lists are loaded that meet special conditions. The heights of the nodes in the list are different, and each node can be modified and positioned to a specified location. www.npmjs.com/package/vue…

Main content

1. Comparison between vue-long-list-load and vue-virtual-scroll-list
2. Vue-long-list-load implementation ideas
3. Basic Code
4. How to use the plugin
5. Plugin Parameter Description
   

1. Component Comparison

The two plug-ins, vue-long-list-load and vue-virtual-scroll-list, each have their own advantages and disadvantages. When we choose a plug-in, we should choose the one that best suits the application scenario. Below is a comparison of the basic functions of the two plugins. The main feature of vue-long-list-load is that it is suitable for scenarios where the sizes of each node are not uniform, while vue-virtual-scroll-list is more suitable for lists with highly uniform nodes and list lengths measured in w.

2. Implementation ideas

The main idea is to occupy each node through the \color{red}{virtual dom} virtual dom, and display the displayed node according to the changes of the displayable viewport. Monitoring of factors that affect the displayable viewport. Changes in the overall width and height of the page, changes in node height, and scrolling of the page to a certain node may all affect changes in the viewport. When the viewport changes, the displayable nodes are calculated and mounted on the node components. The nodes that are not in the viewport are destroyed and an empty div is retained. The figure below is a flowchart of the implementation idea.

3. Key Method Source Code Analysis

The main entry HTML structure is as follows, \color{red}{v-for}v−for displays the nodes of the long list length, and sets a \color{red}{minimum height} minimum height through :style. The reason for setting the minimum height is that this height value may not be accurate. When the actual component is rendered, the most accurate height is calculated. If the height is used directly, the components in the node may not be fully displayed. At the same time, each node is set with a unique id (scrollItem_ unique identifier), which is used when obtaining DOM information based on data. The node component defines a unique class (long-item-unique identifier), which is mainly used to mount the real list component and monitor the height changes of the component. showList[index] is the unique identifier that controls whether a node is displayed.

  <!--html code-->
  <template>
    <div 
      :
      :style="{'min-height': (item.height>=0?item.height:height) + 'px'}"
      :key="item[dataKey]"
      :id="'scrollItem_' + item[dataKey]"
      v-for="(item,index) in dataList" 
      >
      <long-item 
        v-if="showList[index]"
        :dataKey="dataKey" 
        :item="item"
        :boxHeight="item.height||0"
        :direction="direction"
        :heightChange="heightChange"
        :extendCcomments="extendCcomments"> 
      </long-item>
    </div>
  </template>

When showList[index] is true, the corresponding node is displayed. During the mounted life cycle, long-item calls back extendCcomments. Mount it to the corresponding DOM through \color{red}{Vue.extend Profile}Vue.extendProfile. ComponentProps is some parameters passed from the node component, all of which are mounted when mounting.

 <!--Mount component-->
  extendCcomments(item){
    this.componentProps.item=item
    var Profile = Vue.extend(this.dataComponent);
        // Create a Profile instance and attach it to an element new Profile({
          propsData: this.componentProps
        }
      ).$mount('.long-item-'+item[this.dataKey]);
  }

The \color{red}{element-resize-detector}element−resize−detector is used to monitor changes in DOM size. When the width and height of each node change and are different from the original size, the heightChange method is called back to update the size and perform operation calculations on the display node.

 <!--Each node size changes-->
  this.$nextTick(()=> {
    this.$DomListener.listenTo(document.getElementById('long-item-'+this.item[this.dataKey]), (element)=>{
      if (this.boxHeight != element[this.directionConfig.width]) {
        this.heightChange(this.item, element[this.directionConfig.width])
      } 
    })
  });

The method for obtaining the displayable viewport area. This method will be called when the page scrolls and the size changes, so this method is anti-shake processed when it is called. If there are continuous calls within 300ms, only the last call will be executed, otherwise frequent calculations will affect performance. The displayable viewport area is calculated as the size of the current viewport and the two viewports before and after it, a total of three viewports. This will give a better experience in a small scroll range.

  getShowLimit(startTop) {
    const scrollTop = startTop || this.scrollWrap[this.directionConfig.scrollTo] || 0; // Scroll distance this.viewClientHeight = this.scrollWrap[this.directionConfig.width]; // Visible area height this.scrollTop = scrollTop
    this.showStart = scrollTop - this.viewClientHeight
    this.showEnd = scrollTop + 2*this.viewClientHeight
    if(this.setTopTimer){
      clearTimeout(this.setTopTimer)
    } 
    this.setTopTimer = setTimeout(() => {
      this.setItemTopheight()
    }, 300);
  },

Calculate whether the node is displayed based on the height or width. Because this calculation is relatively large and this method has nothing to do with other methods, just open a separate thread to perform the calculation. By introducing the \color{red}{simple-web-worker}simple−web−worker plug-in, a separate thread is opened to calculate and display nodes. There are three main calculation methods: the beginning of the current node is within the display viewport, the end of the current node is within the display viewport, and neither the beginning nor the end of the current node is within the display viewport. There are three cases, and as long as one of them is met, the node will be displayed in the viewport.

  // Calculate whether the node is displayed based on the height setItemTopheight(){
    let stsartId = this.dataList[0]&&this.dataList[0][this.dataKey]
    let startDom = stsartId && document.getElementById('scrollItem_'+stsartId)
    let startTop = startDom ? startDom[this.directionConfig.offset] : 0
    this.worker = this.$worker.run((dataList,showStart,showEnd, startTop,hideIds,dataKey,height) => {
      let topHeight = startTop; // The distance from the top of the title to the top let bottomHeight = 0; // The distance from the bottom of the title to the top let showList = []
      for(let i=0,len=dataList.length;i<len;i++){
        let item = dataList[i]
        if(hideIds.indexOf(item[dataKey]) != -1){
          showList[i] = false;
          continue;
        }
        bottomHeight = topHeight + (item.height>=0?item.height:height)
        // Judge 1. The top of the question is within the display range 2. The bottom of the question is within the display range 3. Neither the top nor the bottom of the question is within the display range if((topHeight>=showStart && topHeight<=showEnd)||
          (bottomHeight>=showStart && bottomHeight<=showEnd)||
          (topHeight<showStart && bottomHeight>showEnd) ){
          showList[i] = true}
         else{
          showList[i] = false
        } 
        topHeight += ((item.height>=0?item.height:height));
      }
      return showList
    }, [this.dataList, this.showStart, this.showEnd, startTop, this.hideIds,this.dataKey,this.height])
    .then(res => {
      this.showList = res
    })
    this.worker = null
  },

4. Usage

Install vue-long-list-load:

npm install vue-long-list-load --save

Calling within a project

<long-list 
 ref="vueLongList"
 dataKey='id' 
 scrollWrap
 :dataList="dataList" 
 :dataComponent="dataComponent" 
 :componentProps="componentProps"
 height=100
 > 
</long-list>

5. Parameter Description

Some parameter descriptions

  <--Assume dataKey=id-->
  
  <--Nodes to be hidden in the list-->
  hideIds:[1, 2]
  <--The height in list data dataList is **Number**. -->
  dataList:[
    {id:1,height:100},
    {id:2,height:200},
    {id:3,height:300},
    {id:4,height:300},
    {id:5,height:300}
  ]
  
  <--Node Height-->
  height:100
  <--If the dataList has a height value, you do not need to set this height-->
  <--If neither dataList nor height is passed, the default value is 100, which may cause a slight lag in scrolling; -->
  <--It is recommended to pass it through dataList when each height is different, and pass it through height when they are the same-->
  
  <--When the width and height of a node change, the callback method returns the id and height as parameters-->
  resized(id, height){ }

Summarize

According to the practical data in the project, basically each node has at least 500 DOM nodes, and the average is more than 800 DOM nodes. Using vue-long-list-load, only 2 DOM nodes will be rendered for topics that are not in the rendering area. According to the normal calculation of about 800 DOM nodes, the number of nodes rendered in the general rendering area is about 9. If it is a list of n nodes, each loading and operation of the DOM will reduce the rendering of (n-9)x(800-2) DOM nodes. If the list of 1000 nodes is loaded and operated each time, it is equivalent to reducing the rendering of 726180 DOM nodes. The first rendering and the modified redraw greatly reduce the DOM rendering, speed up the loading speed and improve the user experience. This solution has been implemented in the project for some time and the user feedback is very good. If you have similar scene requirements, you are welcome to use it! comminicate!

The above is the details of how to make Vue long list load quickly. For more information about Vue long list fast loading, please pay attention to other related articles on 123WORDPRESS.COM!