Общие методы для оптимизации 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