Timeout error in Firefox with many elements

[landy2005]

Firefox 41.0.1 (OS X), jquery 1.11.4, bootstrap-switch 3.3.2

On page many elements like this (ports list):

<input data-toggle="switch-revert" id="disabled_644792" name="disabled_644792" type="checkbox">
<input data-toggle="switch-revert" id="ignored_644792" name="disabled_644792" type="checkbox">

<!-- and js: -->
<script>
jQuery(document).ready(function() {
  $('[data-toggle="switch-revert"]').bootstrapSwitch({
    size:        'mini',
    onText:        'No',
    onColor:   'danger',
    offText:      'Yes',
    offColor: 'primary'
  });
});
</script>

when total elements count more than ~200-250 Firefox reports an timeout error and stops the execution of the script (pop-up window with a selection: stop execute/debug/continue).

Chrome/Safari work, but a long time (>5sec).

[gogglespisano]

I just did a quick test adding 250 switches with custom colors and texts. Both Chrome and Firefox took about 5 seconds to display the page with no popups on firefox. The difference may be is that I added the switches using JS calling bootstrapSwitch() on each one as it was created and then they were all rendered with the switch CSS at once rather than having it applied one by one.

So maybe it's the difference in the browsers of handling a lot of changes causing reflow.

[landy2005]

It looks like depends on the performance of the computer: at work (weaker) get timeout, but at home do not get and also took about 5-6 seconds to display.

But anyway 5 sec it is a very long time, page "freezes" at this time.

Other information that may reveal a problem. Before I wrote this issue, I changed selector from multiple (see below) to single (as in issue desc). It also reduced a little time.

  $('[data-toggle="switch-revert"]').bootstrapSwitch('size',        'mini');
  $('[data-toggle="switch-revert"]').bootstrapSwitch('onText',        'No');
  $('[data-toggle="switch-revert"]').bootstrapSwitch('onColor',   'danger');
  $('[data-toggle="switch-revert"]').bootstrapSwitch('offText',      'Yes');
  $('[data-toggle="switch-revert"]').bootstrapSwitch('offColor', 'primary');

[landy2005]

I make performance record (in ff), to see Tools > Web Developer > Performance > Import
https://www.dropbox.com/s/eio3r253zgx95vz/ports-switch.json.zip