CSS Performance

[caseyprovost]

Steps to reproduce

All you need is a page with lots of dom elements. Say 1000, you can even cheat and make most of those options in a drop down. Introduce Vue Material and watch your performance drop.

Which browser?

Chrome - Latest (Mac)

What is expected?

Reasonable performance

What is actually happening?

We have a legacy app that we are introducing this to and we are seeing about a 2x speed loss when rendering heavier pages. The culprit seems to be this guy:

html * { box-sizing: inherit }

If we remove the above all performance issues are rendered moot (mostly). How can we make this more performant?

-- EDIT --
It is worth noting that if you add more and more dom elements you can watch performance degrade. Our situation is a page with over 14,000 dom elements. I know that seems nuts, but it does render fast without this additional css.

[Samuell1]

If you remove box-sizing: inherit all elements will not be working like expected, because its uses box-sizing: border-box from html element. (Example here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-sizing)

But you should use some optimalizations on your side, virtual scroll, lazyloading, pagination etc

[caseyprovost]

Would something like this get better performance?

html {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

or perhaps: (from Reboot.css)

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

[caseyprovost]

@Samuell1 and I hear ya about optimizations, but a new framework causing rendering slow-downs over 2x or more seems a bit non-standard too. Im not a CSS wizard, but I am curious what tweaks can be done in this framework to reduce the performance impact.

[Samuell1]

@caseyprovost html * {..} should be same as * {...} but this targets all elements

You should have optimalizations and not to render a 1k items on page you can try pure HTML with 1k items and you will get same performance drops from browser.

[caseyprovost]

@Samuell1 I think the key is box-sizing: border-box; vs inherit. Setting a value explicitly rather than dynamically inheriting from the dom tree is a performance cost for sure.

[Samuell1]

@caseyprovost can you test that?

[caseyprovost]

@Samuell1 I have locally in my environment and it does seem to improve page load times by 1-1.5seconds. Do we have tests in this repo for performance that would be a good place to add something like this?

[Samuell1]

@caseyprovost do you using only vue-material without any your code?