background

  • The requirements are as follows: the detail page displays a large number of HTML rendered DOM elements, the height of each sub-element is dynamic, and it should also have directory function;
  • Problems: slow page loading, long data rendering time, even bad in low configuration
  • How to solve: need performance optimization oh

methods

  • Solutions:
  1. Lazy load
  2. Virtual list

contrast

  1. Does lazy loading work?

Most will think of lazy loading, lazy loading is triggered by page scrolling, but the resulting increase in page DOM elements, the page will still be stuck, but also stuck so give up!

  1. What is a virtual list?

A virtual list, of course, literally means virtual list data, that is, you see incomplete list data;

  • Viewing area is like a stage, a complete list data is like a line of queuing stage performer, when the show began, the performer group (complete list data) according to the schedule in order to enter, on the stage performance, and performance to complete the performers from Taiwan in sequence, and so, over time, the show finished, orderly and very efficient.
  • For example, the front end of the virtual list is similar, pay attention to the need to give a height of the container, the DOM elements of the page will not be larger with the page scrolling, occupying too much browser resources, very easy to use oh
  1. How are virtual lists implemented?

Thanks to the front end, and thanks to open source, for using two virtual list plug-ins here

  • vue-virtual-scroller

Link: github.com/Akryum/vue-…

The introduction of

Import {DynamicScroller, DynamicScrollerItem} from 'vue-virtual-scroller 'export default {components: { DynamicScroller, DynamicScrollerItem } }Copy the code

use

<template> <DynamicScroller :items="list" :min-item-size="50" ref="dynamicScroller > <template v-slot="{ item, index, Active}"> <DynamicScrollerItem :item="item" :active="active" > // Business component data... </DynamicScrollerItem> </template> </DynamicScroller> </template>Copy the code

This enables virtual dynamic list loading

  • vue-virtual-scroll-list

Link: github.com/tangbc/vue-…

The introduction of

Import VirtualList from 'vue-virtual-scroll list 'export default {components: {VirtualList}}Copy the code

use

  1. List.vue Parent component
<template> <VirtualList :data-sources="list" :data-key="'id'" :data-component="item" :estimate-size="50" ref="virtualList /> </template> <script> import Item from './Item export default { data() { item: Item, list: [{id: 1,...},... }, mounted() {// $on('change', (index) => {console.log(index)})}, methods: $on('change', (index) => {console.log(index)}) {/ / click on the directory location to the corresponding position clickToIndex (index) {/ / this call to provide method. $refs. VirtualList. ScrollToIndex (index)},}} < / script >Copy the code
  1. Item.vue child component
<template> <div V-observe-visibility ="handleVisibilityChange" :data-index="index"> Import {ObserveVisibility} from 'vue-observe-visibility' export default {ObserveVisibility} from 'vue-observe-visibility' export default { Directives: {ObserveVisibility}, props: {// For each data in the parent list source: {type: Object,}, index: {type: // Dispatch (componentName, eventName,... rest) { let parent = this.$parent || this.$root let name = parent.options.name while (parent && (! name || name ! == componentName)) { parent = parent.$parent if (parent) { name = parent.$option.name } } if (parent) { parent.$emit.apply(parent, [eventName].concat(rest)) } }, hanldeVisibilityChange(isVisible, Entry) {if (isVisible) {// display in the visible area, index is bound to index this.dispatch('List', 'change', index)}}}} </script>Copy the code

This enables virtual dynamic list loading.

Combined with the actual business needs, you can choose the above two virtual list components, of course, you can also make wheels, excellent oh

Source code and principles

When the completion of business requirements, still need to calm down to think about the principle of virtual dynamic list, analysis of the source code, review the old to learn new!

What to pay attention to:

  1. To give a fixed height of the container, like you give a stage, can perform

  2. Depending on the situation, each item is fixed in height, such as table list data, select the corresponding component; Each dynamic height, as described in this article, each piece is rendered by V-HTML and selected correctly;

  3. Scroll monitor, how to do, performance optimization to the extreme; Two ideas, listen to scroll event, no doubt the overhead will be large, performance is not the best. New IntersectionObserver is the best choice for performance optimization, without considering so many compatibility problems.

Say first vue – virtual – scroller

Two types are commonly used

  1. Table each row height is fixed oh, select RecyleScroller

  2. Chat room page each line height is different content size, choose DynamicScroller

Dynamic Roller according to RecyleScroller evolved oh

Talking about the vue – virtual – scroll – the list

The current maintenance is good, and the latest release was released 22days ago

Props and Events are provided! Great!

Examples: Tangbc.github. IO /vue-virtual…

Sweet!

At this point, summary, record, keep, share, less pit, time does not wait for me!