在复杂的网页上审计未使用的CSS

Question

4

我知道有几种工具可以找到静态网页上未使用的CSS。但在我遇到的大多数实际情况中，页面上的许多CSS是在某些交互后使用的，例如新模态弹出或选项弹出等。

在这种情况下，你会建议什么？我如何掌握越来越多的阻止渲染的CSS？

我猜唯一的方法是使用常规未使用CSS检测器类型的工具并与Selenium一起运行 - 测试已知的交互并查看哪些未使用。但一个很大的假设是，我需要知道页面上所有可能使用新CSS的交互。有没有一种方法可以在不做出这个假设的情况下实现我的目标？

在理想的世界里，我将能够将访问者浏览器在我的页面上使用的所有CSS回传到我的服务器。然后，我将收集数据一个月，进行聚合，并获得关于实际未使用的CSS的相当准确的想法。

有什么好主意吗？

- user1265125

https://dev59.com/43VC5IYBdhLWcg3w9GHM - DaniP

那个问题是关于静态分析工具的。我问的是关于静态+交互的。 - user1265125

将监听器添加到DOM属性更改以重新运行未使用的CSS类检查？结果可能需要在一段时间内存储在某个地方，直到您获得了一个不错的未使用类列表，因为您不知道进行了什么交互。 - Wild Beard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xt6 · Answer 1

我是一个工具的作者，旨在做你所描述的事情。无论我在哪里工作，CSS 都是这种“只追加”东西，它太冒险了，清理起来太费时间了。而且即使你尝试了，投资回报率也很低，不值得。

因此，我正在开发一种非常类似于你所描述的工具。目标是带来信心，在可以删除的内容上，通过提交拉取请求来自动执行。

在浏览器中运行 JavaScript 片段并向服务器发送正在使用的报告。一旦积累了足够的数据来构建一些“置信度分数”，就可以自动创建拉取请求以删除实际未使用的选择器。

它仍处于非常初级阶段，但您可以尝试并提供反馈。