You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$10
For Premium members:
In this article, we will discuss how to perform performance optimization ina AngularJS animation. This is part 20 of the article series.
I am here to continue the discussion around AngularJS. Today, we will discuss how to perform performance optimization in animation using AngularJS. Also in case you have not had a look at our previous articles of this series, go through the following links:
We have already discussed in the previous articles, how to create different animations using AngularJS, CSS,and JavaScript, but we must always be concerned with the user experience. All animations in separate samples are great, and performance is not an issue. However, when we are dealing with big single-page applications with heavy processing, a lot of CSS and a big DOM, we should focus on keeping our web app fast and the animations smooth; this is the topic of this article.
The display and the frame rate
This sample uses Request Animation Frame (RAF); so, the callback function that moves the element 10 px will be called before each repaint until the element has moved 100 px to the right. If we set a hardcoded time interval using the setTimeout function, we might lose a repaint. Losing repaints gives the user a feeling of lag. Although RAF helps improve the animation quality, we still have to keep in mind that a new frame is often generated every 16 ms, so the browser has 16 ms to compute the JavaScript, manipulate DOM, execute the layout, paint and anything else, otherwise you will lose a frame and the animation smoothness might be degraded. As CSS animations' execution is separated from the JavaScript execution, it's easy to see that modern browsers can improve the animation's smoothness. The animation frame is ready independent of the JavaScript execution. If you execute a heavy loop and it keeps processing in JavaScript, your JavaScript animation might fail (freeze), as the thread will already be busy processing the loop. This is why we should always prefer CSS animations instead of JavaScript animations, in my humble opinion. In the following topic, we will learn how to find out whether our animations are losing frames.
We just learned the benefits of using requestFrameRate and CSS animations. However, if we want to improve our animations' performance, how can we find out what is slowing things down? Nowadays, we have tools that help us find these bottlenecks, and one of them is Chrome DevTools, which is a collection of tools that comes with the Chrome browser. To open Chrome DevTools, just press F12 or click on any part of a page,and then click on Inspect element. This tool is very familiar for web developers. Now, we will learn how to analyze the timeline frames mode. We need to record the execution, so Chrome will show us a real-time report with the frame rate, as shown in the following screenshot:
We just saw that using Chrome DevTools helps us find performance bottlenecks. Now, we are going to see how to find paint layers and enhance an animation just by replacing some CSS properties. For this sample, we will create a sliding menu such that when we click on a button and it slides from the left menu items, the page content slides to the right too. When we click on the button again, both the menu and page content slides to the left until the menu vanishes from the viewport. For the above concept, please write down the below code and check in the chrome development tools.
Azure in 24 Days