“Have you ever heard of thrill rides?”

The dynamic photo albumQzone is a new function that can easily transform static pictures into dynamic video sets, and the carrier is HTML5 (H5 for short) page, which means that you can share to the space or moments of friends at any time for friends to appreciate!

Mobile terminal is different from the album video in THE PC era. Due to the limitation of device performance, every animation detail needs to be carefully optimized. Today, let’s talk about the animation performance detection and optimization in the development process of dynamic album.

1. Chrome Timeline&Rendering

Before performance analysis, let’s look at the tools. Timeline and Rendering are two tools that come with Chrome that are great for finding performance issues.

Timeline

Timeline is a record-based tool. After a series of operations are recorded in the browser, the system records all details of the process, including JS calculation, page redrawing, and composite layer consumption, and also saves screenshots of each frame during the process.

To use: Open the Chrome Developer Tool and select Timeline. Click the dot in the upper left corner to record the operation, and then perform a series of interactive operations on the page to be detected. After the end, click the dot again to stop the operation, and a series of data during the last operation will be presented in the panel in the form of charts and other forms.

It has four events that correspond to four colors. Below, web and DOM parsing (blue), JavaScript computation (yellow), style recomputation and layout (purple), and painting and composition (green) events.

It has three modes: frame mode, event mode, and memory mode.

(1) Frame mode The frame mode needs to be turned on by selecting the Frame view (bar chart button). This mode is the most commonly used mode to check animation performance.

Notice that the frame viewer has two boundaries, 30fps and 60fps.

This requires us to revisit the concept of FPS (frames per second) :

  • If the FPS of the animation is greater than 60, it exceeds the refresh rate that the human eye can reflect.
  • If the FPS is less than 30, the lag is obvious.

That means FPS should be close to 60 to be smooth. Click here to see the obvious difference between 30fps and 60fps. Returning to the frame mode bar chart, it is not difficult to see that the smaller the bar height of the bar chart, the smoother the animation.

At the same time, click on the bar chart to see the DETAILS of CPU and memory, and find the corresponding script and node location.

Basic usage:

  • Go to Record -> Start page animation -> End recording
  • Record which columns are high (low performance) by looking at the bar chart
  • Click on the bar chart to locate the event record and find out the cause of performance lag with the detailed data

(2) Event mode and memory mode

Event patternsNeed to click the event button to open (blue on the left), andThe memory modelCan be displayed in frame mode or event mode at the same time, just check the Memory panel.

The event mode is event-oriented. You can observe the events of operations between recording sessions to determine which operation occupies the most frequent events. Combined with the memory panel, you can see which events are consuming the most memory and whether garbage collection (GC) is being done properly.

Also note that Screenshots are checked here. This panel records Screenshots during the process, making it easier to locate the operation areas with performance problems and find the problem areas.

Rendering

In the Developer Tools hidden panel, open Chrome Developer Tools and press ESC to open it.

It has four functions:

  • Enable the drawing blinking prompt. This feature makes the page flash green during rendering so you can add and remove elements to see which ones are the most expensive to draw. (This replaces the old Show Paint Rectangles +Enable Continuous Page repainting, Chrome46.)

  • Displays the layer block border. This feature makes all layer block elements display a yellow border, which makes it easy to determine if the elements are properly laid out.

  • Display FPS meter. This feature displays a FPS meter in the upper right corner of the page that displays the FPS count in real time, making it easy to spot performance bottlenecks as you do a series of operations.

  • Show scroll performance. This feature makes the page scroll slowly, and allows you to see bottlenecks during scrolling by listening for touch and scroll events that delay scrolling.

2. Insight Skills — How do I find performance problems

The performance analysis tool mentioned above, the following should be a way to detect animation performance problems. Animation performance analysis mainly uses the function of enabling drawing flicker and displaying hierarchical borders in Timeline frame mode +Rendering.

Usage 1: Check for lag

Open the frame mode, click the record button to start the recording page operation, and then end the recording to view the bar chart. If a column with a frame rate lower than 60fps is found, click the specific frame rate column to view the record details and locate the problem according to the information on the left, as shown below:

Usage 2: View hierarchies and redundant layout blocks

Sometimes feel the page is stuck, may be because layer blocks are not dealt with well hidden. You can turn on rendering screenshots through the Paint TAB of the features panel.

Once the feature is turned on, record again, and you can see a live render screenshot of each bar chart in the Detail data panel. Move and search to see which blocks should not appear, and then fix it.

Usage 3: View redundant or duplicate rendered nodes

Select Enable Paint Flashing and Show Layer Borders in Rendering. If you directly operate the page, you can see whether there will be unexpected block rendering (the rendered nodes will present green boxes) during the operation. If there are problems, delete redundant nodes and try again, and gradually locate the problematic nodes.

These three features can help you find a lot of performance problems.

3. Jianghu deeds – dynamic album performance case

With that said, let’s share three simple performance cases from the development process.

1. Tail sealing diffusion animation

The end page of the action film will use a general end page, the animation is very simple, a circle from the middle to both sides of the diffusion. The implementation is also very quick, and immediately you think of the border animation, and put the border from 0px->1000px, which looks fine on PC, so you have this. Review images

However, when I watched Mi 2S, I found that it was very slow at the end. After looking at the preceding elements, they were all fade animations, which was impossible, so I used the Timeline tool to analyze it.

All kinds of green! It was a performance issue caused by the painting, so it was definitely the animation. I also looked at the Paint panel:

A very large layer is being drawn (green part), and it is found to be the problem of the node BG-border. So I looked at the animation of this node:

Could it be caused by the border animation of this node? Let’s try another way. I’ve fixed the border value and resized it by transform:scale to achieve the same effect.

What about timeline?

O.M.G! Aside from the initial cost of drawing, there was not much serious cost at other times, the overall FPS stayed above 60 (very smooth), and the layer size naturally went down.

Conclusion: Border animation may cause performance problems on low-end machines, depending on the situation use other methods instead.

2. Foreground zoom animation

In the invitation template, there is an animation that changes the foreground from small to large, but it causes a serious rendering exception on android, as shown below:

Review images

It did not reappear on the IOS machine. I checked the timeline as usual. Found that there is no difference above, performance or can maintain smooth. So what’s the problem?

I looked at the code in this area. Here is an interset photo toggle effect, where the last effect is followed by an. Animate -b class, which will fade an animation. At the same time, the new page simply adds the.animate class and starts playing. This is to use JS to control the two classes to switch between different types of animation.

So is that where the problem lies? So I took out the fade animation, hid the page after playing, and then adjusted the new animation to play directly without fading.

Finally, the problem was solved! The effect is as follows:

Review images

Conclusion: Behind the animation may affect the current animation playback, android 4.0 will cause render exception issues, so you should stop not currently playing animation.

3. Android frame-by-frame rendering bug

More performance problems will not result in serious performance, at most a bit of lag. But android 4.0 rendering exceptions are common, so I’ll look for another example. Here is a problem I found when I was doing Halloween activities, as shown in the picture above:

Review images

This is one of meizu’s better machines, but it still has frame-by-frame rendering issues. Based on the previous example, my first thought is whether other animations are affecting? I saw that there was an animation with a hand shaking all the time, and I found that after shaking, the animation played in an infinite loop without ending.

I thought, this is the only one, so I took it out:

As I expected, the page finally flowed:

Review images

Summary: In performance detection, sometimes tools can not help you, when looking for problems do not blindly find in the current page, it is likely that some irrelevant code behind doing other consumptive behavior, so when you can not find the problem might as well start from the upstream and downstream of the current page.

4. Practice makes perfect — Performance optimization tips

Said a few concrete operation method, finally say me to accumulate experience in the development process.

1. A better solution for the following attributes

The left attributes are likely to cause performance problems.

2. Animation pit points

  • Sibling elements interact with each other in animation

    The animation currently playing will be affected because the other node animations are not finished, and android machines will render it frame by frame.

    The solutionDisplay: None or animation-play-state:pause display:none or animation-play-state:pause
  • Z-index is incorrectly set

    If sibling elements are rendered in the composite layer and the Z-index is smaller than the primary element, the primary element is added to the composite layer.An articleThat’s the question.

    The solution: Sets an appropriate Z-index value for the sibling element applied to the animation.

3. Clever use of CSS animations

Here are some ways to use CSS3 to solve general JS effects.



4. Do they all need GPU acceleration?

Finally, discuss the problem. Turning on GPU acceleration will make the page animation smoother, but does that mean all elements need to be turned on? Definitely not, there will be the following disadvantages:

  • Blind use renders irrelevant elements as composite layers.
  • Composite layer rendering into bitmaps consumes memory and can be time consuming.
  • Mobile phones use up power faster as a result.

Thus, if there are many elements using the GPU, the memory consumption may be much greater than the animation consumption, which is a bit of an inversion of the cart. Therefore, the best way is to deal with the animation layer, integrate the animation layer and enable GPU acceleration.

Above, thanks for reading, welcome to comment.