Ускорьте JavaScript быстрее, заменив jQuery на JavaScript

Как и многие люди, я изучил JavaScript, изучив jQuery.

В последнее время я заменяю биты как:

$(this).attr('title') с this.title

$(this).attr('id') с this.id

$(this).val() с this.value

$(this).parent() с this.parentNode

$(this).attr('class') с this.className

Не только мой код чище, но технически быстрее.

Является ли этот тип сокращения приемлемым и поощряемым?
Существуют ли какие-либо другие общие практики, которые я должен выполнять в ~~raw~~ равном JavaScript вместо jQuery?
Существуют ли какие-либо потенциальные проблемы с кросс-браузерами с этим типом сокращения?

Ответ 1

В то время как использование собственных функций Javascript, как правило, быстрее, чем их jQuery-копии, оно предоставляет вам любые совместимые с браузером проблемы, которые могут возникнуть в результате их использования. this.value, и это вряд ли вызовет проблемы, но другие аналогичные атрибуты/функции могут не работать во всех браузерах. Использование структуры, такой как jQuery, означает, что вам не нужно иметь дело с такими вещами или беспокоиться о них.

Я бы использовал только обычный Javascript, если производительность - проблема, то есть у вас много плотных циклов и повторных операций.

Ответ 2

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

Если вы сомневаетесь в определенном свойстве, вы можете просмотреть источник jQuery, чтобы узнать, имеет ли он какую-либо специальную обработку для этого свойства и рассматривает его как упражнение для обучения.

Ответ 3

Хотя многие люди отвергают подобные утверждения, я также заметил, что избегание/минимизация использования jQuery может привести к значительно более быстрым сценариям. Избегайте повторного/ненужного $() в частности; вместо этого попытайтесь сделать что-то, например. a = $(a);

Вещи, которые я заметил как довольно дорогостоящие, в частности, $(e).css({a:b}).

Оптимизация Google Closure Compiler якобы может встроить и такие простые функции!

И на самом деле он поставляется с довольно большой библиотекой (библиотека закрытия), которая предлагает большую часть материалов совместимости с кросс-браузером без введения совершенно нового понятия.

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

https://developers.google.com/closure/compiler/