IE11 / Edge performance issues with using attribute selectors

[aaronnuu]

Hi,

I have been using glamor to help build a medium sized application and when testing in IE and Edge I noticed a major performance issue when hovering over elements with the ':hover' pseudo-selector OR hovering over their parent element. After many hours of debugging and one helpful medium article I discovered that the issue is caused by IE recalculating layout for almost every element on the page when using attribute selectors.

The first screenshot is with the '[data-css-*]' attribute selector:

The second screenshot is after removing those selectors from my stylesheet:

As you can see at a minimum the browser spent 65x less time calculating layout without the [data-css-*] selectors...

This is quite an extreme example as I am testing in a VM on a development build but using the reasonably powerful 2017 surface studio I was still getting ~350ms of layout calculation on every hover event.

I know the feature to opt-out of using those attribute selectors is on the backlog however I'm not sure if you are aware of exactly the performance impact they have on IE and Edge browsers, as this makes glamor basically unusable for even a medium sized application.

Cheers

[compulim]

@AaronW9090 I would like to know more about the perf issue.

Do you mean glamor has perf impact on Edge when:

1. Creating new rules with attribute selector, i.e. calling css({ ... }) and applying as <div { ...style }>
2. The attribute-based rule is turned on by a pseudo class, i.e. mouse hovering over an element with [data-css-XXX]:hover style

Even though I am not using attributed-based version (i.e. <div { ...rootStyle }>), but only class name-based rule (i.e. <div className={ rootStyle }>) across all my elements, will it affect overall performance on Edge?

[aaronnuu]

@compulim If your elements don't have the [data-css-xxx] attribute then even if those selectors appear in your stylesheet you shouldn't have these perf issues (although I haven't tested this).

[nolanlawson]

Hi all, this appears to be a known issue with Edge which we're working on: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13348719/

In the meantime, it may be advantageous to look into using classes instead of attributes. Classes should be faster than attributes in all engines, and particularly faster in Edge/IE. In general, most engines have optimized more for classes and IDs than for attributes.

I also advised Svelte to do the same FWIW: sveltejs/svelte#1118