调试CSS

Question

我试图调试一个在闲置时始终使用13-15％CPU的Web应用程序。我已经确定我的样式表是罪魁祸首。删除它会使Chrome中的空闲CPU使用率降至0.1％。不幸的是我的样式表长达数千行，所以逐行排序并不是一个选择。我在这个问题上看过很多帖子和博客文章，其中许多建议将will-change: transform和/或transform: translateZ(0)与transform属性结合使用。我已经在我的CSS中应用了这个规则，它只节省了大约2％的CPU使用率。

我一直在尝试使用Chrome Dev Tools调试此问题，但进展有限。从我可以使用时间轴选项卡告诉我，该应用程序在画布的空闲Painting和Rendering上花费了大量时间。见附件截图。

我想知道的是，如果有一个已知CPU hog的CSS属性的完整列表，以及解决它们的策略。动画似乎是一个明显的罪魁祸首，但我的应用程序几乎没有。

关于我的CSS的几点说明：

• 我的应用根本没有使用CSS3 animate属性。

• 广泛使用background-image和相关联 定位属性（background-size，background-position， 等等，基于我的分析，似乎约占6-7％ 闲置CPU使用情况。

• 该应用程序有大约六个jQuery动画，不过那些 似乎只是在触发时会短暂提高CPU使用率，这可能是 预期

• 该应用程序在很大程度上依赖于绝对/固定的使用 定位和相关属性（例如top，left等）。

• 该应用依赖于box-shadow和text-shadow属性 位。

• 我的堆栈是Angular 1.5，Angular UI Bootstrap 1.3.2，jQuery 2，Bootstrap 3和Font Awesome

供参考，here is a gist of my custom CSS，它会覆盖Bootstrap 3。