Will to much customize stylesheet lag the tiddlywiki?

#1

I want to add favicon to all links ahead in links in tiddlywiki. Like I disscussed in this post How to set the favicon of website? - #5 by telumire. As you can see the solution of the post. When I add a favicon, I need to add the code:

<$vars
svg="$:/core/images/globe"
fill-filter="[{$:/palette}getindex<fill>]~[{$:/palettes/Vanilla}getindex<fill>]~[[$:/config/DefaultColourMappings/]addsuffix<fill>get[text]]~[<fill>]"
uri="""[[background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22pt" height="22pt" fill="]][subfilter<fill-filter>][[">]][subfilter<svg>get[text]][[</svg>');]]+[join[]search-replace:m[#],[%23]]"""
>

<$vars fill="external-link-foreground">
a:not([href^="#"],.tc-tiddlylink):before{<$text text={{{ [subfilter<uri>] }}}/>}
</$vars>

<$vars fill="external-link-foreground-visited">
a:not([href^="#"],.tc-tiddlylink):visited:before{<$text text={{{ [subfilter<uri>] }}} />}
</$vars>

<$vars fill="external-link-foreground-hover">
a:not([href^="#"],.tc-tiddlylink):hover:before{<$text text={{{ [subfilter<uri>] }}} />}
</$vars>
</$vars>

I have 200 urls for now, later will become more.

Because I need process all the urls, there will be tons of code for customize stylesheet, My question is if the customize stylesheet become so big, will effect the responding speed of the tw ?

#2

The advantage of a CSS solution to show icons is that you only need to declare it once, and the browser will use the style on ALL your icons. This prevent generating DOM elements which is really bad for performances (see Some thoughts on performance)

However, the more icons you want to use, the more CSS will be generated so be careful with that.

On my wiki, I generated a CSS icon for all of the core images and did not experienced significant lag so I think you should be fine.

See TiddlyTweaks — Small tweaks for TiddlyWiki (this tiddler use the old version of the filter)

2 Likes