На Хабре было несколько статей с объективными замерами «тормознутости» JQuery на селекторных запросах.
|
4,649 ms |
|
3,437 ms |
|
1,362 ms |
|
1,168 ms |
|
107 ms |
|
75 ms |
(запуск в цикле по 10000 раз)
В сети достаточно много хороших описаний аналогов JQuery функций на чистом Javascript-e — например, вот здесь.
Но самая мощь JQuery — в лаконичности и красоте ее выражений. Даже психологически тяжело переписывать существующий код, меняя элегантные $() на многострочные конструкции.
Попробуем, насколько возможно, оставить язык JQuery, [частично] заменив ее саму. Для этого нам нужно только или переопределить $() функцию, или заменить (что лучше) на свою — пусть это будет $jqr(). Она также будет возвращать объект, но уже «нативный» и не обремененный ненужными нам JQuery функциями.
Пример кода:
<html> <body> <p id="message"></p> </body> </html>JQuery код:
$("#message").html("Hello world!"); Меняется на:
$jqr("#message").html("Hello world!"); // JQuery Replacement function $jqr(sel) { return new JQR(sel); } class JQR { constructor(sel) { this.sel = sel; this.elements = document.querySelectorAll(sel); } html(str) { for (var i = 0; i < this.elements.length; i++) { this.elements[i].innerHTML = str; } } } В конструкторе класса желательно парсить sel, чтобы более эффективно применять querySelectorAll(), getElementsByClassName() и getElementById().
Таким образом мы можем реализовывать в классе JQR только нужные нам функции, не выходя за рамки стандартного Javascript-а и не сильно трогая существующий код.
Необязательно даже полностью избавляться от JQuery — частичная оптимизация уже даст результат.
ссылка на оригинал статьи https://habr.com/post/419471/
Добавить комментарий