[前端]优化CSS写法对浏览器渲染速度有多大的提高？

[scarlex]

今天搜了一下提高浏览器渲染速度的资料，看了下面这文章。
https://developers.google.com/speed/docs/best-practices/rendering

不知道这些优化对浏览器渲染有多大的提高？
有没有相关的数据？

[loading]

这些工作可以交给后期的自动化工具完成，人类别管这些。

[EchoFUN]

目前对css的优化，多见于对代码规范，整个工程css结构上的优化。
对渲染速度的优化还没有听说过，关注，同求大神解释。

[guchengf]

@EchoFUN 楼主给的链接的第一条就算是了，CSS选择器的使用，同样定位到某个元素，使用更高效的选择器，也算是对渲染速度的优化了，不过Chrome在这一点上优化的很好，例如最常见的从右到左的选择器处理方式，在Chrome中就不是这样子的

[unstop]

对于元素非常多的页面，优化 CSS 会对渲染速度带来很大的提升，例如 Github 的 Diff 页面。我之前看过 Github 的前端开发人员的一个视频，专门讲优化 CSS 对他们的前端性能带来的改进。

[P233]

参考一下这篇: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

“Not surprisingly, the more complex pages (child selectors and descendant selectors) usually perform the worst. The biggest surprise is how small the delta is from the baseline to the most complex, worst performing test page. The average slowdown across all browsers is 50 ms, and if we look at the big ones (IE 6&7, FF3), the average delta is just 20 ms. For 70% or more of today’s users, improving these CSS selectors would only make a 20 ms improvement.”


平时多使用 Child Selector 代替 Descendant Selector，前者可以让浏览器少检索几百上千个 dom 元素。

我觉得前期的规划工作应该是最重要的， OOCSS SMACSS 都能帮忙不少

[scarlex]

@EchoFUN @P233
前期规划工作确实很重要，目前接手一个项目，据说前端CSS方面是找外包做的，打开一看，一点组织都没有，更不要说OOCSS，SMACSS之类的了。
想用SMACSS来重构全站的CSS，目测工程比较巨大T_T

@guchengf
原来chrome不是由右往左来匹配的啊，之前看了一些浏览器渲染方面的资料都是这么说的。看来资料都落后了。

@unstop
如果还能找到视频就好了+_+

[P233]

@guchengf
@scarlex

没听说过 Chrome 不从左往右读选择器这种说法，包括楼主给出的链接也写到 “The engine evaluates each rule from right to left, starting from the rightmost selector ...”

有篇说明：

http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left/5813672#5813672

[loading]

选择器要自己搞定，很简单，了解一下就可以

还以为是属性排序那些呢！

[scarlex]

@P233
感谢 :-)

[FrankFang128]

无法做基准测试，意义不大

[learnshare]

记得微博圈子上讨论过，某个观点如下：CSS 选择器没必要优化

[cyberscorpio]

Mozilla 也有一篇：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

[otakustay]

我入门CSS优化的是这个：http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
不过老实说我不认为现在绝大多数的Web App或Web Site能在经过CSS优化后得到能够被人类察觉到的性能提升，以前一个站CSS优化了半天（纯粹为了玩）也没啥变化，结果js一个逻辑做动态预编译成函数，就赚回了好十几倍的性能
CSS选择器没必要优化+1，但记得也适当避免一些非常非常糟糕的bad smell，比如一天到晚用*选择器
还记得有一篇说github怎么优化他们的diff页面的文章，标题里写着CSS优化，进去一看手段是减少DOM元素- -

[otakustay]

@guchengf 没听说过Chrome不是从右往左这件事……在CSS3及以下版本，我认为右往左是最佳的算法，除非有类似JIT的东西存在可能可以在某些情况下打破这个“惯例”，但这应该属于特定情况的特定优化，而非泛用的手段
哦补充一下，从右往左指的是最右边不是伪类、伪元素的情况，严格意义上说是取“最右边的那个正常的（id, class, tag, *, attribute）选择器”，而attribute在这“正常的选择器”之中是否合适我本人持质疑态度
至于CSS4出来，因为有shadow dom selector和parent selector（我没关注后来这2东西是进draft了还是被砍了），从右往左可能不是最佳的，但方案也无非是简单地变一下
CSS的基本算法的本质是“从真正作用于元素的那个选择器开始”，而CSS3及以下版本，真正作用于元素的肯定是最右那个，但有了parent selector，应该就是从parent那个开始找了
CSS之所以要这么找，原因在于CSS可以做selector map来把O(n)变O(1)，而map的key必须要能从当前的DOM元素上获得，DOM元素上能获得无非是tag、id、class、attribute之流，所以必须把最右边那个直接和这个DOM相关的先开始从map中找出来，然后再往前找
简单伪算法
https://gist.github.com/otakustay/656ad559d110c3c868f8

[scarlex]

@otakustay
非常感谢你的资料！

[guchengf]

@P233
@otakustay 看来是我搞错了，感谢指正