是否值得担心CSS渲染性能？或者我们是否应该完全不用担心CSS的效率而只关注编写优雅或可维护的CSS？

此问题旨在成为前端开发人员的有用资源,其中CSS的某些部分实际上可能会对设备性能产生重大影响,以及哪些设备/浏览器或引擎可能会受到影响.这不是关于如何编写优雅或可维护的CSS的问题,它纯粹是关于性能的(尽管希望这里写的内容可以提供关于最佳实践的更多一般文章).

现有证据

谷歌和Mozilla已经编写了关于编写高效CSS的指南,CSSLint的规则包括:

避免看起来像正则表达式的选择器.不要使用复杂的相等运算符来避免性能损失

但是他们都没有提供任何证据(我能找到)这些证据的影响.

一个高效的CSS css-tricks.com文章认为(概述效率的最佳做法的负载之后),我们应not .. sacrifice semantics or maintainability for efficient CSS这些天.

一个完美杀死博客文章建议,border-radius并box-shadow呈现数量级比简单的CSS规则慢几个数量级.这在Opera的引擎中非常重要,但在Webkit中却微不足道.此外,粉碎杂志CSS基准测试发现,CSS3显示规则的渲染时间不明显,并且比使用图像渲染等效效果要快得多.

知道你的移动测试各种移动浏览器,并发现他们都快速地(在12毫秒内)渲染CSS3,但看起来他们在PC上进行了测试,因此我们无法推断手持设备如何在CSS3中执行一般.

目前有 很多 的文章如何编写高效的CSS在互联网上.但是,我还没有找到任何全面的证据表明,严重认为CSS实际上会对网站的渲染时间或快速性产生重大影响.

背景

退一步,我将尝试科学http://brightgreenscotland.org/wp-content/uploads/2010/09/stand-back-Im-going-to-try-science.png

我为这个问题提供了赏金,试图利用SO的社区力量来创建一个有用的,经过深入研究的资源.

是否优先考虑组合者

a > b ~ c d

(注之间的空间c,并d为后代组合子)

或者只是从左到右阅读,就像

((a > b) ~ c) d

？

是div.container速度比.container？你知道在jquery中,如果你对你的选择器更具体,它会更快,因为它迭代通过更少..这是css的情况吗？

有没有办法衡量css的性能？性能方面,这样的事情是否重要甚至完全取决于文本权重？

如果有人知道答案,我会很高兴,我实际上找到了一个类似的问题而没有确定的答案. 如果更好地指定CSS可以更有效吗？

我在选择元素时希望$('#childDiv2 .txtClass')或$('#childDiv2 input.txtClass')表现得更好<input type="text" id="txtID" class="txtClass"/>.但根据这种表现,分析 $('.txtClass');是其中最好的选择.我正在使用JQuery 1.7.2有没有人对此有解释？

HTML

<div class="childDiv2">
    <input type="text" id="txtID" class="txtClass"/>
    <p class="child">Blah Blah Blah</p>
</div>?

JS

$('.txtClass');
$('#childDiv2 .txtClass')
$('#childDiv2 > .txtClass')
$('input.txtClass')
$('#childDiv2 input.txtClass')

我想给我的表行提供斑马条纹效果.在所有其他浏览器中,可以使用CSS第n个子元素完成.但我也想做IE 8.那怎么办呢？

我有能够反映不同的状态的元件,或者由用户(触发:hover,:focus等)或由服务器操作(data-status="finished",disabled等).

我可以定位具有已更改状态的元素,但我似乎找不到基于所讨论元素的状态来定位DOM中的其他元素的方法.

例:

<section>
    <div>Element 1</div>
    <div data-status="finished">Element 2</div>
    <div>Element 3</div>
</section>
<section>
    <div>Element 4</div>
    <div class="blink">Element 5</div>
    <div>Element 4</div>
    <div>Element 4</div>
    <div class="spin">Element 4</div>
    ...
</section>

或者只是使用服务器端的正确样式呈现元素.

是否有一个CSS选择器可以让我根据目标元素的状态指定应该选择哪些元素？

就像是:

div[data-status~=finished]:affect(.blink, .spin)

这将允许我也只针对 CSS 没有相同父级的元素？

我认为这会更快:

#dialog .videoContainer { width:100px; }

比:

.videoContainer { width:100px; }

当然,无论.videoContainer在第一个例子中,只会在#dialog标签下设置样式.

例如,当我们使用时$('div span'),jQuery如何对我们进行搜索？

它首先搜索span元素还是div？

似乎jQuery官方网站没有解释这些事情; 它只是告诉我们通过API可以获得的功能.

我想知道每种类型的jQuery选择器是如何实现的,所以我可以选择要使用的最佳选择器.

你知道我在哪里可以得到这样的信息吗？

我在JSP中多次使用这个jQuery选择器:

 $("#customers tbody tr td input[type='checkbox'][name='selectedCustomers']")

我在一些博客上找到的解决方案是我应该先做:

var customer=$('#customers')

然后使用上述客户对象进行进一步调用.

 customer.find("tbody tr td input[type='checkbox'][name='selectedCustomers']")

我的问题是,这个解决方案会有所不同吗？为什么？

我的理解

当我做

$("#customers tbody tr td input[type='checkbox'][name='selectedCustomers']")

jQuery内部将首先获取与div id="customers" (通过document.getElementById("customers"))关联的对象,然后将遍历指定的 checkbox.如果我按照建议的解决方案,那么document.getElementById("customers")只会被解雇一次,其余的将是相同的.因此,我将自己从不必要的倍数中拯救出来,document.getElementById但其余的将是相同的.我的理解是否正确？如果是,仅仅是为了我的知识,是document.getElementById一个更昂贵的操作？

编辑:-

我不是只使用上述选择器多次,而是在div id ="customer"下使用其他可能的选择器.因此,如果我首先缓存客户对象并且如果我不这样做,那么问题是性能方面的差异是什么？

是否有可以应用于任意显示层次结构的CSS的开源或通用实现？我正在尝试为AS3中的Flash显示层次构建一个.

我很好奇用于将CSS样式应用于显示层次结构的过程.在我看来,每次添加,删除或重新定位显示对象时,以及当焦点发生变化等事件发生时,部分或全部选择器都必须重新应用于整个显示列表,因为存在选择器像"first-child"和伪选择器如":focus".

样式的初始应用是否涉及一次扫描整个显示列表一个元素,应用样式,还是预先对所有对象进行排序并与特定规则类别相关联？或类似的东西.

我真的在寻找一个真正实现的良好的一般资源.

更新:我可能寻找在水平的东西这个,但我不知道这是不是最先进的国家:"等级限制提供的理解CSS 2.0规范的多简单,统一的方式这一观点也.表明约束求解器提供了一种自然的实现技术.每个样式属性和文档中每个元素的位置都可以通过变量建模.这些变量的约束来自浏览器功能,由元素类型引起的默认布局行为,来自文档树结构,以及样式规则的应用.文档的最终外观是通过找到这些约束的解决方案来确定的." 这引出了如何以及何时解决约束的问题.