Talk about creating HTML 5 dynamic albums of Love and Hate

Dynamic album is a new function of QQ space, you can easily change the static picture into a dynamic video set, and the carrier is HTML5 (referred to as H5) page, meaning you can always share to the room or friends to enjoy the circle. Mobile end is different from the PC Age album video, due to equipment performance constraints, each animation details need to be carefully optimized, today is to say Dynamic album development process of animation performance detection and optimization problems.

　　First, the benefit of the device--chrome timeline&rendering

Before performance analysis, let's look at the tools first. The two tools The Chrome browser brings is a powerful tool for discovering performance problems, which are timeline and rendering.

　　Timeline

Timeline is a recording based tool, recorded in the browser a series of operations, the system will record all the details of the process, including JS calculation, page redraw, composite layer consumption, while also preserving the process of each frame screenshots.

How to use:

Open the Chrome Developer tool and choose Timeline. Click on the top left corner recording operation, and then in the page to be detected to do a series of interactive operations, and then click the point to stop again, the final operation period of a series of data will be in the form of charts and so on in the panel.

It has four kinds of events, corresponding to four colors. The following figure, Network and Dom parsing (blue), JavaScript Computing (yellow), style recalculation and layout (purple), and painting and compositing (green) events.

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

　　(1) Frame mode

Frame mode requires a frame view (column Chart button) to open. This mode is the most commonly used mode for checking animation performance.

Notice that the Frame Viewer has two dividing lines, 30fps and 60fps respectively.

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

If the animation performance FPS is greater than 60, it is beyond the human eye can reflect the refresh frequency;

If the FPS is less than 30, then the cotton is obvious;

In other words, FPS to ensure that close to 60 to ensure smooth. Click here to see the obvious difference between 30fps and 60fps. Returning to the frame pattern histogram, it is not difficult to see that the columnar column height smaller indicates the smoother the animation.

You can also see the CPU, memory details, and find the corresponding script and node location by clicking on the bar chart.

Basic usage:

Click Record-> Start Page animation-> end Recording

Record which columns are higher (poor performance) by looking at the bar chart

Click the column chart to locate the event record, and combine the details data to find out the reason for the cotton performance

　　(2) Event mode and memory mode

Event mode needs to click on the event button to open (such as the Left Blue), and memory mode can be displayed in the frame mode or event mode, only need to check the memory panel.

Event mode is event-oriented, observing the events of the recording operation, which is convenient to locate which operations occupy more frequent events. Combined with the memory panel, you can see which event consumes the largest amount of memory, and there is no reasonable garbage collection (GC).

At the same time note that the screenshots panel is selected here, this panel records the screen shot between the process, more convenient to locate the operating range of performance problems, found the problem.

　　Rendering

Rendering in the Developer tool's hidden panel, open the Chrome Developer tool and press ESC.

It has four features:

Turn on the draw flashing prompt. This feature will make the page flashing green when rendering, you can use this to delete elements to see which elements are drawing the most consumption. (This feature replaces the old version of Show Paint rectangles+enable continuous page repainting,chrome46.) )

Displays a layer-block border. This feature will allow all layer elements to display a yellow border, you can easily locate the element layout is reasonable.

Display FPS meter. This feature will display a FPS meter in the upper right corner of the page, display the FPS number in real time, and find out where the performance bottleneck card is when you do a series of operations.

Show scrolling performance. This function is to make page scrolling slow, and monitoring of touch and scrolling events can cause scrolling delay, which allows you to see the bottleneck of the scrolling period.

　　Ii. Insight Skills-how to identify performance issues

It said the performance analysis tool, the following should be said to detect animation performance problems. Animation performance analysis is mainly used to Timeline frame mode +rendering Open drawing and display level border function.

　　Usage 1: Check the situation at Carrington

Open frame mode, click the Record button, start recording the page, and then close the recording to see the bar chart. Found below 60fps column, click on the specific frame rate column, view the record details, according to the left of the information to locate the problem, the following figure:

　　Usage 2: View hierarchy and redundant layout blocks

Sometimes the sense of the page card, may be because the layer is not handled more than the obvious hidden. You can turn on the render screenshot through the Paint tab of the feature panel.

After the function is turned on, record the operation again, after the end can see each column in the detail data panel real-time rendering screenshot, by moving and looking can see which blocks should not appear, and thus solve it off.

　　Usage 3: View redundant or repeated rendered nodes

Tick the Enable paint flashing and show layer borders in rendering. Direct operation of the page, you can see whether there will be unexpected block rendering during the operation (rendering of the node will be green box), if there are problems to delete the redundant node again try to gradually locate the problem of the node.

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

　　Third, the River Lake Deeds--Dynamic album performance case

Having said so much, now share the simple performance cases of three development processes.

　　1. Seal Tail diffusion animation

The end of a dynamic album will use a generic page end, the animation is very simple, is a circle from the middle to both sides spread. Realize also very quickly, immediately think of border animation, put border by 0px->1000px, in the PC see no problem, so have this.

However, in the millet 2S to see when the end of the time is very card, looked at the next element are gradually animation, it is impossible, so with timeline tool analysis.

All kinds of green! Description is a performance problem caused by painting (rendering), so there is no doubt that the reason for the animation. At the same time I also looked at the next paint panel:

Found a very large layer in the drawing (green part), found to be bg-border this node problem. So I looked at the animation of the node:

Could it be the border animation of this knot? Then try a different way of writing, I fixed the border value, through the Transform:scale to change the size, achieve the same effect.

And look at timeline?

o.m.g! In addition to the first drawing of the consumption, other times has not produced too much serious consumption, the overall FPS maintained at more than 60 (very smooth), and the size of the layer is naturally down.

Conclusion: Border animations may produce performance problems in low-end machines, which can be used in other ways instead.

　　2. Foreground amplification Animation

In the invitation template there is an animation with a small size change, but there is a serious rendering exception on the Android, as shown in the following figure:

There is no recurrence on the iOS machine, and I've looked at the timeline for example. Found that there is no strange, performance can remain smooth. So what's the problem?

I looked at the code for this area, which is a photo-switching effect between albums, where the Last effect ends with a. Animate-b class, which will have an implicit animation, while the new page starts playing as long as the. Animate class is added. This is through JS control two classes to achieve different types of animation switching.

So is the question out here? So I put the fade animation removed, play the page directly hidden away, do not let the animation playback, and then the new animation adjustment to direct playback does not fade effect.

Finally found that the problem solved! The effect is as follows:

Conclusion: The animation behind the motion may affect the current animation playback, in the Android 4.0 system will produce an exception to the problem, so should not play the current animation stop.

　　3. Android-Frame rendering bugs

More performance problems will not have a serious performance, at most a little cotton. But the Android 4.0 rendering anomaly is a regular occurrence, so I'll look for another example. The following is a question I found when I was doing Halloween activities, which are shown directly above:

This is a good family of a machine, but will still produce a frame-by-layer rendering problem.

According to the previous example, I would think of the first time whether other animations are affected? I saw the animation. Money has a hand has been shaking the animation, and found that after shaking the animation behind the Loop Play (infinite), has not ended.

Thought, can only be it, so I remove it:

As a result, as I thought, the page was finally flowing:

Summary: At the time of performance testing, sometimes tools can not help you, in the search for the problem is not blindly in the current page to find, it is possible that some of the irrelevant code behind the other consumption of sexual behavior, so you can not find the problem when you may wish to start from the upstream and downstream of the current page.

　　Practice makes perfect--the experience skill of performance optimization

Said a number of specific measures, and finally, I have accumulated experience in the development process.

　　1. Better solutions for the following attributes

The left side of the property is likely to pose a performance problem.

　　2. Animation Pit Point

Sibling animation interaction between elements

The current animation will be affected by the end of the other node animation, the Android machine will be rendered by frame-by-step rendering performance.

Workaround: Play the animation display:none or animation-play-state:pause behind the visible area.

Improper setting of Z-index

Sibling elements are rendered in the composite layer, and the z-index is smaller than the main element, the main element is also added to the composite layer rendering. There is an article that says this question.

WORKAROUND: Set a reasonable z-index value for the sibling element that acts on the animation.

　　3. Clever use of CSS animation

This is some use CSS3 to solve the general JS effect of the practice.

　　4. Do you want GPU acceleration?

Finally, discuss this question. Turning on GPU acceleration will certainly make the page animation smoother, but does it mean that all elements are to be turned on? Certainly not, there are several disadvantages:

Blind use allows irrelevant elements to be rendered as composite layers.

It can also be time-consuming to render a composite layer as a bitmap consuming memory.

Mobile phones will consume faster.

This shows that, if the use of the GPU's many elements, then the memory consumption may be far greater than the consumption of animation, which is a bit the cart before the horse. Therefore, the best way is to handle the animation level, the integration of animation layer to open GPU acceleration.