In svelte 3 is the $: reactive statement declaration slower or faster than HTML element class attribute? How can I measure it effectively? - performance

Question

Since I am building a series of components that will be updated several times per second and in large quantities I was wondering if there was a difference in FPS between the first solution below and the second:
First one (HTML element class)
<script>
export let className = undefined
export let something = false
export let somethingelse = false
</script>
<div class={`myCustomClass1 myCustomClass2 ${something ? "myCustomClass3" : "myCustomClass4"}${somethingelse ? "myCustomClass5" : "myCustomClass6"}${className ? ` ${className}` : ""}`}
>
Hello!
</div>
Second one ($: reactive statement):
<script>
export let className = undefined
export let something = false
export let somethingelse = false
$: classes = "myCustomClass1 myCustomClass2${something ? "myCustomClass3" : "myCustomClass4"}${somethingelse ? "myCustomClass5" : "myCustomClass6"}${className ? ` ${className}` : ""}
</script>
<div class={classes}>Hello!</div>
Basically: is the $: reactive statement declaration slower than HTML element class attribute?
How can I measure it effectively?

Answer 1

I wanted to comment because this will not directly answer your question, but I don't have enough rep
to bind a class to a variable, svelte has this, it might be more practical for you :
<script>
export let classIsActive = false;
export let evenShorter = false;
</script>
<div
class:activateClass={classIsActive}
class:evenShorter
class:combinationClass={classIsActive && evenShorter}
/>

Answer 2

In my opinion, I think that there is no difference in performance on both methods because for both methods every time the props get updated the class attribute need to be recalculated.
However, I prefer using $: classes = ... cause it increases the readability of the code, also you may need to declare a function that handles the logic of building class attribute, for example:
export function classNames(...args){
return args.map(arg=>{
if(Array.isArray(arg)){
if(arg.length === 1){
return arg[0]
}
return arg[0] ?arg[1] :arg[2]||''
}
return arg
}).join(' ')
}
App.svelte
<script>
import {classNames} from './classNames'
export let className = undefined
export let something = false
export let somethingelse = false
$:classnames = classNames("myCustomClass1 myCustomClass2", [something, "myCustomClass3", "myCustomClass4"], [somethingelse, "myCustomClass5","myCustomClass6"], [className])
</script>
<div class={classnames}>
Hello!
</div>