Chrome/Edge 84: More performant svg workaround solution
What does this MR do?
Instead of svg4everybody we use a custom more performant solution. Unfortunately svg4everybody had a big performance impact on pages with a lot of icons: gitlab-org/quality/performance#312 (closed)
We load our sprite icons with JS and add them to the body.
Then we iterate over all the use elements and replace their reference
to that svg which we added internally. In order to avoid id conflicts,
those are renamed with a unique prefix.
We do that once the DOMContentLoaded fired and otherwise we use a mutation observer to re-trigger this logic.
In order to not have a big impact on performance or to cause flickering of of content,
- we only do it for each svg once
- we debounce the event handler and just do it in a requestIdleCallback
Force rerendering of sprite icon components
With our new Chrome workaround we might render outdated icons in vue. By adding a key, we can ensure that the icon component is re-rendered if the icon that is supposed to be rendered changes.
Screenshots
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Closes #230433 (closed)