jQuery vs document.querySelectorAll

Question

I heard several times that jQuery\'s strongest asset is the way it queries and manipulates elements in the DOM: you can use CSS queries to create complex queries that would

Answer 1

If you are optimizing your page for IE8 or newer, you should really consider whether you need jquery or not. Modern browsers have many assets natively which jquery provides.

If you care for performance, you can have incredible performance benefits (2-10 faster) using native javascript: http://jsperf.com/jquery-vs-native-selector-and-element-style/2

I transformed a div-tagcloud from jquery to native javascript (IE8+ compatible), the results are impressive. 4 times faster with just a little overhead.

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

You Might Not Need Jquery provides a really nice overview, which native methods replace for which browser version.

http://youmightnotneedjquery.com/

---

Appendix: Further speed comparisons how native methods compete to jquery

• Array: $.inArray vs Array.indexOf: Jquery 24% slower

• DOM: $.empty vs Node.innerHtml: Jquery 97% slower

• DOM: $.on vs Node.addEventListener: Jquery 90% slower

• DOM: $.find vs Node.queryselectorall: Jquery 90% slower

• Array: $.grep vs Array.filter: Native 70% slower

• DOM: $.show/hide vs display none: Jquery 85% slower

• AJAX: $.ajax vs XMLHttpRequest: Jquery 89% slower

• Height: $.outerHeight vs offsetHeight: Jquery 87% slower

• Attr: $.attr vs setAttribute: Jquery 86% slower