preface

In daily development, it is common to encounter requirements that contain a large number of dynamic effects. When a page contains a lot of dynamic effects, it often suffers from lag and poor performance.

In order to optimize these dynamic effects, many students can only dig into the code a little bit and explore the limits of optimization points such as loading time, rendering speed and resource volume. Front-end, design and testing are all in a rush.

As the old saying goes, teach students according to their aptitude, in other words, give the right person, the right thing. When applied to development, it can be understood as providing different product effects for different users to improve user experience.

When this is applied to dynamic efficiency development, the final solution is dynamic efficiency degradation.

Introduction to the

In a word, dynamic efficiency degradation is summarized, that is, different models are classified according to their performance, and different levels provide different dynamic efficiency.

For example, for high and low end models, from high to low you can offer video animations, Lottie animations, and CSS animations.

Personally, for low-end models, it is more important to let users experience functions smoothly, rather than clinging to gorgeous effects.

The project design

Aircraft division

The core of dynamic efficiency degradation is to provide appropriate dynamic efficiency for appropriate models. Therefore, the first step of dynamic efficiency degradation is to divide different levels of different models according to the rules.

IOS model division is relatively simple, just according to the model can be judged, for example, iphone6 below the low-end machine, iphone8 below the mid-range machine.

There are a variety of Android models and systems, so it is obviously not feasible to judge one by one. Therefore, the model scoring platform is required to score Android models, and finally use the score to divide model levels.

In addition, we also need to maintain a blacklist of models, mainly including the hardware is ok, but the actual display effect is not good. If a match is matched in the blacklist, the match can be demoted directly.

Note that it is a common practice to divide all models into high, middle and low levels, but not the only one. In practice, it is ok to divide all models into two, four or even five levels, depending on the project.

The rules for

After determining the model rules, we also need to obtain the rules. In this case, there are two processing schemes: the rule is written in code or delivered by the server.

Rules are relatively simple to write in code, perform relatively well (because you omit the process of requesting rules), but are not easy to maintain.

On the contrary, the server-side delivery scheme is easy to maintain but relatively poor performance.

How to choose depends on the specific needs.

Demotion strategy

Dynamic efficiency degradation strategies can be formulated according to different projects and backgrounds. Generally speaking, the more advanced the model is, the more dynamic efficiency of performance will be consumed.

Here’s an example:

There is a video animation on the front page of the activity page, which remains unchanged for high-end models, while Lottie/Canvas animations can be used for mid-range models, and CSS animations or GIF images can be used for the last low-end models, and in the most extreme cases, still images can be used directly or left blank.

TIPS: Because the degradation process is relatively fixed, components can be packaged and developed using degraded components.

Special Scenario Processing

In principle, all motion effects need to be degraded, but some special scenes need special treatment.

Here’s an example:

There is a countdown page that uses a gorgeous video animation. According to the rules, it needs to be downgraded to Lottie animation, but the product manager requires it to be downgraded to CSS animation. In this case, special treatment is required.

Due to the variety of dynamic effects scenarios, degraded components need to provide flexible hooks and configurations to accommodate more scenarios.

Out to deal with

The preceding is based on the type of judgment, scene judgment active use of dynamic effect degradation. In fact, for the bottom of the treatment, can also be passive use of dynamic degradation.

Here’s an example:

On a high-end computer, it is supposed to play video animation. As a result, the corresponding CDN resource fails to pull the video animation resource, which ultimately leads to the failure of playing video animation. At this point, the video animation can be automatically demoted to Lottie animation using passive dynamic effect degradation. In this way, the high-end dynamic effect is downgraded to the mid-end dynamic effect, and the mid-end dynamic effect is downgraded to the low-end dynamic effect. The final effect is that although there is a BUG, the user does not feel the BUG.

This is the myth: if users don’t perceive a BUG, there is no BUG.

Buried some statistical

After the dynamic effect degradation is completed, buried point statistics are needed.

The significance of dynamic effect degradation buried point lies in the statistical degradation ratio and corresponding models. Only when relevant information is obtained, the rule configuration can be dynamically adjusted to achieve the best dynamic effect degradation.

The overall effect

advantage

The advantages of dynamic effect degradation are very obvious:

  • Greatly improved the frame rate of middle and low-end models which was difficult to optimize originally (performance index Ecstasy series)
  • Significantly reduce resource consumption, such as CDN (true · I saved tens of millions of series for the company
  • Bottom handling can significantly improve stability and prevent bugs, avalanches, breakdowns and other problems

It can be seen that dynamic performance degradation significantly improves performance, stability, and resource consumption by sacrificing some of the effects, which is important in large projects.

disadvantage

In fact, dynamic effect degradation also has certain disadvantages, such as:

  • The front end needs to realize multiple sets of dynamic effect programs (the front end wants to hit people series
  • Designers need to provide multiple sets of dynamic solutions (designers want to hit a series
  • More dynamic solutions, more testing pressure (QA wants to hit people series)
  • The product manager may not agree with performance degradation

It can be found that the main disadvantages of dynamic effect degradation are the need for more manpower and the sacrifice of some effects for performance.

To sum up, we should not blindly use the dynamic efficiency degradation scheme, but must find ways to overcome the shortcomings of dynamic efficiency degradation and give full play to its advantages, so as to maximize the advantages and avoid the disadvantages to achieve the best effect.

conclusion

Kinetic efficiency downgrading is not so much a technical solution as a concept: to provide a different but more appropriate experience for different models. This idea applies not only to motion effects, but also to other aspects such as pictures.

In my opinion, the user’s overall experience depends not just on gorgeous effects, nor just on extreme fluency, but on the balance between the two. The two are like two sides of a scale, and the imbalance on either side leads to a precipitous slide in experience. As a r&d engineer, you have to strike a balance between the two to achieve the best user experience.