sizingInvisible horrible performance

[Danielku15]

Hey there.

I have a rather complex form which utilizes a wizard for usability. There are quite a lot of dropdowns and inputs which I style with uniform. The problem is that those elements are hidden on load which causes uniformjs to use sizingInvisible to get the element sizes.

On my desktop system (2.3GHz core i7-3610QM) it takes several seconds to initialize 100 elements.

2.5 seconds on Firefox 26
3 seconds on Chrome 32

https://github.com/pixelmatrix/uniform/blob/master/jquery.uniform.js#L479

You should try to find a new way of sizing the elements.

[fidian]

Agreed. Any ideas come to mind?

[Danielku15]

For modern browsers the library could try to utilize MutationObservers

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver?redirectlocale=en-US&redirectslug=DOM%2FMutationObserver
http://caniuse.com/mutationobserver

Additionally you could listen for a custom event like 'shown'. This way other libraries could fire this event to notify uniformjs that the selects are visible now.

Or a timer could be started to monitor the selects if their visibility changed.

Combined it could be something like discussed here:
http://stackoverflow.com/questions/1225102/jquery-event-to-trigger-action-when-a-div-is-made-visible

[fidian]

Uniform is geared to work with all browsers, starting with the era of IE8. Yes, this poses some challenges, and the above techniques mean that there would still need to be a way to fall back for older browsers and also watch for ways that the DOM gets manipulated by plugins that don't know about Uniform. It's a truly tricky problem.

I think that the next version handles this a bit better by just building a hidden DIV with the rendered content. This should let us get the desired width nearly instantly.

Having a jsfiddle with hundreds of selects that need styling would be fantastic. With that I would be able to see the problem and test the updated code to see if it still has a performance problem.

[Danielku15]

Since there are that many old IE users it's quite a must to support them too (especially as a library like uniform). But still it's not a no-go to benefit from new technologies (with old browser fallbacks).

I created a small fiddle showing the problem:
http://jsfiddle.net/j8sgz/

Initializing 50 rows with 2 year dropdowns and 2 textboxes each takes:

Chrome 32

• ~800ms if the rows are visible
• ~25000ms the rows are hidden

Firefox 26

• ~1400ms if the rows are visible
• ~55000ms if the rows are hidden

[fidian]

Beautiful. Thanks for the example. I will make sure to test the next version against this scenario before releasing it.

[shehi]

@fidian , was anything done in this regard, after your last comment? If not, I will be looking into it.

[fidian]

@shehi Negative. I did not test the speed. I also didn't have any ideas for how to properly get the size of invisible elements nor did I confirm that the DOM structure changes I was making would produce any tangible benefit.

[shehi]

Updated JSFiddle.

[shehi]

For the moment, due to the limitations of old tech (HTML-4, old browsers, old jQuery etc), I see no prospect to push for this improvement, as gains want be worth the effort. I am moving this to our 5.0 development, which will use the cutting edge tech for those who want to move forward. There, with latest jQuery, HTML-5 innovations and DOM improvements, I believe a considerable progress can be achieved.