Хорошие способы улучшить производительность селектора jQuery?

Посмотрите на этот пример Plnkr

Переменная this сильно отличается timesCalled с каждым нажатием кнопки увеличивается только на 1. Ответ на мой личный вопрос:

.click( () => { } )

и

.click(function() { })

создают одинаковое количество функции при использовании в цикле, как вы можете видеть из подсчета Guid в Plnkr.

74
задан Gordon Gustafson 13 February 2010 в 00:28
поделиться

11 ответов

Нет сомнения, что фильтрация по имени тега сначала намного быстрее , чем фильтрация по имени класса.

Это будет иметь место, пока все браузеры не реализуют getElementsByClassName исходно, как имеет место с getElementsByTagName.

36
ответ дан kamens 24 November 2019 в 12:04
поделиться

В некоторых случаях можно ускорить запрос путем ограничения его контекста. Если у Вас есть ссылка на элемент, можно передать ее как второй аргумент для ограничения объема запроса:

$(".myclass", a_DOM_element);

должно быть быстрее, чем

$(".myclass");

, если у Вас уже есть a_DOM_element, и это значительно меньше, чем целый документ.

14
ответ дан Matthew Crumley 24 November 2019 в 12:04
поделиться

Вот то, как к icrease производительности Ваших селекторов jQuery:

4
ответ дан jQuery Lover 24 November 2019 в 12:04
поделиться

Я добавлю примечание, которое в 99% веб-приложений, даже ajax тяжелые приложения, скорость соединения и ответ веб-сервера собирается определить эффективность Вашего приложения, а не JavaScript. Я не говорю, что Вы должны записать намеренно медленный код или что обычно быть знающим, какие вещи, вероятно, будут быстрее, чем другие, не хорошо.

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

3
ответ дан Joel Coehoorn 24 November 2019 в 12:04
поделиться

Другое место для поиска информации о производительности является анализом Производительности Hugo Vidal Teixeira страницы селекторов.

http://www.componenthouse.com/article-19

Это дает хороший шанс вниз скоростей для селектора идентификатором, селектора классом и селектора, снабжающего префиксом имя тега.

самые быстрые селекторы идентификатором был: $ (" #id")

самый быстрый селектор классом был: $ ('tag.class')

Настолько снабжающий префиксом тегом только помог при выборе классом!

3
ответ дан Evan Moran 24 November 2019 в 12:04
поделиться

Я был в некоторых списках рассылки jQuery и от того, что я считал там, они, скорее всего, фильтруют именем тега тогда имя класса (или наоборот если это было быстрее). Они одержимы скоростью и использовали бы что-либо для получения капли производительности.

я действительно не волновался бы об этом слишком много так или иначе, если Вы не выполняете тот селектор тысячи времен/секунда.

, Если Вы действительно заинтересованы, попытайтесь делать некоторое сравнительное тестирование и посмотрите, который быстрее.

0
ответ дан Ryan Doherty 24 November 2019 в 12:04
поделиться

Рассмотрите использование библиотеки Sequentially Oliver Steele для вызова методов со временем вместо внезапно.

http://osteele.com/sources/javascript/sequentially/

"в конечном счете" метод помогает Вам назвать метод после определенного периода времени от его начального вызова. "Последовательно" метод позволяет Вам очередь несколько задач в течение времени.

Очень полезный!

0
ответ дан Evan Moran 24 November 2019 в 12:04
поделиться

Чтобы полностью понять, что быстрее, вы должны понимать, как работает синтаксический анализатор CSS.

Селектор, который вы передаете, разделяется на узнаваемые части с помощью RegExp, а затем обрабатываются по частям.

Некоторые селекторы, такие как ID и TagName, используют browser ' собственная реализация, которая работает быстрее. В то время как другие, такие как класс и атрибуты, программируются отдельно и поэтому работают намного медленнее, требуя перебора выбранных элементов и проверки каждого имени класса.

Итак, да, чтобы ответить на ваш вопрос:

$ ('tag.class') быстрее, чем просто $ ('. class'). Зачем? В первом случае jQuery использует встроенную реализацию браузера для фильтрации выбора до тех элементов, которые вам нужны. Только тогда он запускает более медленную реализацию .class, фильтрующую до того, что вы просили.

Во втором случае jQuery использует свой метод для фильтрации каждого элемента путем захвата класса.

Это распространяется дальше, чем jQuery, как и весь javascript. библиотеки основаны на этом. Единственный другой вариант - использовать xPath, но в настоящее время он не очень хорошо поддерживается всеми браузерами.

5
ответ дан 24 November 2019 в 12:04
поделиться

Если я не ошибаюсь, jQuery также является двигателем снизу вверх. Это означает $ («# Foo bar div») - намного медленнее, чем $ («Bar Div #foo») . Например, $ («# Foo a») пройдет все элементы на странице и посмотреть, есть ли у них предком #foo , что делает этот селектор неэффективным.

RESIG, возможно, уже оптимизировалась для этого сценария (это не удивило бы меня, если он сделает - я верю, что он сделал в своем шинном двигателе, но я не на 100% уверен.)

0
ответ дан 24 November 2019 в 12:04
поделиться

Вот суть вашей путаницы:

Из-за представления с плавающей точки точность, это может быть что-то как 122.99999999999999999999 или 123.000000000000000000001.

Это ложь. Это всегда будет ровно 123 на IEEE-754 совместимой системы, что почти все системы в это современное время. Арифметика с плавающей запятой не имеет «случайной ошибки» или «шума». Он имеет точное, детерминированное округление, и многие простые вычисления (как этот) вообще не несут никакого округления.

123 точно представим в плавающей точке, так же как и 123 * 123 (так же как и все скромные целые числа). Поэтому при преобразовании 123 * 123 в тип с плавающей запятой ошибка округления не возникает. Результат точно 15129 .

Квадратный корень - это правильно округленная операция в соответствии со стандартом IEEE-754. Это означает, что при наличии точного ответа для его получения требуется функция квадратного корня. Так как вы берете квадратный корень из точно 15129 , который является точно 123 , это точно результат вы получаете из функции квадратный корень. Округления или аппроксимации не происходит.

Насколько велико целое число?

Двойная точность может точно представлять все целые числа до 2 ^ 53. Если значение i * i меньше 2 ^ 53, округление в вычислениях не выполняется, и результат будет точным по этой причине. Это означает, что для всех i меньше, чем 94906265 , мы знаем, что вычисление будет точным.

Но вы пытались i больше, чем это! Что происходит?

Для самых больших i , которые вы пытались, i * i просто едва больше, чем 2 ^ 53 ( 1,1102... * 2 ^ 53 , на самом деле). Поскольку преобразования из целого числа в двойное (или умножение в двойном) также являются правильно округленными операциями, i * i будет представимым значением, ближайшим к точному квадрату i . В этом случае, поскольку i * i имеет ширину 54 бит, округление будет происходить в самом нижнем бите. Таким образом, мы знаем, что

i*i as a double = the exact value of i*i + rounding

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

Теперь мы смотрим на квадратный корень из i * i +/- 1 . Используя расширение ряда Тейлора, бесконечно точное (нескругленное) значение этого квадратного корня равно:

i * (1 +/- 1/(2i^2) + O(1/i^4))

Теперь это немного точно, чтобы увидеть, если вы не делали анализа ошибок с плавающей запятой ранее, но если вы используете тот факт, что i ^ 2 > 2 ^ 53 , вы можете увидеть, что:

1/(2i^2) + O(1/i^4)

член меньше 2 ^ -54, что означает, что (поскольку квадратный корень правильно округлен, и, следовательно, его ошибка округления должна быть меньше 2 ^ 54), округленный результат функции sqrt точно равен i .

Получается, что (с аналогичным анализом) для любого точно представляемого числа с плавающей запятой x, sqrt(x * x) в точности равно x (при условии, что промежуточное вычисление x * x не перетекает), так что единственный способ встретить округление для этого типа вычислений - это представление самого x , поэтому вы видите его начиная с 2 ^ 53 + 1 (наименьшее непредставимое целое число).

-121--3429850-

По источникам , scipy.io.wavfile.read (somfile) возвращает кортеж из двух предметов: первый - частота дискретизации в выборках в секунду, второй - массив numpy со всеми данными, считанными из файла. Выглядит довольно легко в использовании!

например:

from scipy.io import wavfile
fs, data = wavfile.read('./output/audio.wav')
-121--870558-

отличный наконечник из вопроса, который я задал: Используйте стандартные селекторы CSS , где это возможно. Это позволяет jQuery использовать API Селекторы . В соответствии с тестами , выполненными John Resig , это приводит к почти собственной производительности для селекторов. Следует избегать таких функций, как : имеет () и : содержит () .

Из моей исследовательской поддержки API Selectors был представлен с jQuery 1.2.7, Firefox 3.1, IE 8, Opera 10, Safari 3.1.

0
ответ дан 24 November 2019 в 12:04
поделиться

Я считаю, что выбор сначала по идентификатору всегда быстрее:

$("#myform th").css("color","red");

должен быть быстрее, чем

$("th").css("color","red");

Однако мне интересно, насколько помогает цепочка при запуске с идентификатором? Это

$("#myform").find("th").css("color","red")
.end().find("td").css("color","blue");

быстрее, чем это?

$("#myform th").css("color","red");
$("#myform td").css("color","blue");
0
ответ дан 24 November 2019 в 12:04
поделиться
Другие вопросы по тегам:

Похожие вопросы: