зеркало из https://github.com/mozilla/gecko-dev.git
c85367f9d5
Inspecting pages with many CSS variables makes DevTools Inspector very slow. For example, try to inspect an element on [youtube.com](https://www.youtube.com/). One of the stylesheets loaded by youtube.com contains more than 7800 CSS rules (it's 55K lines long). Some of them specify a very large number of CSS variable delcarations on `:root` which will be inherited by all nodes on the page. This is a perf bottleneck for DevTools. {F2150398} Whenever an element is selected, its matching CSS declarations show in the Rules view. If the node inherits CSS variables, for **each declaration**, the Rules view checks if the [variables apply to the current declaration](https://searchfox.org/mozilla-central/rev/2bfe3415fb3a2fba9b1c694bc0b376365e086927/devtools/client/inspector/rules/models/element-style.js#403-408,417,424). This among other expensive operations which are repeated for each declaration. But for CSS variables, it's particularly slow given the frequent [checks with a regular expression](https://searchfox.org/mozilla-central/rev/2bfe3415fb3a2fba9b1c694bc0b376365e086927/devtools/client/inspector/rules/utils/utils.js#292-295) to verify if a CSS declaration's value includes any references to a given CSS variable name. This patch introduces new functionality. When a `TextProperty` (aka CSS declaration model) is created on the client, the names of CSS variables found in its value are extracted ahead of time into a `Set`. Whenever we want to check if the declaration uses a certain CSS variable name, we check against this pre-compiled list instead of verifying the string value every time. For high volume checks, like the ones done by the `ElementStyle`, this approach proves significantly faster. Profile without this patch: https://bit.ly/2Yd7khD Profile with this patch: https://bit.ly/3aMhJTZ There are still many optimizations that can be done, but the `hasCSSVariable()` method is no longer a performance bottleneck. Differential Revision: https://phabricator.services.mozilla.com/D73062 |
||
|---|---|---|
| .. | ||
| client | ||
| docs | ||
| platform | ||
| server | ||
| shared | ||
| startup | ||
| .eslintrc.js | ||
| .eslintrc.mochitests.js | ||
| .eslintrc.xpcshell.js | ||
| CODE_OF_CONDUCT.md | ||
| moz.build | ||
| templates.mozbuild | ||
| tsconfig.json | ||