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

This article introduces the relevant knowledge of "how to solve the stutter problem of clicking on all when there is a large amount of data in the shuttle box of Element". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Phenomenon: we have rendered 9999 pieces of data. Because the transfer component will render all the data at once, it is normal to render so much at one time, stuck for tens of seconds. So lazy loading or paging is the basic operation, the second is the paging operation.

Lazy loading can be done with the infinite scrolling of EUI

Even after we have done lazy loading, clicking on all is still stuttered for more than 6 seconds, so the solution is: even after lazy loading or paging, users will still stutter for a few seconds if they click on paging.

This is because of the poor performance of the 'select all' code in the source code of transfer. The first solution is to modify the source code of transfer.

I submitted a pr at h https://github.com/ElemeFE/element/pull/20282

Scenario 1: copy the transfer component of EUI, then modify it, and then introduce the project directory

The transfer component directory path of EUI: node_modules\ element-ui\ packages\ transfer, copy the folder, and then put it in the vue project path

Introduce the common component transfer where the transfer of EUI is called

Import Transfer from'.. / common/transfer'export default {components: {Transfer:Transfer}, / / omitted

Start modifying the transfer code:

Open the component of src/common\ transfer\ src\ transfer-panel.vue

Find the updateAllChecked function, the function of the updateAllChecked function is: we need to judge when we click on an item, look at the code comments.

UpdateAllChecked () {/ * Source this.checkableData is an array of objects what we need is an key in each object, so checkableDataKeys holds an array of key of objects that means a collection of item items that can be selected by clicking * / let start = new Date (). GetTime (); const checkableDataKeys = this.checkableData.map (item = > item [this.keyProp]) This.allChecked = checkableDataKeys.length > 0 & & / * has not changed since 2.4.0. I have to say that the development team is really busy. This.checked saves the item array selected by users by clicking on item. If this.checked has every item of checkableDataKeys, then allChecked is true, but if there is one item that does not exist, it is false. AllChecked represents whether all of them are selected. The time complexity here is n ^ 2, checkableDataKeys.every * / checkableDataKeys.every (item = > this.checked.indexOf (item) >-1); console.log ("updateAllCheckedEnd", new Date (). GetTime ()-start);}

Let's take a look at the time consuming of the source code:

Then we start to rewrite the updateAllChecked function:

UpdateAllChecked () {/ * modify here is the algorithm for constructing element objects * / let start = new Date (). GetTime (); let checkableDataKeys = this.checkableData.map ((item) = > {let keyProps = {}; keyProps [item [this.keyProp]] = true; return keyProps;}) / / find out whether there is an element in the array this.allChecked = checkableDataKeys.length > 0 & & this.checked.length > 0 & & this.checked.every ((item) = > checkableDataKeys [item]) by means of n (1) correspondence of the object. / / the annotated source code above is the most time-consuming, so it takes time to console.log ("updateAllCheckedEnd", new Date (). GetTime ()-start);}

This performance is much better, in fact, it is the basic front-end algorithm problem, visual EUI developers do not write because of laziness.

Take a look at the time it takes to modify the code:

It's obviously much faster.

Next is the file:\ src\ common\ transfer\ src\ main.vue, find the addToRight function

AddToRight () {let currentValue = this.value.slice (); const itemsToBeMoved = []; const key = this.props.key; let start = new Date (). GetTime (); / / A two-layer loop is set here, which takes a long time this.data.forEach ((item) = > {const itemKey = item [key]) If (this.leftChecked.indexOf (itemKey) >-1 & & this.value.indexOf (itemKey) = =-1) {itemsToBeMoved.push (itemKey);}}); console.log ("addToRightEnd", new Date (). GetTime ()-start); currentValue = this.targetOrder = = "unshift"? ItemsToBeMoved.concat (currentValue): currentValue.concat (itemsToBeMoved); this.$emit ("input", currentValue); this.$emit ("change", currentValue, "right", this.leftChecked);}

Time it takes to move the selection:

Modify addToRight function

AddToRight () {let start = new Date (). GetTime (); let currentValue = this.value.slice (); const itemsToBeMoved = []; const key = this.props.key; / / modify let leftCheckedKeyPropsObj = {}; this.leftChecked.forEach ((item, index) = > {leftCheckedKeyPropsObj [item] = true;}); let valueKeyPropsObj = {} This.value.forEach ((item, index) = > {valueKeyPropsObj [item] = true;}); this.data.forEach ((item) = > {const itemKey = item [key]; if (leftCheckedKeyPropsObj [itemKey] & &! valueKeyPropsObj [itemKey]) {itemsToBeMoved.push (itemKey);}}); console.log ("addToRightEnd", new Date (). GetTime ()-start) CurrentValue = this.targetOrder = = "unshift"? ItemsToBeMoved.concat (currentValue): currentValue.concat (itemsToBeMoved); this.$emit ("input", currentValue); this.$emit ("change", currentValue, "right", this.leftChecked);}

Moving the selection takes time:

The time-consuming is significantly reduced, and the premise of this scheme is lazy loading or paging. I tried the amount of data for 10w, and it is still good.

Scheme 2: paging operation analysis

CheckBox-group has an check array (used to record the selected item array) and the renderItem array (the actual rendered item, because it is paged, all will not be rendered). If there is an item in the `renderItem array `in the `check array, it will be marked as selected, otherwise it will be unselected. The principle of implementation is to compare the simple check array with the renderItem array.

When the user clicks select all, the check array becomes an array of tens of thousands of pieces of data. At this time, we render 100 pieces of data, so we have to loop at the 10000x100 level, which is why it takes time.

In fact, there are only 100 pieces of data rendered on the page. There is no need to put tens of thousands of pieces of data into the check array at once. We just need to put the 100 pieces of data into the check array to show that the 100 pieces of data have been selected. When the page renders more data, you can add the new data to the check array. In this way, the performance is greatly improved.

Scheme

The proposal I have adopted is as follows:

1. Only 100 pieces of data are displayed.

two。 The drop-down shows the next 100 pieces of data, and the pull-up shows the top 100 pieces of data.

3. When the drop-down or pull-up increases the rendering data, add the new data to the check array.

These are just general ideas, which I have realized. There are still a lot of details to deal with, and if you want to improve, you have to use the key-value pair of the object to delete and so on.

This is the end of the content of "how to solve the stutter problem of click all when there is a large amount of data in the shuttle box of Element". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.