当前位置：文江博客话题详情

CSS 性能问题。上课时口吃适用

发布于 2025-01-11 02:42:06 字数 678 浏览 0 评论 0 原文

我正在使用顺风类在我的网站上实现一个黑暗主题。例如：

由于某种原因，每当我改变主题时，过渡并不顺利，而是滞后和口吃。我注意到，随着页面上深色风格元素的增加，延迟变得更糟。

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

更新

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

我在页面上有很多元素最初设置了深色类，然后每当我更改主题时，我只需在中添加/删除“深色”类。我的页面上可能有 50 个元素，这些元素会更改其文本颜色和背景颜色，并且每当主题更改时，所有这些元素都会出现延迟。这种滞后类似于内存泄漏或循环。它会断断续续，然后一次加载所有内容之类的东西。

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

更新2

根据开发工具中的性能页面，我在更改主题时丢失了很多帧。实际上感觉我的帧率达到了 5 fps。以下是性能页面 prnt.sc/Zz6T88ZFs6Fp 的屏幕截图。我不知道如何阅读它，也许有人可以提供一些有用的信息

如果有人曾经遇到/解决过这个问题，我将非常感谢你的建议

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伴我心暖 2025-01-18 02:42:06

这可能与关键渲染路径有关。我建议您阅读这篇优秀的文章：使用 CSS3 实现 60 FPS 动画。
简而言之，如果您在 transform 和 opacity css 属性上设置了 css 过渡，则浏览器必须重新计算整个布局，这会导致卡顿。

回复收藏 0 原文

请帮我爱他 2025-01-18 02:42:06

我不使用顺风，并且在没有示例代码的情况下很难测试我的响应，但几年前我遇到了一个非常类似的问题，当时浏览器有点愚蠢。

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

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

我当时确定，问题在于这些项目会导致每次更改都重新绘制。

我最终做的是在身体上交换一个类：

<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;
}

这工作得很好，因为据我了解，重绘是一次性发生的......但我猜想甚至尝试你必须写很多东西都是你自己做的，而不是使用顺风。也许不会，所以我希望即使使用顺风，这种思路也能有所帮助。

编辑：如果我遇到同样的问题并且无法足够快地解决它，我会用快速不透明度淡出身体，然后再回来。完整的破解，但它可能看起来很酷。这不是解决您真正问题的方法，但如果您无法解决它，它可能会有所帮助。

I don't use tailwind and it's hard to test my response without example code but I had a very similar problem several years ago when browsers were a little dumb.

I had many classes for color throughout the html and toggled them with jquery. Here's a quick example of how...

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

I determined that, at the time, the problem was that the items were causing repainting for each change.

What I ended up doing was swapping a class on the body:

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

And then:

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

And that worked beautifully because, as I understood it, the repaint happened all at once... but I'm guessing to even try you'd have to write a lot of stuff on your own instead of using tailwind. Maybe not, so I hope this line of thinking helps even if using tailwind.

Edit: if I had the same problem and couldn't fix it quickly enough I'd fade the body with a quick opacity out and then back in. Complete hack but it might look cool. Not a solution to your real problem but it might help if you can't fix it.

回复收藏 0 原文

扮仙女 2025-01-18 02:42:06

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

回复收藏 0 原文

夜唯美灬不弃 2025-01-18 02:42:06

经过大量研究，我终于找到了一些有用的信息。
在本文和来自这里的一些信息我发现丢帧实际上并不罕见，但通常不像我的情况那么严重。

Profile.json（从网络页面下载）中有一些特定的行，可以帮助您找到丢帧的实际原因。查找unsupportedProperties。
就我而言是{"args":{"data":{"compositeFailed":8224,"unsupportedProperties":["color"]}},"cat":"blink.animations,devtools.timeline,benchmark,rail", “id2”：{“本地”： “0x76c803503df8”}，“名称”：“动画”，“ph”：“n”，“pid”：40040，“范围”：“blink.animations，devtools.timeline，基准，rail”，“tid”：13280 ，“ts”：166257565931}。对我来说，原因是页面上的太多元素改变了它们的文本颜色。 884 行 compositeFailed 与我页面上一个主题切换的“颜色”相关。只有在 https://csstriggers.com/ 的帮助下进行重构才对我的情况有效。

目前，我不知道复合失败的实际原因，除了它与颜色属性和闪烁动画有关。欢迎任何 Google 开发人员启发我，因为我真的找不到任何相关信息。