Which is more efficient, $("#content .abc") or $("#content").find(".abc")?

Question

Which is more efficient,

$(“#content .abc”) or $(“#content”).find(“.abc”)?

Answer 1

$("#content").find(".abc") The .find() method will call the browser's native methods (getElementById, getElementByName, getElementByTagName, etc.), so it is faster. Much faster than $("#content .abc")
About jQuery selector efficiency, you can refer to the performance analysis http://blog.csdn.net/cxl44490...

Answer 2

console.time('1')
$("#content .child")
console.timeEnd('1')
console.time('2')
$("#content").find('.child')
console.timeEnd('2')
1: 0.908935546875ms
2: 0.147705078125ms
简单测试第二种快点

Answer 3

The test result is that find is faster
The reason is that the selection order of various selector chains used internally by jQuery is from right to left, so this statement first selects .abc, and then filters out the parent element #content one by one, which results in It's much slower.
At the same time, the .find() method will call the browser's native methods (getElementById, getElementByName, getElementByTagName, etc.), so it is faster.
Comparing the two, naturally find is much faster.

The following is the test: https://jsperf.com/jqueryfind...

Answer 4

The second one is faster