Efficient CSS Tips
Posted: Thu Feb 27, 2014 5:52 pm
I'm developing a framework for TEI, which has a complex data model, so my CSS is quite large and complicated. I've noticed that as the XML file grows in size the editor slows down quite a bit.
I think it's because of the CSS: I've removed my custom Extension bundle from the framework and it doesn't speed it up much at all and on top of that, if I use very simple CSS, the pages speed up a lot. I've also profiled the app a bit and there don't seem to be any memory links, but every little action performed in Oxygen is causing the CPU to spike. Based on all that, I *think* the problem lies with my CSS being inefficiently written for the implementation used by Oxygen (The Flute CSS Parser, right?). Does anyone out there have experience with Flute and can share some tips on writing efficient CSS for it within the context of XML editing in Oxygen?
I've found the articles below on writing efficient CSS for web browsers. They suggest using id (#) tags and class (.) tags to do styling, but those aren't options for styling XML in Oxygen. In lieu of these, I have used a lot of descendant rules like element > element { }. Are these also inefficient in the Oxygen/Flute world as well? The articles also recommend avoiding pseudo classes because they are super slow, but the Oxygen documentation seems to imply that they are the way to go. Thoughts?
https://developer.mozilla.org/en-US/doc ... icient_CSS
http://www.onextrapixel.com/2012/05/03/ ... rendering/
Likewise, I'm assuming the article below does NOT apply to Oxygen, since it seems the improvements in CSS are only found in browser implementations.
http://calendar.perfplanet.com/2011/css ... he-better/
Thanks in advance for any guidance you can offer!
I think it's because of the CSS: I've removed my custom Extension bundle from the framework and it doesn't speed it up much at all and on top of that, if I use very simple CSS, the pages speed up a lot. I've also profiled the app a bit and there don't seem to be any memory links, but every little action performed in Oxygen is causing the CPU to spike. Based on all that, I *think* the problem lies with my CSS being inefficiently written for the implementation used by Oxygen (The Flute CSS Parser, right?). Does anyone out there have experience with Flute and can share some tips on writing efficient CSS for it within the context of XML editing in Oxygen?
I've found the articles below on writing efficient CSS for web browsers. They suggest using id (#) tags and class (.) tags to do styling, but those aren't options for styling XML in Oxygen. In lieu of these, I have used a lot of descendant rules like element > element { }. Are these also inefficient in the Oxygen/Flute world as well? The articles also recommend avoiding pseudo classes because they are super slow, but the Oxygen documentation seems to imply that they are the way to go. Thoughts?
https://developer.mozilla.org/en-US/doc ... icient_CSS
http://www.onextrapixel.com/2012/05/03/ ... rendering/
Likewise, I'm assuming the article below does NOT apply to Oxygen, since it seems the improvements in CSS are only found in browser implementations.
http://calendar.perfplanet.com/2011/css ... he-better/
Thanks in advance for any guidance you can offer!