Почему jQuery $ ("td: eq (0)") медленнее, чем $ ("td"). Eq (0)

Question

Я использую jQuery 1.7.1 и пытаюсь выяснить, почему следующий код занимает 4600 мс, если я изменяю :eq(0) на :first, это тот же результат.

$("tr:eq(0) td"); // x10000 takes 4600ms
$("tr").eq(0).find("td"); // x10000 takes 470ms

Второй код почти в 10 раз быстрее! И это только написано по-другому.

Также, если я использую селектор, как, просто выбирая идентификатор или просматривая узел:

someparent.find("#test") // x10000 takes 500ms
$("#test") // x10000 takes 100ms
$("div#test") // x10000 takes 470ms

Я бы сказал, что если я пройду, div#test будет быстрее, чем #test, но в 5 раз медленнее. Почему?

Я сделал все запуски пару раз, и это очень медленно, если я делаю то же самое иначе.

Почему селектор медленнее, чем функции?

Answer 1

Ответ прямо изо рта лошади :

Дополнительные примечания:

Поскольку :eq() является расширением jQuery и не является частью спецификации CSS, запросы с использованием :eq() не может воспользоваться преимуществом повышения производительности, обеспечиваемым собственным DOM querySelectorAll() метод. Для повышения производительности в современных браузерах используйте $("your-pure-css-selector").eq(index) вместо.

Я должен добавить, что вышеупомянутый querySelectorAll API поддерживается во всех современных браузерах , поэтому его можно «без разбора» использовать в качестве в замен getElementById и т. д.

Answer 2

jQuery построен из библиотеки Sizzle . Sizzle использует возможности вызовов в браузере, где это возможно.

'tr' является допустимым селектором для querySelectorAll, который работает очень быстро. Как только список 'tr' элементов получен, .eq() просто выполняет поиск по индексу, что очень быстро.

'tr:eq(0)' не является допустимым селектором, поэтому он должен перебирать каждый элемент в DOM.

Это несоответствие в тестировании производительности отмечается в документах jQuery для :eq():

Поскольку :eq() является расширением jQuery и не является частью спецификации CSS, запросы, использующие :eq(), не могут воспользоваться преимуществом повышения производительности, обеспечиваемым собственным методом DOM querySelectorAll(). Для повышения производительности в современных браузерах используйте $("your-pure-css-selector").eq(index).

Answer 3

jQuery не нужно разбивать входную строку на функции и преобразовывать эту последовательность строковых функций в соответствующие вызовы методов.

Answer 4

Я не знаю точно, почему, но у меня есть похожая проблема на другом языке, и это зависит от самой функции:

$("tr:eq(0) td"); необходимо проанализировать для работы, а затем выполнить вызов функции.

$("tr").eq(0).find("td"); только вызов функции