Requirements and problems encountered

There are many ways to optimize the rendering of page data. If there is a lot of list data, the usual method is paging request, but sometimes the background will not load the data paging, and all the data is returned to the front end. At this time, does the front end have a method to optimize the rendering? As shown in the figure: Requirements: Click the navigation on the left to realize the corresponding scrolling on the right side of the sub-list. If there is no sub-list, the page can be redirected to. Slide on the right to navigate to the left and active changes accordingly

Data structure: roughly as follows:

Data = [{id: 1, the children: [{id: 11, name: "', img: '}]}, {id: 2}, {id: 3, children: [{id: 41, name:" '}] and {4} id:]Copy the code

The problem: The data returned in the background may be more than 100 or even 200 pieces of data, resulting in slow page rendering. How to optimize?

Based on the needs of the project, as well as the form of data, because the background does not return pages, so it can only be front-end optimization, but how to optimize?

Since the rendering problem is caused by too much rendering data, we will optimize the first screen. This is simple. By intercepting the array, we can render the first 20 pieces of the array. But there’s another problem, how do you load the data when you scroll or click?

Scrolling is easier, pushing arrays in order. But another left click renders the relevant data, and when the sublist array of the active class is small, we also need to display the data of the sublist adjacent to the active class. The problem is that each large category does not necessarily have sublists, and the data of the sublist before and after the current active class does not necessarily have sublists. Obviously, there is no way to know from the index of the array which of the active categories has the most recent sublist next to it. Of course, you can get it every time you loop, but obviously that’s not very friendly.

We need another data storage structure, one that allows us to take each item and know which category has a sublist around it. In this case, the data structure of the linked list can solve this problem by making each item related to each other.

What is a linked list

The relation between the sub-items of an array comes from the index, and the relation between them is ordered. However, the linked list is a non-sequential storage structure, and the relation between items is realized by the link order of Pointers. Each node consists of two parts: a data field that stores data elements and a pointer field that stores the address of the next node.

For example, a YiBingDing four people, I don’t know their respective row number in the team, but know in front of him is b, row behind him is, c know row in front of him, no one row behind him, then we can easily know their order is b – a – butyl – c. This is the storage data structure of a linked list. We can find the connection between individual items of data and then link them up one by one.

How to design linked lists

The basic idea of a linked list data structure is that pre represents a pointer to the previous item and next represents a pointer to the next item. Obviously, the first term, without the previous term, is null for pre, and the tail term, without the latter term, is null for next

Our requirement is to record the connection before and after each child. The realization idea is as follows, and the code implementation is as follows:

let pre = null;
let next = null;
let dataObj = {}
data.forEach((item, index)=>{
	if(item.children && item.children.length > 0){
    	if(index===data.length-1) {
    		next = null
    	} else {
    		next = data[index+1].id
    	}
    	item.next = next
    	item.pre = pre
    	pre = item.id
        dataObj[item.id] = item
    }
})
Copy the code

Object storage is used here so that you don’t have to cycle through fetching a single item per click

Scroll to add data

But when the scroll wheel is scrolling down, add data rendering. The basic idea is to judge according to the ID of the current active category (including children) :

  • The children item is not displayed in the active category
  • The children entries of the active category are added. You need to add children of the next category
  • Click to select the left side. Currently, children of the active category have been added, and children of the next category have also been added. However, there is still space on the page, so children of the Pre category need to be added

I’m not going to write the code here, but here we can see that with linked lists, we can reduce the looping, and we can quickly see how things relate to each other, and we can do quick look-ups.

conclusion

There are many ways to optimize the page. When we need to know some connection from the single item of data, but the index of the array can not meet, we can consider using the form of linked list, which can be more quickly and effectively obtain the data. In addition, this article is relatively brief, only to provide ideas and methods for reference, detailed suggestions can go to find information.