7 ms·
What is a good resource for understanding the DOM/query selectors and their performance (JS and CSS selectors)? All that I know about it is just through word of
by bejar37 14y ago
What is a good resource for understanding the DOM/query selectors and their performance (JS and CSS selectors)? All that I know about it is just through word of mouth and it would be great to look at a resource that covers these things.
Also, is document.createElement('div') really much faster than $("<div></div>")? Just checked and a lot of well-respected JS libs use (including Backbone) use the jQuery version.
EDIT: typo
- emehrkay 14y agoIf backbone didn't use a normalization library like jQuery, they'd have to write their own and I don't think that is the aim of the project.
- masklinn 14y agoNote that backbone is also compatible zith Zepto though.
- emehrkay 14y agoAccording to Backbone, Zepto is jQuery as it has the same interface.
- lucaspiller 14y agoThe normalisation is purely to support older browsers though. Backbone doesn't really use that much of jQuery, have a search for 'Backbone.$' through the annotated source [1]. There are only 10 uses of it in the whole file, and not for anything too crazy. In modern browsers you could probably do away with jQuery and still avoid "if safari then...". [1] http://backbonejs.org/docs/backbone.html http://backbonejs.org/docs/backbone.html
- recuter 14y agoThere are good talks by the Chrome dev team from various GoogleIO's. CSS selectors used to have a lot of voodoo about them but no longer matter that much in terms of performance. Try the blog of one Paul Irish and spread out from there.
- bzbarsky 14y ago> but no longer matter that much in terms of performance That's not quite true. They matter enough that WebKit is implementing them incorrectly because they can't figure out how to make a correct implementation performant enough...
- wmil 14y agoI haven't seen any profiling of jQuery, but last I heard createElement('div') and appendChild was slower than innerHTML ="<div></div>".
- MatthewPhillips 14y agoThat used to be true, but nowadays it depends on the browser and the difference is a rounding error.
- dclowd9901 14y agoThen why wouldn't jquery just proxy it? It's not like the creators are shitty at JavaScript.
- dsego 14y agoThat's not true any more: http://jsperf.com/fragment-vs-appendchild-vs-innerhtml/8 http://jsperf.com/fragment-vs-appendchild-vs-innerhtml/8
- no_more_death 14y agoStep 1: Learn to use the CSS profiler in Chrome. Also, here are some articles I found in my links list: CSS Stress Tester Bookmarklet (Copy into a bookmarklet. Then it will tell you the rules that are causing the most lag.) javascript:(function(d){var s=d.createElement('script');s.src='http://andy.edinborough.org/Demos/css-stress/stressTest.js?_=+Math.random();var http://andy.edinborough.org/Demos/css-stress/stressTest.js?_... es=d.getElementsByTagName('script')[0];es.parentNode.insertBefore(s,es);var doit=function(){if(window.stressTest){stressTest.bookmarklet();}else{setTimeout(doit,100);}};doit();})(document); Old but still relevant I think: http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/ http://www.stevesouders.com/blog/2009/06/18/simplifying-css-... Text makes CSS slow (don't render too much): https://news.ycombinator.com/item?id=2232212 https://news.ycombinator.com/item?id=2232212 In general, following good guidelines might help: https://github.com/csswizardry/CSS-Guidelines https://github.com/csswizardry/CSS-Guidelines