( "p:first" ) vs ("p").first() Jquery

Question

I have a small script.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $( "p" ).first().replaceWith("Hello world!");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Replace the first p element with new text</button>

This replaces the content inside the first

with "Hello world!".

I got same result with 2 jquery script.

1) ( "p:first" )
2) ("p").first()

What is the exact difference between these 2 scripts.

No difference, just different ways of getting to the same thing. I can also use `$('p').eq(0)`. That is why jQuery is so awesome: millions of ways to get the same result! However, some selectors may affect performance. — Dom, Dec 17 '13 at 07:42

MaGnetas · Answer 1 · 2013-12-17T09:00:53.560

2

According to performance test found here the second way ($("p").first();) is much faster.

edited Dec 17 '13 at 09:00

answered Dec 17 '13 at 07:42

MaGnetas

4,918
4
32
52

Even the jQuery docs mention the performance implications of `:first`. So why exactly do you think it performs better? – a better oliver Dec 17 '13 at 08:25
Because it's compared to selecting a full set of paragraphs and then picking the first one. At least that's how chained methods should work. – MaGnetas Dec 17 '13 at 08:27
Both solutions essentially get all paragraphs and then pick the first one. The difference is that the `p:first` only returns the first paragraph in the first place. But `:first` can be orders of magnitude slower. – a better oliver Dec 17 '13 at 08:51
You're right. According to test performed here http://jsperf.com/jquery-first-vs-first-selector the second one might be much faster. Editing my answer. – MaGnetas Dec 17 '13 at 08:58

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

Functionally, they are equivalent. However, in terms of performance, p:first will be better. This is because p:first begins to scan the DOM and stops at the first p element it finds. $('p').first() on the other hand, has to scan the entire DOM and generate an array of all p elements, and then pick the first element from that array.

This performance difference, however, will be negligible unless you have a very large DOM.

EDIT

Interestingly, :first isn't faster than .first(). Hmm, not sure I understand why, but it's been benchmarked.

edited May 23 '17 at 10:32

Community

1
1

answered Dec 17 '13 at 07:43

Ayush

41,754
51
164
239

Well said and I am glad you pointed out `will be negligible unless you have a very large DOM.`. The more elements in the DOM, the more elements to scan, which will ultimately impact performance. – Dom Dec 17 '13 at 07:45
:first is a pseudo class. It does not benefit from the speed benefits of typical CSS-standard selectors. – Jim Yarbro Dec 17 '13 at 07:46
@jyarbro - I guess that's true. I'd have imagined jQuery would be optimized to end the DOM traversal after it found the first `p`, but it seems not. – Ayush Dec 17 '13 at 07:47
I suppose `.first()` is faster because of delegating selector to `document.querySelectorAll`. – Artem Sobolev Dec 17 '13 at 07:52
`p:first` does **not** stop at the first `p`. It reads all `p` elements and returns the first one. Sizzle has no shortcut for `:first`. – a better oliver Dec 17 '13 at 08:19

score 1 · Answer 3 · answered Dec 17 '13 at 07:49

:first is a selector that should be used when performance is less important than readable code. It is not a CSS-standard selector, and therefore does not benefit from the speed of built-in browser performance enhancements. When using a significant number of OTHER selectors though, it will help make your code easier to process mentally since you're executing similar code in similar ways.

The best performance for :first is to execute your initial query ($("p")), then execute a .filter(":first"). This negates my readable code statement though, as you're now doing something syntactically different from other selectors.

.first() is syntactic sugar for .eq(0), which does the exact same thing, but is significantly less readable.

score 0 · Answer 4 · edited May 23 '17 at 12:19

0

There shouldn't be any real difference, but the best way to find out is to benchmark it for example here. The benchmarking has been done here (.first() wins).

edited May 23 '17 at 12:19

Community

1
1

answered Dec 17 '13 at 07:41

Raidri

17,258
9
62
65

score 0 · Answer 5 · answered Dec 17 '13 at 07:42

The first one requires the pseudo-selector to be parsed and then executed and. It would return only one paragraph on the initial invocation. The second one executes a selector on all paragraphs and then returns the first one in the second jQuery call with first().

My suggestion is to check the jQuery source in order to verify for yourself what the implementation difference is.

Zaheer Ahmed · Answer 6 · 2013-12-17T07:50:42.057

0

First on :filter is slower as it includes sizzler library. which needs to do extra work.

Here is a test to run and see performance

edited Dec 17 '13 at 07:50

answered Dec 17 '13 at 07:45

Zaheer Ahmed

28,160
11
74
110

( "p:first" ) vs ("p").first() Jquery

6 Answers6