This paper is participating in thePerformance optimization combat record”Topic essay activity

preface

When it comes to web page lag optimization, the first thing that comes to mind is JavaScript. But this pot JS said not back 😂, but not js reasons and what will be the reason? The content of the article is not much, as long as you can read it carefully, I believe it will be helpful to you.

React, Vue and Angular frameworks have been used in actual projects. Their development efficiency is beyond doubt, but their performance is unsatisfactory in some scenarios. If you have encountered such a scenario, feel free to leave a comment below.

Let’s take a look at how such performance bottlenecks are handled in real projects!

background

The project is based on VUE. Due to the business requirements of long list rendering (dynamic loading and virtual list cannot be done), the scrollTop of the scrollbar reaches 5W + when the list data is too much, and some elements of each column in the page are updated in real time through Websocket. During the interaction of the first screen loading, page scrolling, and page filtering, serious page lag occursCopy the code

The first step is to optimize the relevant parts of JS

1. Filter part using server side rendering, 2. Low frequency use of hidden elements all V-if, 3. The element labels in each column of the list should be reduced as much as possible. 4. Some interactive methods are optimized, and some jquery primitives are used; 5.Copy the code

After optimization, the overall performance is improved, but when the number of lists is large, scrolling lists can still feel obvious lag.

Two sentences of CSS solve the problem of page scrolling lag

According to frame per second (FPS), which is how many times a second can be rendered, the display refresh rate is generally 60Hz(check in the computer display Settings), and the browser will automatically refresh the animation at this rate. Render time per frame should not exceed 16.66ms(1000ms/60) and 30fps to 60fps pages should be smooth in real development.

Use the Chrome Devtool to troubleshoot the lag problem. The Performance panel records the operation time for 10 seconds.

You can see the time of each frame very clearly by frames in the browser. The longest frame took nearly 1s(much more than 16.67ms).

Update Layer Tree and Paint take 71.2% of the time. Why is it taking so long? Literally means update layer tree and draw, in fact, our front-end program is familiar with the rearrangement and redraw.

It is important to note that the rearrangement of one element often leads to a series of reactions, even triggering rearrangement and redrawing of the entire document, which can be very costly in terms of performance.

How do I check if elements have interlocking redraws? How was it avoided?

The redrawn area will be highlighted with a green border on the page.

After investigation, it is found that there are two main situations that will cause the chain redrawing and rearrangement of the page, resulting in the lag of the page scrolling:

Case1: When there is a cross relationship between the shaded area of box-shadow and the fixed position.

For example, if the navigation on the left is fixed positioning and the right is the list part, box-shadow is added to the outer element of the list, and the shadow area and fixed positioning overlap. Fixed positioning while scrolling triggers redrawing, which indirectly redraws all elements on the right side of the list through box-shadow.

Fix: Scrolling through the list is smooth after removing the box-shadow attribute.

Case2: When Websocket updates the data of an element in a row of the list in real time, the whole list is redrawn.

To solve this problem, start by understanding the hierarchy of web pages.

There are two factors that cause this problem. One is that animation is used when data changes, which leads to redrawing of elements at the same level

Solution 1: Delete the animation property (not available due to service requirements)

Fix 2: Add relative positioning to this element and set a unique Z-index value. Gives the element a separate hierarchy without triggering a chain redraw when the browser renders the element.

During troubleshooting, you can perform the following operations to reduce the CPU speed:

conclusion

We often ignore the importance of CSS in performance optimization, making the optimization further and further, and finally nothing. If you have the same experience, feel free to leave a comment.

In short, I carefully controlled every line of code in the development process. When facing complex problems, I analyzed and consulted more information. When encountering performance bottlenecks, I could use the relevant Settings in Chrome Devtool to quickly locate them.

If you find anything wrong in the article, please point it out. If you think it’ll help, fineLike, followSupport, I sincerely hope to grow and progress together with you, thank you very much!