CSS 性能问题。 class 申请期间口吃

Question

我正在使用 tailwind classes 在我的网站上实施深色主题。例如： <tr className="bg-white dark:bg-dark-blue text-left dark:text-white transition-colors duration-300"></>

并且出于某种原因，每当我更改主题时，转换都不是很流畅，而是滞后和卡顿。我注意到随着页面上深色风格元素的增加，延迟变得更糟。

我不确定这实际上是顺风问题还是浏览器中的一般 CSS 性能问题。

更新

经过一些测试，我得出的结论是它实际上与转换无关，而是与 CSS 本身有关。

我在页面上有很多元素最初设置为深色 classes 然后每当我更改主题时我只是 add/remove 'dark' class 在 <html>。我可能在页面上有 50 个元素，它们会改变它们的文本颜色和背景颜色，并且只要主题发生变化，所有这些元素都会滞后。滞后类似于内存泄漏或循环。它断断续续然后一次加载所有东西等等。

所以我想我的问题是在这种情况下如何优化 CSS 性能？还是整体？

更新 2

根据 devtools 中的性能页面，我在更改主题时丢失了很多帧。它实际上感觉就像我得到 5fps。这是性能页面 prnt.sc/Zz6T88ZFs6Fp 的屏幕截图。我不确定如何阅读它，也许有人可以提供一些有用的信息

如果有人遇到过faced/solved这个问题，非常感谢您的建议

Answer 1

您可以进入开发工具，然后进入“网络”下，然后点击“禁用缓存”。

Answer 2

可能与关键渲染路径有关。我建议您阅读这篇优秀的文章：Achieving 60 FPS Animations with CSS3。简而言之，如果您在 transform 和 opacity css 属性之外设置了 css 转换，您的浏览器必须重新计算整个布局，这会导致卡顿。

Answer 3

我不使用 tailwind，没有示例代码很难测试我的响应，但几年前我遇到了一个非常相似的问题，当时浏览器有点笨拙。

我在整个 html 中有很多 class 颜色，并用 jquery 切换它们。这是一个简单的例子，说明如何...

$(".red").removeClass("red").addClass("blue");

当时我确定问题是每次更改都会导致项目重新绘制。

我最后做的是在 body:

上交换 class

<body class="blue">
<a href="#">Whatever</a>
<a href="#">Something else</a>
<!-- lots more -->
</body>

然后：

body.blue a {
color: blue;
}
body.red a {
color: red;
}

而且效果很好，因为据我所知，重绘是一次性完成的...但我猜即使尝试你也必须自己写很多东西而不是使用 tailwind .也许不是，所以我希望即使使用 tailwind，这种思路也会有所帮助。

编辑：如果我有同样的问题并且不能足够快地解决它，我会用快速的不透明度淡出 body 然后再回来。完全 hack 但它可能看起来很酷。不是您实际问题的解决方案，但如果您无法解决问题，它可能会有所帮助。

Answer 4

经过大量研究，我终于找到了一些有用的信息。在 this article and some info from here 的帮助下，我发现丢帧实际上并不少见，但通常不像我的情况那么严重。

Profile.json（从网络页面下载）中有一些特定的行，可以帮助您找到丢帧的真正原因。寻找 unsupportedProperties。在我的例子中是 {"args":{"data":{"compositeFailed":8224,"unsupportedProperties":["color"]}},"cat":"blink.animations,devtools.timeline,benchmark,rail","id2":{"local":"0x76c803503df8"},"name":"Animation","ph":"n","pid":40040,"scope":"blink.animations,devtools.timeline,benchmark,rail","tid":13280,"ts":166257565931}。对我来说，原因是页面上有太多元素改变了它们的文本颜色。 884 行 compositeFailed 与 'color' 相关，用于我页面上的一个主题切换。只有在 https://csstriggers.com/ 的帮助下进行重构对我来说才是有效的。

目前，我不知道 compositeFailed 的真正原因，除了它与颜色属性和闪烁动画有关。欢迎任何 Google 开发者启发我，因为我真的找不到任何相关信息。

CSS 性能问题。 class 申请期间口吃

CSS performance issues. Stuttering during class apply

css

css-transitions

reactjs

tailwind-css