Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve element shuttle box performance optimization", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to achieve element shuttle box performance optimization" bar!

Catalogue

Background

Solution idea

New problems

Advanced level

Background

When the shuttle box deals with a large amount of data, the page stutters due to the rendering of too many DOM nodes.

Optimization is carried out on the premise of not changing the original logic of the component as far as possible.

Solution idea

Lazy load-InfiniteScroll component

First copy the original components from packages/transfer (or change the source code and repackage to maintain private library use)

Set

VMurInfiniteMutual scrolls = "pageDown": infinite-scroll-immediate= "false"

Add to

Define pageSize: 20 in data to represent the number of data per page showData: [] is for demonstration only, replacing the data filteredData that actually needs to be operated in the above code

Vmurfort = "item in showData" >

At the same time, the corresponding processing in watch

Data (data) {const checked = []; this.showData = data.slice (0, this.pageSize); const filteredDataKeys = this.filteredData.map ((item) = > item [this.keyProp]); this.checked.forEach ((item) = > {if (filteredDataKeys.indexOf (item) >-1) {checked.push (item);}}); this.checkChangeByUser = false; this.checked = checked }, filteredData (filteredData) {this.showData = filteredData.slice (0, this.pageSize);}

Initialize the number of displays. Take 20 here at will.

Finally, add the method that is called when scrolling to the bottom

PageDown () {const l = this.showData.length; const totalLength = this.filteredData.length l

< totalLength && (this.showData = this.filteredData.slice(0, l + this.pageSize >

TotalLength? TotalLength: l + this.pageSize);}

The length of the data displayed as you scroll down increases by 20 (random amount), and the maximum length is displayed when you exceed it.

As a result, the problem of stutter in the operation of a large amount of data is basically solved. Due to the separation of presentation and logic layer, all the operation logic of the component does not need to be modified, minimizing the difference.

New problems

There is still a stutter problem when you manually scroll to the end of the list and then search.

Advanced level

During the scrolling process, the data at the top is still not visible, and the data is not displayed and has no impact on the user experience.

So just show 20 pieces of data on the current page.

We add a ref=scrollContainer for el-checkbox-group to manipulate the scroll bar

Define the current number of pages in data curIndex: 1

And modify the pageDown method.

PageDown () {const totalLength = this.filteredData.length if ((this.curIndex*this.pageSize))

< totalLength){ this.curIndex ++ const targetLength = this.curIndex * this.pageSize const endPoint = targetLength >

TotalLength? TotalLength: targetLength const startPoint = endPoint-this.pageSize > 0? EndPoint-this.pageSize: 0 this.showData = this.filteredData.slice (startPoint, endPoint); this.$refs.scrollContainer.$el.scrollTop = "1px" / / scroll bar to the top, link to the next page, 0 may trigger boundary problems}}

To do this, we also need to add a way to turn the page up.

The InfiniteScroll instruction only provides scrolling down. We can extend the instruction or add the up-scroll monitor mounted () {this.$refs.scrollContainer.$el.addEventListener ('scroll', this.pageUp)}, beforeDestroy () {this.$refs.scrollContainer.$el.removeEventListener (' scroll', this.pageUp)}.

Register the pageUp method

PageUp (e) {if (e.target.scrollTop = 0 & & this.curIndex > 1) {this.curIndex--const endPoint = this.curIndex * this.pageSize const startPoint = (this.curIndex-1) * this.pageSize this.showData = this.filteredData.slice (startPoint, endPoint) Const el = this.$refs.scrollContainer.$el el.scrollTop = el.scrollHeight-el.clientHeight-1 / / scroll to the bottom, link up to the previous page,-1 to prevent boundary problems. }}

When the data operation, the page content changes, the scroll bar will also change, in order to prevent unpredictable page turning, when the data changes, reset the scroll bar and the current page number.

InitScroll () {this.curIndex = 1 this.$refs.scrollContainer.$el.scrollTop = 0}

At the same time, execute initScroll in watch at the appropriate time

Data () {... This.initScroll ()...}, filteredData (filteredData) {... This.initScroll ()}

So far, the performance of the shuttle frame with a large amount of data has been greatly improved.

Thank you for reading, the above is "how to achieve element shuttle box performance optimization" content, after the study of this article, I believe you on how to achieve element shuttle box performance optimization of this problem has a deeper understanding, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.