我正在创建一个 Web 应用程序，在达到一定程度的复杂性后，我注意到每当我使用该页面时，笔记本电脑的风扇开始运转得很高，这可能是由于处理器或视频卡引起的。我以前只在游戏或图形处理中看到过它的行为。
我分析了 javascript，发现没有进程消耗太多资源，所以我认为可能是 CSS。
我正在使用一些带有transition、translate 和opacity 的动画。
我的问题是:这些 CSS 属性会影响我的表现吗？如何以最佳方式使用这些元素？可能是一个宽泛(不太宽泛)的问题，但任何提示都会有很大帮助。
最佳答案
正如 Terry 提到的，使用转换矩阵将使浏览器将其传递给 GPU，但您也需要小心。
通常台式机和笔记本电脑可以很好地处理这个问题(除非您同时传递大图像、巨大的 SVG 或大量图像，在这种情况下，计算机/设备中的普通 GPU 无法做到)，但是设备的硬件仍然不够强大，所以不要使用太多。最后使用 translate 属性而不是 left 和 top，例如，确实提高了浏览器性能，因为渲染是在 GPU 中完成的。
如果您对 JS 动画感兴趣，一个可靠的选择是使用 Greensock因为它有能力创建一个 GPU 层然后将其移除，以避免堵塞 GPU。还以出色的方式处理垃圾收集。我在很多元素中使用过，效果很好，而且你不需要很多 JS 知识就可以使用它。
编辑:
@raphadko，我相信观看此视频以了解有关浏览器渲染性能的最基本问题是很好的:
关于css - 如何应用 CSS3 渲染以获得最佳性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36252056/