[Dynamic Styles] a question of performance and efficient solution

[kookma]

A dynamic css can be like a below tiddler

Title: my-custom-style
Tags: $:/tags/Stylesheet

[data-tags ~= "recipe"] .tc-tiddler-body {
font-family: "Roboto";
font-weight: 500;
font-size:   32px;
line-height: 48px;
}

Now assume I need to apply the above styles to any tiddler has tag recipe AND also has a parent tag from american, european or asian all children of continental.

so I may use the below code as the body of above my-custom-style tiddler

<$list filter="[[continental]tagging[]]" variavle=sl>
  [data-tags*="<<sl>>"] [data-tags ~= "recipe"] .tc-tiddler-body {
font-family: "Roboto";
font-weight: 500;
font-size:   32px;
line-height: 48px;
}  
</$list>

Note in real case I use much more complicated css here. This is the approach I also used in Tiddlyshow.

The issue is as my wiki grows with children of continental parent tag I got a very large my-custom-style so my question is:

1. What is the performance impact using the above approach?
2. What simpler solution do you propose?

I appreciate your input here.

Reference

• Google Forum

This is the answer by @saqimtiaz :

This is a good question and something I have been wondering about recently while working on some performance improvements for Streams.

In general terms, there is a cost to having wikitext in CSS tiddlers when refreshing the styles in refreshStyles()
However most of the time this is negligible compared to the time taken by the actual rendering process.

This might make for a good dev discussion on Github.

[Jermolene]

At the moment we pack all $:/tags/Stylesheet tiddlers into a single <style> tag, which has a couple of consequences:

• Whenever there's even a minor change, the browser will see the entire text content of the <style> tag swapped out, and so will have to reparse and apply the entire stylesheet. We could improve things by placing each $:/tags/Stylesheet tiddler into its own <style> tag. Then the performance advice would be very simple: to put dynamic stylesheet sections into their own tiddlers, and possibly keep all the static styles in one big tiddler
• If there's an error in one stylesheet tiddler (like an unclosed comment) then it will affect subsequent stylesheets in the ordering

It's actually something I've been thinking about fixing for post-v5.1.23

[pmario]

A real world example is sticky titles

I'm not sure anymore what exactly happened, but I think it causes 100 style refreshes and some other strange effects, that caused me a lot of time, "whacking the mole"

[saqimtiaz]

@pmario on that note, there is another report of the same problem with sticky titles as well. See saqimtiaz/streams#8 (comment)

One surprising finding: using the Vanilla theme with enabled Sticky titles causes [[200]subtract] (in wiki/tiddlers/$__themes_tiddlywiki_vanilla.json) to be reevaluated. Adding a single character increases the counter by exactly 300 invocations.

[pmario]

Yea, that should be fixed! ... I can remember now, that I had problems with single step debugging, where recalculating this CSS made me wonder, what's going on. ... I did disable the config, because I didn't have time to investigate, what exactly was going on.

[saqimtiaz]

@pmario @Jermolene I believe it is this commit that is the problem: 1c982fb

[Jermolene]

I'm not sure anymore what exactly happened, but I think it causes 100 style refreshes and some other strange effects, that caused me a lot of time, "whacking the mole"

What do you mean by "style refreshes" here?

[kookma]

This is only for later reference and also for using in documentation:

In Google forum I asked

Tiddlywiki is enough flexible to have

1. stylesheet tiddler of type text/css
2. stylesheet tiddler of type text/vnd.tiddlywiki (good for dynamic css)
3. stylesheet as inline element using <style>..</style> html tag

Q1.
I normally use the first two types. What is the best practice to have a higher performance? Performance here means faster processing and what user sense is to have the fastest response!

Q2.
If I have to use dynamic styles, do you recommend having a stylesheet tiddler of type text/vnd.tiddlywiki with all css properties? OR you recommend to store all static CSS in a text/css tiddler and ONLY put the dynamic part into another stylesheet tiddler of type text/vnd.tiddlywiki?

Replied by @saqimtiaz

• Q1: method 1 is faster than method 2 but the difference shouldn't be significant unless you are using a large amount of wikitext in the stylesheet. Also sometimes it is a choice between a dynamic stylesheet that use wikitext, vs other techniques to achieve the same thing. So the text/vnd.tiddlywiki type for the CSS might be the faster option overall.

• Q2: It currently does not matter, as if any one stylesheet changes, the entire style tag for the document will be refreshed. However as expressed by Jeremy in the GH discussion on this topic, we might improve that to handle each stylesheet separately. So separating your dynamic and static CSS from now will mean less work later to take advantage of that eventual change.

[kookma]

I try to use wikitext / Tiddlywiki scripting instead of JS for many task including dynamic styling. See the below JS function

function hideScrollbar() {
  document.body.style.overflow="hidden"

}

function showScrollbar() {
  document.body.style.overflow="scroll"
}

So, what is the equivalent Tiddlywiki script if the performance is one priority? Can a set of two $button widgets and a $reveal widget be used? What is the recommended practice here? I have a given a crude solution here in Forum but I think it is a bad practice to include inline styles.