dropdown.js is slow

[milahu]

dear Vanilla-Semantic-UI, please keep up the fight for better performance

this is a copy-paste from Semantic-UI issue 6703

Semantic-UI should run faster. jQuery is slow. prefer native JS

Expected Result

run faster

Actual Result

running slow : P

Version

2.4.2

Desc

this concerns the abuse of jQuery.

when i see code like ...

              module.debug('Creating entire dropdown from select');
              $module = $('<div />')
                .attr('class', $input.attr('class') )
                .addClass(className.selection)
                .addClass(className.dropdown)
                .html( templates.dropdown(selectValues) )
                .insertBefore($input)
              ;

in src/definitions/modules/dropdown.js line 360

... i suspect: this cant be fast.

and its not:

• native createElement is faster by factor 4 (or faster by factor 2 if jQuery is needed afterwards)
• native setAttribute is faster by factor 4 (setProperty only works for standard attributes)
• native classList.add is faster by factor 2
• native innerHTML is faster by factor 1.5 (also faster than createDocumentFragment + createElement + appendChild)
• jQuery.html is really slow with 'complex xml input' (innerHTML should be fine, since most pages use XHTML, so strings are parsed as XHTML)

etc ...

templates.dropdown is fast, cos it only concats strings
in src/definitions/modules/dropdown.js line 3900

references

https://ilikekillnerds.com/2015/02/stop-writing-slow-javascript/

[milahu]

templates.dropdown is fast, cos it only concats strings

quote from jQuery forums

If string concatenation is the bottleneck in this calculation than you should try storing the string parts in an array and than join them using join().
This has proven to be much faster than "normal" string concatenation.

funny, in my chrome v70 browser, concat with 'x = x + substr' is faster by factor 1.5.
also push is faster than assign.

but im still puzzled, why jQuery.html is so slow ... maybe cos the context is XHTML?