Hacker News Reader

Comment by bejar37 | Hacker News Reader

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

View on HN

There 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.

> 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...

Step 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?_... 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-... Text makes CSS slow (don't render too much): https://news.ycombinator.com/item?id=2232212 In general, following good guidelines might help: https://github.com/csswizardry/CSS-Guidelines

I haven't seen any profiling of jQuery, but last I heard createElement('div') and appendChild was slower than innerHTML ="<div></div>".

That's not true any more: http://jsperf.com/fragment-vs-appendchild-vs-innerhtml/8

That used to be true, but nowadays it depends on the browser and the difference is a rounding error.

Then why wouldn't jquery just proxy it? It's not like the creators are shitty at JavaScript.

If 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.

The 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

Note that backbone is also compatible zith Zepto though.

According to Backbone, Zepto is jQuery as it has the same interface.

Reply on news.ycombinator.com