DOM Monster: JavaScript performance bookmarklet
mir.aculo.us
mir.aculo.us
> Reduce the amount of <iframe> tags. There are 1 iframe elements on the page.
1 iframe isn't bad. This shouldn't even be worthy of a tip.
> Reduce the amount of tags that use the style attribute, replacing it with external CSS definitions. There are 1 nodes that use the style attribute.
1 style isn't bad either. They use it on their own page.
> Found 116 <script> tags on page. Try to reduce the amount of script tags.
This shouldn't be just a normal warn. 100+ script tags should be a major warning.
> Nesting depth is very high. Some of the nodes are nested more than 15 levels deep (these are marked with a dashed red border). > Nesting depth is a little high. Reducing it might increase performance.
Both of these are shown on HN. Only one should be shown.
> Some nodes use transparency. To improve rendering performance, try not to use the CSS opacity property (found 2 nodes, marked with a dashed blue border).
It would be awesome if it could highlight these nodes somehow. Actually, would be awesome if it could highlight all visibile nodes that match any warning/tip. They already do that with nodes at 15+ nesting depth.
Is this supposed to be for performance or are they just suggesting "good practices"? If it's performance, I'd like to see some evidence that style attributes slow down the DOM. I don't know of any, and it would be significant.
How do you think JSONP works? Why is this bad?
I guess we shouldn't make fancy web pages, full desktop apps in the browser as browsers can't handle it. ^_
But for a good example of how to do heavily interactive, shiny, Javascripty apps, look at our work on http://twistori.com http://letsfreckle.com http://pepsicozeitgeist.com etc :) not to mention Scriptaculous, Scripty2, Zepto, etc. And test their performance versus others.
Yep, making heavily interactive, heavy graphical web apps is a trade-off. That's why you have to know every single little thing that can slow things down, and then you have to make the decision which you can get away with and which you can't.
Thus our suggestions are quite strict!
For more information, you might enjoy our book: http://jsrocks.com :)
With the exception of maybe letsfreckle, those apps you mentioned are shiny and have some dynamicism, but they are not heavy client side apps. I can't see how letsfreckle performs on your tool given it has a paywall and there's no demo.
Having said that, I do want to read your book. I'll check it out.
Measurements exist for a reason. You have to use your own judgment to interpret them.
Sadly also php.net can improve. I checked a few function reference pages and they had >6000 elements each. Ouch.
ie. Nesting depth is a little high
Is meaningless to me - where on the page? How often? How significant of a performance hit?
Oh wait, is the idea to sell books to explain this?
https://docs.google.com/gview?url=http://javascriptrocks.com...
Okay I guess I understand.
Were there any updates on the rule set in use?