elastic
[Epic] Benchmark performance gains of CSS variables for theming/color mode
✨ Summary
Assess whether leveraging CSS variables for theming could represent significant performance gains, namely in Kibana.
❗ Problem or Opportunity
Handling of theming, color mode, etc in EUI is handled with JavaScript logic. A change means computing a new theme and updating the styles of each and every component on the page. We can let the browser do this, and remove a decent amount of code/logic.
🎯 Value
Performance and DX (less code).
🎯 Urgency
This is in line with the current efforts to improve perceived performance related to how we write and use Emotion. ~~It'll be enabling the actual implementation if there are actual performance gains.~~ We want to time-box this initial benchmarking effort (e.g. 1-2 weeks), and if successful, plan and scope the actual implementation of using CSS variables for theming.
🧠 Feasibility & Direction
We want to:
- make a PoC that handles theming with CSS variables
- benchmark performance in Kibana
❓ Open Questions to answer
~
This looks very interesting. Do we know how the performance difference could be measured?
Do we know how the performance difference could be measured?
me not exactly, but I'm sure @tkajtoch has some ideas with some DevTools wizardry — I imagine we could define a list of situations we would want to test e.g. switching color mode, navigating between pages X and Y, etc.
When we last discussed this, we were talking about putting together a rough and non-fancy prototype (e.g. loading a CSS file with all color tokens as variables, having the color tokens in the TS theme point to those e.g. backgroundFoo: var(--background-foo) so no refactoring of consumer-facing code is needed in order to test) and time-boxing it to 1-2 weeks.
The primary gain would likely be coming from reduced useEuiTheme() usage and component rerenders. Using CSS variables for dynamic data would make the JS-based style declarations static, making it easier on the Insertion Emotion component (src).
It should be pretty easy to measure the difference with DevTools heap and performance monitoring, and the React DevTools extension, specifically their Profiler. For example, we could create a set of real-world actions using Chrome Recorder and run profiling before and after on the same interactions, with the same timing between steps.
