Эффективность фреймворка jQuery / Javascript

Question

Мой последний проект использует фреймворк javascript (jQuery) вместе с некоторыми плагинами (validation, jquery-ui, datepicker, facebox, ...) для создания современного веб-приложения.

ЯТеперь поиск страниц загружается медленнее, чем я привык.После некоторого js-профилирования (спасибо VS2010!) Кажется, что обработка внутри фреймворка занимает много времени.

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

Я заметил, что такие вещи, как команда 'each' в jQuery, отнимают довольно много времени.

У других были некоторые дополнительныезадержка при использовании JS-фреймворков?Как минимизировать их влияние на производительность страницы?Есть ли лучшие практики по реализации с использованием JS-фреймворков?

Спасибо

Answer 1

Моя личная цель - использовать методы и инструменты фреймворка там, где они имеют смысл и облегчают жизнь, например, селекторы и решение кросс-браузерных нюансов, и использовать старый добрый ванильный JavaScript, где нет необходимости использовать методы фреймворкаНапример, в простых циклах.

Я бы проверил и перепроверил код, который у вас есть, который использует платформу, чтобы убедиться, что она будет работать так же хорошо, как и может;слишком легко использовать фреймворк с плохой производительностью, и иногда его не обнаруживают, пока не профилируют его:)

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

РЕДАКТИРОВАТЬ:

Некоторые общие замечания относительно использования jQuery:

1.кэшируйте ваши объекты jQuery в локальные переменные, если вы собираетесь использовать их более одного раза.Запрос DOM является относительно дорогой операцией, и поэтому должен выполняться так мало, как необходимо.Если у вас есть связанные селекторы, посмотрите на выполнение широкого выбора, а затем используйте методы, такие как find(), filter() next(), prev() и т. Д., Чтобы отфильтровать коллекцию, чтобы получить соответствующие элементы, которые вы использовали бы другиеФункция выбора для получения.

2.Внутри функций не оборачивайте объекты в объекты jQuery без необходимости.Если существует кросс-браузерный способ доступа к значению свойства объекта, который является надежным, используйте его.Например, свойство value текстового ввода HTMLElement

$('input:text').each(function() {
    // use
    this.value

    // don't worry about this
    $(this).val();
 }); 

3. Старайтесь не добавлять большие файлы сценариев, где вы используете только небольшую часть функциональности.Может потребоваться много времени для анализа и выполнения кода при загрузке страницы, который вы никогда не собираетесь использовать!Если возможно, извлеките только тот код, который необходим.Я ценю, что это может быть сложно и не всегда возможно, особенно когда речь идет о версионировании, но, тем не менее, на это стоит обратить внимание.