Box Shadow Performance
"Changing box-shadow alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.
Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together."
Check it out:
- Open dev tools
- Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu.
- Start typing performance, select Show Performance monitor, and press Enter. DevTools displays the Performance Monitor tab at the bottom of your DevTools window.
- Observe the difference between "box-shadow" & "pseudo-element" whilst animating.
- Also open the "Rendering" tab and check out Paint Flashing.
- Optionally throttle your CPU in the Performance Tab.
- Check out the blog post here.