DevTools now detects and warns about CSS properties that can cause Layout-based performance issues when using CSS animations in a webpage.
This demo webpage shows two animations. The first one animates the width and height CSS properties, and the second one animates the transform property. While the result is the same, the first one forces the browser rendering engine to re-create the layout of the page at each frame of the animation, which could lead to performance issues while using the page. The second one runs on the compositor thread and doesn't impact the page's main thread.
The Issues and Elements tools now show a warning when an animation that uses a CSS property that requires layout is running on the page.
To learn more, see The Issues tool and Styles pane warn about CSS properties that trigger Layout in What's New in DevTools (Microsoft Edge 114).
To understand the performance implications of running an animation that requires recalculating the layout all the time, use the input and button below to run JavaScript code on the page. Enter a number, and click Run JavaScript. The higher the number, the more JavaScript work is executed on the page. Choose a number that makes the animation appear slow.
While the first animation is impacted by main-thread activity, the second one should run smoothly whatever is happening on the page.