Web-automation.ru

Общие методы для оптимизации JS

• Самая быстрая выборка

  $('#id')
  $("#id").find(".class1");
  $(".class", parent)
  

  Псевдоселекторы(:visible и т.п.) – самые медленные.

• При работе с DOM использовать innerHTML
  Для присвоения в DOM используйте innerHTML, а не:

  $().html()
  

• Конкатенация строк через массивы
  Складывать строки лучше через массив:

  var ar = [];   
  ar.push("aaaa");
  arr.join("");
  

• Использовать delegate для динамических обработчиков
  Для обработчиков всегда лучше использовать deletage: вешать на body и максимально указать селектор элементов. При этом создастся меньше обработчиков.
• Соединять js-файлы
  В итоге лучше все файлы JS соединять в один.
• Применять пост-загрузку
  Используйте пост-загрузку для тех скриптов, которые не требуются сразу же при загрузке страницы.
• Использовать setimeout для длительных операций
  Для долгих задач применяйте setimeout по порциям, таким образом это не будет блокировать браузер.
• Кешировать элементы
  Кешируйте элементы в локальных переменных, а не делай каждый раз выборку элементов (особенно в цикле).
• Применять Google CDN
  Используйте Google CDN – это уменьшает количество запросов с сайта и ускоряет загрузку.
• Самый быстрый цикл
  Для цикла лучше использовать while с конца – это самый быстрый цикл.
• Лучше this.id чем $(this).attr(“id”)
• Использовать цепочки jQuery
  Используйте цепочки jQuery вместо ручного поиска элементов через filter .
• Свести к минимуму изменения DOM
  По минимуму надо использовать append, insertAfter, и т.д. – это меняет DOM, а это довольно затратная операция.
• Хранить данные в .data()
  Хранить данные лучше в .data(), а не в .html().
• $.data(“#el”, key, value) быстрее чем $(“#el”).data(key, value)
• Избегать $.each для больших коллекций
  По возможности старайтесь избегать $.each для больших коллекций, for или while быстрее работают, чем $.each.
• Заменять циклы выборкой по селекторам
  Выбор по селекторам лучше, чем циклы. Избегайте циклов.
• $.method() работает быстрее, чем $.fn.method()
• Избегать дублирования кода
• Использовать теги html5
• Проверять объект перед вызовом
  Проверяйте объект перед вызовом его функций:

  if(a) 
  a.show(); 
  

• Держать в своем арсенале:
  map(), slice(), stop(), queue(), dequeue(), prevAll(), pushStack() and inArray().
• Использовать Bundles
  Применяйте bundles для динамического объединения стилей и скриптов.
• Уменьшить до минимума обратные отправки на сервер

Ссылки:
http://www.slideshare.net/AddyOsmani/jquery-proven-performance-tips-tricks
http://jonraasch.com/blog/10-advanced-jquery-performance-tuning-tips-from-paul-irish
http://jsperf.com/for-vs-while21221
http://jonraasch.com/blog/10-advanced-jquery-performance-tuning-tips-from-paul-irish