У нас есть так много вариантов использования сценариев разработки, которые работают с вашими веб-проектами. И все вы знаете, что три лучших друга занимаются браузерами пользователей от имени вашего проекта. И это HTML, CSS и JavaScript.

Для краткости можно сказать, что HTML — это структура веб-страницы. CSS будет работать над внешним видом этой структуры. И, наконец, JavaScript делает вещи функциональными

А jQuery — одна из самых любимых библиотек уже давно. Который предоставляет множество предопределенных функций для управления DOM. В Интернете доступно множество других библиотек и плагинов, использующих jQuery. А что нужно сделать для использования jQuery? Ничего особенного, добавьте библиотеку на страницу. Вы сможете получить доступ к функциям jQuery. Давайте посмотрим, почему люди используют jQuery:

  • Простота в освоении по сравнению с простым JavaScript
  • Богатая библиотека предопределенных функций, которая экономит много времени на разработку
  • Может манипулировать DOM, создавать анимацию, а также обрабатывать вызовы AJAX.
  • Совместимость с любым браузером
  • Меньше кондиции и тяжелой абстракции
  • Экономит много времени на разработку.

С другой стороны, Vanilla JS готова побить рекорды других библиотек и фреймворков. Фактически, он используется на большем количестве веб-сайтов, чем другие библиотеки и фреймворки. И давайте посмотрим, почему это так часто используется?

  • Подходит для интерфейсов динамических веб-сайтов.
  • Плагин не требуется, потому что это не библиотека. Это обычный JavaScript, который поддерживается всеми браузерами.
  • Быстрее для доступности DOM по сравнению с jQuery

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

Вот сравнение скорости при добавлении ‹li› во вкладку ‹ul› 10 000 раз.

Сначала мы проверим, выполнил ли jQuery эту операцию. Итак, вот код

Код довольно прост. У нас есть тег списка неупорядоченных заказов (‹ul›) с идентификатором «ul». Затем библиотека CDN с использованием тега script. Затем итерация с циклом for, от 1 до 10 000, чтобы добавить тег списка (‹li›) с номером итерации.

Это диаграмма производительности выполнения кода jQuery. Где вы можете видеть, что сценарий занял 3162 мс. Затем рендеринг этого в скрипт занял 1401 мс.

В этом отчете о производительности вы можете увидеть, что операция добавления заняла 3459,5 мс, чтобы напечатать 10 000 тегов li в тег ul.

С другой стороны, у Vanilla JS есть хорошие показатели по сравнению с jQuery. Давайте посмотрим код Vanilla JS.

Здесь мы видим, что длина кода увеличена по сравнению с jQuery. Вот почему ленивые разработчики предпочитают jQuery.

Затем мы сосредоточимся на диаграмме производительности выполнения кода Vanilla JS. И обратите внимание, что скрипты заняли 1399 мс, а рендеринг — 1312 мс. Которые действительно хороши по сравнению с jQuery.

И, наконец, действие appendChild потребовало всего 11,8 мс, чтобы добавить и отобразить 10 000 ли в ul.

Наконец, вот некоторая статистика для одного и того же процесса, выполненного по 10 раз каждый и зафиксировавшего производительность.

Выполнение jQuery в секунду
1) 5,47
2) 5,68
3) 5,64
4) 5,65
5) 5,74
> 6) 5,73
7) 5,73
8) 5,66
9) 5,71
10) 5,56
А среднее время выполнения: 5,657

Выполнение VenillaJS в секунду
1) 3,33
2) 3,53
3) 3,43
4) 3,43
5) 3,44
> 6) 3,39
7) 3,72
8) 3,57
9) 3,46
10) 3,54
Среднее время выполнения в секунду: 3,484

После этого результата можно сказать, что Vanilla JS быстрее, чем jQuery. Единственная причина, по которой Vanilla JS не является ни библиотекой, ни фреймворком. Это просто обычный JavaScript. Не нужно компилировать код разработчиков и оформлять в понятном для браузера виде. Потому что, как мы знаем, браузер слушает только JavaScript, одного из этих трех лучших друзей.