Наиболее экономичные средства улучшения производительности Javascript (путем замены jQuery)

Question

Хорошо, кроме покупки зверя машины для повышения производительности ...

У меня есть веб-приложение, управляемое Javascript / AJAX, которое было написано с использованием jQuery, чтобы ускорить начальное время разработки.Я обнаружил, что с точки зрения производительности я готов начать вытеснять по частям, чтобы повысить эффективность кода.

Один пример ...

http://jsperf.com/innerhtml-vs-jquery

Я перешел от использования $(selector).text() в активных областях к простому доступу к DOM с getElementById(id).innerHTML

Я немного растерялся из-закуда идти дальше с точки зрения получения максимальной отдачи от моих денег, в каких ярких областях, где использование jQuery приводит к снижению производительности (вне времени загрузки)?

Answer 1

Правила производительности jQuery

1. Использование тегов перед классами
2. Кэширование объектов jQuery
3. Использование силы сцепления
4. Использовать подзапросы
5. Ограничить прямую манипуляцию DOM
6. Использовать делегирование событий (он же Bubbling)
7. Устранить потери запроса
8. Отложить до $ (окно).load
9. Сжатие JS
10. Изучение библиотеки
11. Всегда происходить от # id

Это ключевые области, которые я всегда сохраняюпри использовании jQuery.

Answer 2

Попробуйте другие рамки.Посмотрите на это сравнение, где DOJO выигрывает: http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison Мне нравятся все приведенные выше указатели, и они нашли, что Хосе Вега хорошо работает.

Answer 3

Любой пользовательский селектор jquery, то есть что-то, что не является родным для браузера, будет на несколько порядков медленнее. при этом

$('.sharedclass').find('crappyselector');

ускорит долгий поиск.

Также вставка, если вы когда-либо делаете вставку в цикле (то есть в таблице), сначала строите строку, а затем вставляйте все сразу.

Это те два больших, с которыми я сталкиваюсь.

Кроме того, профиль профиль профиль. Нет смысла исправлять то, что не является проблемой.

Answer 4

Просто основываясь на ответах других людей, я думал, что добавлю свои два цента на часто цитируемый.Остерегайтесь различий браузера в производительности селектора!То, что вы думаете, всегда может быть самым быстрым, не всегда верно!

Самый безопасный селектор, конечно, $('#foo'), но учтите следующее:

$('.bar') быстрее, чем $('#foo .bar') и $('#foo').find('.bar') в браузерах, которые изначально поддерживают getElementsByClassName().На самом деле, намного быстрее (более чем в два раза быстрее в FF и практически во всех браузерах, кроме IE).

Для доказательства см. jsPerf .

.выполнить некоторую оптимизацию селектора для конкретного браузера.

Answer 5

$.each петли, где петля особенно велика. Если он небольшой, разница незначительна, но производительность традиционного цикла JavaScript for гораздо выше, особенно при работе с большими объемами данных.

Кроме того, это не совсем то, что вы просили - но пересмотрите все ваши селекторы при использовании событий , особенно для IE, который не поддерживает "getElementsByClassName" (многие другие браузеры поддерживают) и префикс любые имена классов, используемые в событиях с идентификатором, где это возможно. Я обнаружил, что это улучшило производительность IE, особенно в сочетании с удалением безконтекстных псевдоселекторов, таких как $(":input")

1010 *, например *

$(".etc").live("click", function() { } );

становится

$("#id").delegate(".etc", "click", function() { });