PHP-функция vs jQuery.each()

Question

Я изначально использовал PHP, чтобы перебирать кучу правил case и применять класс стиля CSS к отдельным ячейкам TD на основе значения ячейки. PHP прекрасно работает, страница загружается почти мгновенно. Я хотел поэкспериментировать с JavaScript, поскольку все говорят: «Не делайте что-то в PHP, если вы можете это сделать в JavaScript».

Теперь я использую цикл .each(), но проблема заключается в загрузке и блокировке браузера с просьбой прекратить выполнение скриптов - на Core i7 4790k с 16 ГБ ОЗУ! Ужасно!

Это ситуация, когда использование циклов на стороне сервера более эффективно, чем цикл JavaScript? Должен ли я делать цикл в PHP или JavaScript/jQuery?

Вот код JQuery - если есть что-нибудь вопиющий неправильно с ним:

function inRange(value, low, high) { 
if (value >= low && value <= high) { return value; } 
else { return !value; } 
} 

$(document).ready(function() { 

    $('.jsColorTemp').each(function() { 
     var tValue = $(this).contents().filter(function() { return this.nodeType === 3; }).text(); 
     switch(tValue) { 
      case inRange(tValue, -999, -75): $(this).switchClass('jsColorTemp', 'C6TB75', 0); break; 
      case inRange(tValue, -74, -70): $(this).switchClass('jsColorTemp', 'C6TB70B74', 0); break; 
      case inRange(tValue, -69, -65): $(this).switchClass('jsColorTemp', 'C6TB65B69', 0); break; 
      case inRange(tValue, -64, -60): $(this).switchClass('jsColorTemp', 'C6TB60B64', 0); break; 
      case inRange(tValue, -59, -55): $(this).switchClass('jsColorTemp', 'C6TB55B59', 0); break; 
      case inRange(tValue, -54, -50): $(this).switchClass('jsColorTemp', 'C6TB50B54', 0); break; 
      case inRange(tValue, -49, -45): $(this).switchClass('jsColorTemp', 'C6TB45B49', 0); break; 
      case inRange(tValue, -44, -40): $(this).switchClass('jsColorTemp', 'C6TB40B44', 0); break; 
      case inRange(tValue, -39, -35): $(this).switchClass('jsColorTemp', 'C6TB35B39', 0); break; 
      case inRange(tValue, -34, -30): $(this).switchClass('jsColorTemp', 'C6TB30B34', 0); break; 
      case inRange(tValue, -29, -25): $(this).switchClass('jsColorTemp', 'C6TB25B29', 0); break; 
      case inRange(tValue, -24, -20): $(this).switchClass('jsColorTemp', 'C6TB20B24', 0); break; 
      case inRange(tValue, -19, -15): $(this).switchClass('jsColorTemp', 'C6TB15B19', 0); break; 
      case inRange(tValue, -14, -10): $(this).switchClass('jsColorTemp', 'C6TB10B14', 0); break; 
      case inRange(tValue, -9, -5): $(this).switchClass('jsColorTemp', 'C6TB05B09', 0); break; 
      case inRange(tValue, -4, 0): $(this).switchClass('jsColorTemp', 'C6T000B04', 0); break; 
      case inRange(tValue, 1, 4): $(this).switchClass('jsColorTemp', 'C6T004001', 0); break; 
      case inRange(tValue, 5, 9): $(this).switchClass('jsColorTemp', 'C6T009005', 0); break; 
      case inRange(tValue, 10, 14): $(this).switchClass('jsColorTemp', 'C6T014010', 0); break; 
      case inRange(tValue, 15, 19): $(this).switchClass('jsColorTemp', 'C6T019015', 0); break; 
      case inRange(tValue, 20, 24): $(this).switchClass('jsColorTemp', 'C6T024020', 0); break; 
      case inRange(tValue, 25, 29): $(this).switchClass('jsColorTemp', 'C6T029025', 0); break; 
      case inRange(tValue, 30, 32): $(this).switchClass('jsColorTemp', 'C6T032030', 0); break; 
      case inRange(tValue, 33, 34): $(this).switchClass('jsColorTemp', 'C6T034033', 0); break; 
      case inRange(tValue, 35, 39): $(this).switchClass('jsColorTemp', 'C6T039035', 0); break; 
      case inRange(tValue, 40, 44): $(this).switchClass('jsColorTemp', 'C6T044040', 0); break; 
      case inRange(tValue, 45, 49): $(this).switchClass('jsColorTemp', 'C6T049045', 0); break; 
      case inRange(tValue, 50, 54): $(this).switchClass('jsColorTemp', 'C6T054050', 0); break; 
      case inRange(tValue, 55, 59): $(this).switchClass('jsColorTemp', 'C6T059055', 0); break; 
      case inRange(tValue, 60, 64): $(this).switchClass('jsColorTemp', 'C6T064060', 0); break; 
      case inRange(tValue, 65, 69): $(this).switchClass('jsColorTemp', 'C6T069065', 0); break; 
      case inRange(tValue, 70, 74): $(this).switchClass('jsColorTemp', 'C6T074070', 0); break; 
      case inRange(tValue, 75, 79): $(this).switchClass('jsColorTemp', 'C6T079075', 0); break; 
      case inRange(tValue, 80, 84): $(this).switchClass('jsColorTemp', 'C6T084080', 0); break; 
      case inRange(tValue, 85, 89): $(this).switchClass('jsColorTemp', 'C6T089085', 0); break; 
      case inRange(tValue, 90, 94): $(this).switchClass('jsColorTemp', 'C6T094090', 0); break; 
      case inRange(tValue, 95, 99): $(this).switchClass('jsColorTemp', 'C6T099095', 0); break; 
      case inRange(tValue, 100, 104): $(this).switchClass('jsColorTemp', 'C6T104100', 0); break; 
      case inRange(tValue, 105, 109): $(this).switchClass('jsColorTemp', 'C6T109105', 0); break; 
      case inRange(tValue, 110, 114): $(this).switchClass('jsColorTemp', 'C6T114110', 0); break; 
      case inRange(tValue, 115, 999): $(this).switchClass('jsColorTemp', 'C6T115', 0); break; 
     } 
    }); 

}); 

Answer 1

уже установил его. Таким образом, функция «switchClass()» jQuery является мучительно медленной, даже если вы указываете продолжительность анимации в 0 секунд. Использование «toggleClass()» работает MUCH MUCH быстрее.