jQuery, что это такое и стоит ли его использовать?
jQuery — это небольшая библиотека JavaScript, которая пытается упростить работу с HTML. Он предоставляет больше функций для управления элементами на веб-страницах, что делает его полезным для создания динамического контента. Это правильный выбор для вашего сайта?
Что такое jQuery и для чего он нужен?
jQuery повсюду; на сегодняшний день это самая популярная библиотека JS, она интегрирована в основные системы, такие как WordPress, и вопросы JS на StackOverflow, кажется, всегда имеют ответы в jQuery.
Библиотека предлагает сокращение для многих функций JS, используемых для управления HTML DOM, которые часто могут быть длинными и раздражающими для ввода. jQuery предлагает гораздо более короткий и понятный синтаксис, и когда вы набираете document.getElementByID() сто раз, сокращение его до одного символа может значительно сэкономить время разработки.
Главная привлекательность jQuery — его функция выбора, используемая для поиска элементов в вашем HTML и получения ссылки на них. Например, если вы хотите найти элемент по идентификатору, вы можете сделать:
$('#ID')Что намного проще напечатать, чем:
document.getElementByID('ID')
Конечно, это не единственный способ выбора элементов; jQuery может использовать практически любой селектор CSS, и все это упаковано в функцию $. Объект $ также содержит все остальные методы jQuery, такие как $.ajax().
Современный JavaScript фактически имеет ту же функциональность выбора с функцией document.querySelectorAll() , поэтому, если вы используете jQuery только для ввода «document.querySelectorAll()», немного меньше, вы можете отказаться от jQuery, присвоив функциям псевдонимы $ или что-то еще:
window.$ = document.querySelectorAll
Но это еще не все, для чего хорош jQuery; он намного лучше работает с элементами DOM, чем ванильный JS, с функциями обхода для анализа списка элементов и фильтрами для результатов поиска. При выборе из HTML с помощью vanilla JS вам предоставляется список буквальных элементов DOM, но jQuery вернет объекты jQuery с дополнительными методами и свойствами, которые могут быть вам полезны.
jQuery имеет несколько других функций, таких как анимация и поддержка AJAX, но чистая анимация CSS часто намного быстрее, а библиотеки, такие как axios, обрабатывают запросы AJAX намного лучше, чем jQuery, поэтому вам действительно следует использовать jQuery только для работы с DOM. jQuery теперь предлагает «тонкую» версию без этих функций, которая экономит около 6 КБ при использовании сжатого и уменьшенного файла.
Замедлит ли jQuery мой сайт?
Добавление большого количества библиотек Javascript, фреймворков и наворотов на ваш веб-сайт — это самый простой способ замедлить загрузку страниц, особенно для мобильных пользователей с плохим подключением. Однако jQuery является небольшим исключением из этого правила; он очень маленький и используется повсеместно, поэтому, если вы ссылаетесь на него из популярного CDN, такого как Google, есть большая вероятность, что у любого обычного пользователя он будет предварительно кэширован, и ему не нужно будет ничего загружать с ваших серверов. Однако это не делает его бесплатным для включения, так как его все равно нужно загрузить из памяти пользователя и выполнить, что потребует времени.
Если он не кэширован, вы можете использовать уменьшенную и сжатую версию, которая весит всего 28,78 КБ, что, вероятно, меньше размера вашего HTML. Это не лучше, чем ничего, и может добавить еще одну секунду к загрузке вашей страницы при медленных соединениях 3G (без кеша).
Поскольку jQuery блокирует рендеринг, вам необходимо загрузить jQuery перед отображением страницы, что не очень хорошо для мобильных пользователей. Если вы пытаетесь сделать свой в основном статический сайт как можно более быстрым на всех устройствах, вам, вероятно, следует выбрать ванильный JavaScript вместо jQuery только по этой причине. Но если ваш сайт очень динамичный, jQuery или другие библиотеки, вероятно, стоят того, чтобы ускорить время разработки. Для внутренних сайтов компании, панелей администратора или всего, что не предназначено для конечных пользователей, вам не следует беспокоиться об этом.
Помните о коде Janky
Поскольку jQuery оборачивает нативные функции Javascript, он всегда будет менее производительным, чем использование vanilla JS, с компромиссом в том, что он ускоряет время разработки. jQuery по-прежнему очень быстр, но вам следует следить за неоптимизированным кодом. Наличие слишком большого количества запаздывающих вызовов функций может привести к тому, что частота кадров вашего приложения станет ниже частоты обновления, что для конечного пользователя будет ощущаться как дерганое микрозаикание или просто прямое отставание.
Используйте циклы for, а не циклы jQuery each, когда вы перебираете большое количество элементов. Они оба быстрые, но каждый работает намного медленнее, несмотря на то, что его намного удобнее читать. Большая часть добавленного времени возникает из-за задержки в конце цикла перед запуском следующего, поэтому циклы с небольшим объемом кода и большой длиной будут иметь большее влияние на производительность, чем циклы с большим количеством кода и несколькими элементами.
Селекторы jQuery работают медленно. На самом деле, любые действия с DOM медленны, поэтому вам нужно свести к минимуму вызовы, связанные с DOM, в ваших скриптах. Если вы ссылаетесь на элемент несколько раз, кэшируйте его в переменной:
var $item = $('#item')
Это не позволяет jQuery выполнять несколько поисков каждый раз, когда вы используете синтаксис $() для поиска элемента. $ перед переменной является соглашением для именования переменных объекта jQuery и не требуется.
Вы можете ускорить выбор jQuery, используя идентификаторы вместо классов, где это возможно. Выбор по идентификатору намного быстрее, чем выбор по классу, поскольку jQuery просто использует собственный метод .getElementByID() , а не использует собственный механизм выбора. Если вам нужно выбрать по классу, вы должны хотя бы попытаться указать контекст, чтобы сообщить jQuery, где искать. Например, используя:
$('.class', '#container')Будет намного быстрее, чем просто искать .class, поскольку jQuery будет игнорировать все в DOM, кроме элемента #container .
Должен ли я использовать jQuery?
jQuery — это библиотека, а не фреймворк. Библиотека предоставляет несколько полезных инструментов для использования или решает проблему, с которой борется ванильный JS. Фреймворк, такой как React или Vue, обеспечивает более жесткую структуру и контролирует большую часть работы вашего приложения.
jQuery имеет простой синтаксис и может значительно упростить вашу разработку. Если вы просто добавляете несколько простых вещей на свой веб-сайт, вам это, вероятно, не нужно, но если вы собираетесь создавать много динамического контента, jQuery действительно может ускорить время разработки. Если вы новичок в разработке JS, изучение jQuery может помочь вам в начальной загрузке простых приложений.
Однако в контексте большого приложения преимущества становятся более размытыми. jQuery не создан для того, чтобы быть движком больших веб-приложений, но его часто используют вместо более сложного фреймворка для создания простых динамических страниц. Это хорошо работает для простых приложений, но его очень легко перерасти. Если у вас есть реальная потребность в jQuery, чтобы ваше веб-приложение работало, вы, вероятно, также гораздо больше нуждаетесь в структуре, модульности и расширяемости, предлагаемых полной структурой.
Но jQuery гораздо более эффективен, чем огромный фреймворк, такой как React, поэтому, если вы хотите оставаться ближе к металлу, jQuery может быть хорошим дополнением для очистки вашего кода. Если вы работаете с существующей кодовой базой, добавить jQuery несложно, по сравнению с полным фреймворком, который может потребовать много рефакторинга, изучения и обновления. Кроме того, jQuery намного проще, чем большинство веб-фреймворков, и не требует от вас переосмысления того, как вы программируете.
jQuery — это, в конечном счете, просто библиотека для манипулирования DOM, поэтому, если ваш вариант использования требует более сложных манипуляций с DOM, чем предоставляет ванильный JS, jQuery может быть для вас.