关于 css 属性顺序与 css 的性能问题

[9ki]

偶然查资料中查到了这个

https://blog.csdn.net/qq_36060786/article/details/79311244

在其文章的来源也没有看到和 css 顺序影响性能的资料，查了英文互联网也未能查到，有万能的 v2er 可以帮忙确认下文章的准确性吗？，以及分享解决方案

[xiangyuecn]

扯鸡巴蛋的垃圾文章

[cheese]

书写顺序不影响性能，只影响阅读

[rioshikelong121]

垃圾文章。

[supuwoerc]

现在基本都是 scss 或者 less 了吧。。性能。。css 性能体现不出啥吧。。。

[yiangforwork]

https://stackoverflow.com/questions/2549296/whats-the-difference-between-reflow-and-repaint
https://medium.com/@suhas010/what-the-heck-is-repaint-and-reflow-in-the-browser-b2d0fb980c08

我觉得评论之前，至少先做一丢丢的调查。

[rioshikelong121]

@yiangforwork 你贴的这两篇文章和 LZ 给出的 blog 里面的东西有什么关联么？

> 当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示，影响了用户体验。


我认为这个论述很扯淡。render tree 的构建和 render 是在 DOM Tree 和 CSSOM Tree 构建完成以后才发生的。 按 Blog 中的这段话，好像是边解析 css 边 render 一样。 我不认为一个正常的 css 模型的性能和属性的顺序会有关系。

[whypool]

其实有这个规则的
盒子模型宽高优先于边距，文字优先于颜色，这个还有一个 eslint 规则

不过这个渲染效率是 ns 级别的，是单独的渲染线程，和 js 不阻塞，除非 js 开销影响到了硬件性能

[autoxbc]

现代浏览器恐怖的性能让所有 CSS 优化文章都变成废纸了

[xingyuc]

https://i.loli.net/2020/07/07/4nEBDckXtbwNHKA.jpg