[csswg-drafts] [css-typed-om] CSS Typed OM is no faster than using strings and style attribute. (#11567)

trusktr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-typed-om] CSS Typed OM is no faster than using strings and style attribute. ==
I have a series of "Bunnymark DOM" tests over at https://codepen.io/collection/XbeoYO.

The demo is a port of the Pixi.js Bunnymark example, but using DOM elements and CSS transforms instead of WebGL: https://www.goodboydigital.com/pixijs/bunnymark/

The following sample shows the usage of `style` attributes to modify the positions of the bunnies:

[Bunnymark DOM V5 (Good ol' style attributes)](https://codepen.io/trusktr/pen/zYrbVPp)

Modify the `3000` to `10000` or a higher number to see how much slower it will get.

The following sample uses the CSS Typed OM via the element attributeStyleMaps:

[Bunnymark DOM V1 (CSS Typed OM via attributeStyleMap)](https://codepen.io/trusktr/pen/BajbvXr)

If you try setting a higher number of bunnies than 3000, you'll see it also slows down.

Try setting the same higher number in both of those demos, and you will see that the speed of both remains about the same (both will be the same amount slower).

I was hoping that using the CSS Typed OM would allow us to see a perfrormance improvement due to working with numbers directly, without converting the numbers to strings.

I think, IIRC, that the browser is still setting the style attributes when modifying the CSS Typed OM, defeating the purpose.

Should the spec be updated to enforce that `style` attributes must not be set when modifying the Typed OM, and that the numbers should only be converted to strings when *accessing* the style attribute?

The expectation here is that we can stop using `setAttribute('style')` and instead work with the Typed OM to bypass all string performance hits. However in practice nothing happens, so I have not bothered to modify my projects as it would not provide any benefit.

----

Trying to use the Typed OM from a style sheet, which should not affect style attributes, would seem like it should be faster, but actually it is much much slower. See both of these demos:

[Bunnymark DOM V3 (CSS vars per bunny selector via <style> element)](https://codepen.io/trusktr/pen/eYJXwBW)


[Bunnymark DOM V4 (CSS vars in <style> element, transforms in style attribute)](https://codepen.io/trusktr/pen/gOPENRN)


---

All in all, I see zero incentive to update my projects to start using CSS Typed OM because there's no improvement.

Can we change this? Maybe by adding something to the specs to enforce it?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11567 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 24 January 2025 23:32:40 UTC