Let the developers know of what operations will be triggered by changes on the css properties
npm install @hint/hint-detect-css-reflowsdetect-css-reflows)Let the developers know if changes to a specific CSS property inside @keyframes
will trigger changes on the Layout, Composite or Paint rendering pipeline.
Understanding what rendering pipeline operations will be triggered by changes
on specific CSS properties can prevent users from introducing unintentional
performance hits. Paint and Layout operations should be minimized or avoided
when combined with animations.
It scans the css properties inside @keyframes property against a defined
set of properties and associated rendering triggers.
left property triggers a Layout operation its use should be minimized inside@keyframes to avoid jankiness or slow animations.
``css
@keyframes performance-with-layout-trigger {
0% {
left: 0;
}
100% {
left: 400px;
}
}
`
A better approach is to use translate which will trigger only once, at the
end of the animation.
`css
@keyframes performance-without-layout-trigger {
0% {
transform: translateX(0);
}
100% {
transform: translateX(400px);
}
}
`
You can decide the granularity and severity of your reports up to the
following categories:
- detect-css-reflows/composite
- detect-css-reflows/layout
- detect-css-reflows/paint
To use it you will have to install it via npm:
`bash`
npm install hint --save-dev
Note: You can make npm install it as a devDependency using the --save-dev
parameter, or to install it globally, you can use the parameter. Fornpm
other options see's documentation.
And then activate it via the [.hintrc][hintrc]
configuration file:
`json``
{
"connector": {...},
"formatters": [...],
"parsers": [...],
"hints": {
"detect-css-reflows/composite": "off",
"detect-css-reflows/layout": "hint",
"detect-css-reflows/paint": "off"
},
...
}
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[understanding-critical-path]: https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path