Today’s topic is a problem that the front end faces at least once in a lifetime, optimizing the performance of long lists. This problem also appeared in the project I was working on. I suddenly felt that the EPR project was a treasure, and it pushed me forward.

To get to the topic, this time the requirement is to display all the user’s data in the past two years, and a piece of data needs to be displayed in three different styles on one page, as follows:

The chart style in there is showing all the data for 2 years by default, so there’s a big hole there, and I’ll say later. After the data was sent back to the back end, I got more than 1000+ data. The most obvious phenomenon during rendering was that the interface was called, but the page was blank for about 3s before the normal display of the page. In addition, there was an obvious lag when switching the filter and List styles of data. Virtual long lists and pagination display are the main methods to minimize dom creation. The first method is to only draw the data in the visible area, and the second method is to control the amount of data rendered at a time. I made other minor tweaks before either of these scenarios, such as reducing div levels on each row and removing unnecessary DOM elements. Giving elements unique keys is an effective way to improve rendering for scenarios with large amounts of data. Avoid unnecessary updates by comparing the props changes. If this is a class component, it should be written in the following lifecycle:

I use the react-hook function in the project, so I use the memo to achieve the effect, which is controlled by passing in the managed data array, as follows:

After these small optimization, in the case of large data volume effect is not immediate, but not better than, now look at virtual list and paging schemes, I chose the paging practice, through the scroll event monitoring, slide to the bottom of the page automatically inserted into the page data, choose the reason is that customers don’t want to add virtual long list of third-party components, When it comes to security, they are very careful to implement third parties and I just gave up when I was watching The React – Virtualized mode. The main technique of the paging mode is to monitor the Scroll events and then slide to the bottom of the page.

Add the event of the lower box to the sliding element:

Then add the sliding bottom judgment inside the event callback:

The frequent trigger operation Suggestions and stabilization function, paging logic behind everyone played a, here a List of the optimization is completed, if interested in virtual List to see their own: www.npmjs.com/package/rea…

Now, let’s go back to chart list optimization. The pit is here. It shows all the data in 2 years by default, so the virtual list and paging scheme are not enough.

Through to the total refresh frequency and the number of the current logic to realize the request of rendering n times, it also can solve the problem of caton, but there is a weakness, which is able to directly see the data in the gradually increase the refresh animation, a darting a, use window. RequestAnimationFrame method could solve, If the client doesn’t accept the effect, it can’t be helped. If echart is used to do the third-party chart component in the project, this performance problem will not occur. Echart claims to render ten-million-level hot spot map without pressure. The library used in this project is based on SVG to draw, so it cannot bear a large amount of data. At least we have tried our best. The customer is not that kind of sb and will surely understand and change the plan. My customer is obviously reasonable, hahahaha.

When making chart scheme, I also used Google’s Performance panel for the first time to debug Performance and find the point of lag. After all, only by speaking with facts can we let customers know that we are not fooling. Here is a general introduction to the use of performance panel, or to paste a detailed introduction of others: blog.csdn.net/weixin\_441…

I here introduces details panel, do not only tell you how to find the caton where specific function, find the column and flame diagram the Main points and see what there is little red triangle on the task, the representative task time is too long, the mouse on it will know the time duration and approximate time reason, choose this one task, Then scroll down to the Summary column and find the bottom-up column to see the function that takes the longest time. Check the function name on the right and click to go to the specific function page. Then go to the corresponding optimization. This is also my simple experience of this practice, anyone who uses 6 for performance can also leave a message, learn from you.

Make a summary, long list optimization scheme: virtual list, paging, fragmentation practice and small details optimization, we choose the scheme, today is here, welcome to leave a message to discuss, there are not strict welcome to point out.