出于速度和可读性原因创建新的 XHTML 标记是个好主意吗？
我为一家网络应用程序初创公司进行开发，经常遇到以下代码。
<div class="items container">
<div class="item">
<div class="property propertyA">Some stuff</div>
</div>
</div>
我们典型的 jQuery 选择器看起来非常类似于：
$("div.items.container > div.item > div.property.propertyA").map(doStuff());
问题是我们非常频繁地调用类选择器，以至于执行 JS 的大部分时间都花在运行 jQuery 的内部 curCSS 方法上。
虽然我们可能只有一个项目容器，但它可能包含数百个项目，每个项目都有数十个属性。实际上，在任何给定时间，页面上始终存在大约 5K+ html 标签。
我们在客户端捆绑越来越多的逻辑以适应新功能。我觉得这种情况不会持续太久，因为某些浏览器在某些情况下已经显示出致命的“您的页面没有响应”消息。我们正在考虑很快重构整个客户端。
我正在考虑在新的 xml 命名空间中实现一些新的 XHTML 标记，这样它可能看起来像：
<items>
<item>
<propertyA>Some Stuff</div>
</item>
</items>
然后我将能够选择以下方式：
$("items > item > propertyA")
或者如果我错了直接
$("propertyA")
纠正我，但通过摆脱我的缓慢 CSS 选择器支持一些“getElementsByTagName”可以节省我很多周期，同时使我的 CSS 更可爱，我的整体代码更整洁。这样的解决方案有效吗？
BTW：这里我们假设 IE 不存在并且 firefox 3+ || 运行Chrome 3+ 是我们的目标受众。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不知道你的建议是否真的有必要或者会大大提高速度。但是，如果您知道“property”或“propertyA”类始终位于“item”类内，那么仅使用
.property或.propertyA< 会更有效/code> 作为选择器。如果您的
.items.container元素对于页面来说是唯一的，请考虑在其上使用 ID。然后 jQuery 将首先选择 ID，然后只在其中查找项目。并且不要将标记名称添加到选择查询中，除非您想要排除其他元素（例如...
）。如果您重复调用选择器，则应该缓存结果以防止重复搜索（尽管我相信 jQuery 1.4 为您做到了这一点）。像这样的东西：
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
.propertyor.propertyAas the selector.If your
.items.containerelement 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:
只要您制作自定义 xlmns，这就是一个好主意，任何可以缩短开发时间的主意都是好主意。另外，这是一个封闭的环境吗？或者您只是关闭 IE 支持？
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?