我正在创建一个Web应用程序，在达到一定程度的复杂性之后，我注意到每当我使用该页面时，我的笔记本电脑的风扇开始变高，可能来自处理器或显卡。我以前只在游戏或图形处理中看到过它的行为。
我描述了javascript并注意到没有进程消耗太多资源，所以我想也许它可能是CSS。
我正在使用一些带有过渡，翻译和不透明度的动画。
我的问题是：这些CSS属性会影响我的表现吗？如何以最佳方式使用这些元素？可能是一个广泛的（不是太宽泛的）问题，但任何提示都会有很大帮助。
答案 0 :(得分：2)
正如Terry所提到的，使用变换矩阵会使浏览器将其传递给GPU，但您还需要小心。
通常台式机和笔记本电脑处理得非常好（除非你同时传递大图像，巨大的SVG或很多SVG，在这种情况下，计算机/设备中没有任何普通的GPU可以做到），但是设备的硬件功能仍然不那么强大，所以不要使用太多。最后使用翻译属性而不是左侧和顶部，例如，确保提高浏览器性能，因为渲染是在GPU中完成的。
如果您对JS动画感兴趣，可以选择使用Greensock，因为它能够创建GPU层然后将其删除，以避免堵塞GPU。还以出色的方式处理垃圾收集。我已经在许多项目中使用了很好的结果，你也不需要很多JS知识来使用它。
编辑：
@raphadko，我相信很高兴看到这个视频来了解有关浏览器渲染性能的最基本问题：