Register now or log in to join your professional community.
<p>for example if i want to target last <li> element in a certain <ul> to manipulate via JQuery , which is more preferred </p> <p>$("ul").find("li").last()</p> <p>or</p> <p>$("ul li:last")</p> <p> </p>
$("ul li:last") make1 jquery call and one css, while $("ul").find("li").last() makes three jquery calls and two css. $("ul li:last") for sure is more friendly.
i would say ("ul").find("li").last(); and $("ul li:last") performs almost the same without hindering performance. Let me explain why.
Because :last is a jQuery extension and not part of the CSS specification, queries using :last cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.
so i would say both would perform almost same but ("ul").find("li").last(); might perform a bit faster.
To improve both querys its best practice to use specific identifier as that speeds up the ative DOM querySelectorAll() method.
example is
lets say your "ul" has id of "foo"
$("#foo li:last") is faster than $("ul li:last")
("#foo").find("li").last(); is faster than ("ul").find("li").last();
hope that helped clear things out for you.
in addition you can refer to http://learn.jquery.com/performance/optimize-selectors/ for further reading on jQuery optimization.
you can use googles development tool to see which query is taking long and find alternatives using this https://developers.google.com/speed/pagespeed/?csw=1
hope that helped you
good luck!
Basm Allah Alrahman Alrahim
a bout which function will execute faster , that mean you must search at DOM library of javascript to find the functions order , after that you will see the order of the function at jquery library too and that not a good idea , any way both of them take no time to be executed , I think you must not worry a bout this problem , use any of them and don't worry
you can make any function execute faster if you make your functions Library by your self from scratch and put the functions with any order you want
use jsperf to compare performance of js code
I created this for you please run test and see the results
http://jsperf.com/selector-vs-function
("ul").find("li").last(); performs better.
Unless you're building a fully-interactive, heavy-duty3d game on the browser, I wouldn't bother much with performance issues on the front-end using JQuery.
JQuery maintainers have done an excellent job optimizing performance.
