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