Is it a good idea to create new XHTML markup for speed and readability reasons?

Question

Hi folks,

I develop for a web app startup and I come across the following code quite often.

<div class="items container">
    <div class="item">
        <div class="property propertyA">Some stuff</div>
    </div>
</div>

Our typical jQuery selector looks pretty much similar to:

$("div.items.container > div.item > div.property.propertyA").map(doStuff());

The thing is that we call class selector VERY often up to the point where most of the time spent executing JS is spent running jQuery's internal curCSS method.

While we might only have one items container it might contains several hundreds of items each with dozens of properties. Actually there is always around 5K+ html tags present on the page at any given time.

We are bundling more and more logic in the client side to accomodate new features. I feel this won't be sustainable for long as some browsers are already showing the deadly "your page is unresponsive" message under some conditions. We are thinking about refactoring the entire client side pretty soon.

I was thinking about implementing some new XHTML tags in a new xml namespace so it could look like:

<items>
    <item>
        <propertyA>Some Stuff</div>
    </item>
</items>

I would then be able to select the following way:

$("items > item > propertyA")

or directly

$("propertyA")

Correct me if I'm wrong but by getting rid of my slow CSS selectors in favor of some "getElementsByTagName" could save me a lot of cycle here while making my css cuter and my overall code neater. Would such a solution work?

BTW: here we run with the assumption that IE does not exists and firefox 3+ || Chrome 3+ is our target audience.

Answer 1

As long as you make the custom xlmns it is a great idea, anything that trims down your development time is a great idea. Also, is this for a closed enviroment? or are you just turning off IE Support?

Answer 2

I don't know if what you're suggesting is really necessary or will improve speed that much. However, if you know that the "property" or "propertyA" classes will always be inside the "item" class, then it would be more efficient to just use .property or .propertyA as the selector.

If your .items.container element is unique to the page, consider using an ID on it instead. Then jQuery will first select the ID and only look inside that for the items. And don't add the tag names to the selection query unless you have other elements you want to exclude (like <p class="propertyA">...</p>).

If you are repeatedly calling the selector, you should cache the result to prevent repeating the search (although jQuery 1.4 does this for you I believe). Something like:

var $properties = $(".items.container > .item > .property.propertyA");
$properties.map(doStuff());
//later on...
$properties.map(doStuff());