help - Slider script dies in Chrome, works great in Firefox

help - Slider script dies in Chrome, works great in Firefox

I implemented a slider along with input boxes that can work in tandem with the slider.  When I started the records I was pulling in from the server was around 1000 and the slider worked well.  Once the database table was updated and the amount increased to 7500, the slider has taken a dive in Chrome.  

So if I just select say up to 1500 records from the database then no problems but once I go over that amount the slider becomes stuck and won't move without waiting a long time and even then, is difficult to move.  Along with that the div takes too long for the update.  I ran chrome performance testing and it seems 'update layer tree' is taking the most time.  In Chrome JS profiler, it showed the each function taking a long time.  

I tried changing the each to a regular for..in with no changes.  I removed the input boxes with no changes. And I also took out all the other js scripts in my code so the slider stood alone.  I wanted to see if anything else was effecting the slider. Again, this didn't seem to make a difference. As the title says Firefox runs this script fine.  

Maybe someone has some suggestions for fixing it in Chrome or insight as to why FF handles it and Chrome does not.  Side note, I'm running the app on an I5 mobile laptop with 8 gigs of memory.  

Here is the script.  Thanks in advance!

  1. jQuery("#amount1").change(function mySlider() {
  2.     jQuery("#treble").slider('values',0,jQuery(this).val());
  3. });
  4. jQuery("#amount2").change(function mySlider() {
  5.     jQuery("#treble").slider('values',1,jQuery(this).val());
  6. });

  8. function mySlider() {
  9.     return jQuery('#treble').slider({
  10.       range: true,
  11.       min: 1,
  12.       max: document.getElementById('albumCount').value,
  13.       values: [1, 20]
  14.     }, jQuery('#range').text("Choose a range"), {
  15.       change: function changeRange(event, ui) {
  16.         var sortPref = document.getElementById('searchprefform');
  17.           var radioArray = [];
  18.           var formData = new FormData(sortPref);
  19.           for(var value of formData.values()) {
  20.             radioArray.push(value);
  21.         }
  22.         var max, min;
  23.         min = ui.values[0];
  24.         max = ui.values[1];
  25.         jQuery("#amount1").val(min);
  26.         jQuery("#amount2").val(max);
  27.         jQuery('#range').text(min + ' - ' + max);
  28.         jQuery.ajax({
  29.           url: '/range_from_catalog',
  30.           type: 'get',
  31.           data: {
  32.             min: min,
  33.             max: max,
  34.             radioArray
  35.           },         
  36.          dataType: 'json',
  37.           success: function(response) {
  38.             var albums;
  39.             jQuery('#result').empty();
  40.             albums = response;
  41.             var i = 0
  42.             jQuery.each(albums, function(key, value) {
  43.               var sortPref;
  44.               var fragment = document.createDocumentFragment();
  45.               let li = document.createElement('li');
  46.               li.className = 'list-group-item'
  47.               li.id = `activelink${i}`
  48.               let a = document.createElement('a')
  49.               a.href = `/album_details/${encodeURI(value[0])}`
  50.               a.id = `catalbumdet${i}`
  51.               sortPref = `${value[1]}  Date: ${value[2]}`
  52.               a.appendChild(document.createTextNode(sortPref));
  53.               li.appendChild(a)
  54.               fragment.appendChild(li)
  55.               jQuery('#result').append(jQuery(fragment));
  56.               document.getElementById('result').className = 'scrolltest2'
  57.               i++;
  58.               return console.log;
  59.             });
  60.           }
  61.         });
  62.       }
  63.     });
  64.   };