我必须在 css 类属性中进行更改，以便充分利用 GPU

Question

我有单页基于 Angular 的 Web 应用程序。并使用下面的 CSS 类进行样式设置。所以我需要在下面的这些 css 类中做些什么，以便大多数人使用 GPU 而不是使用 CPU。像变换，过渡，位置等。这是css样式的scss文件。 CSS：.tree-children.tree-children-no-padding { padding-left: 0 }.tree-children { padding-left: 20px; overflow: hidden }.node-drop-slot { display: block; height: inherit }.node-drop-slot.is-dragging-over { background: #ddffee; height: 20px; border: 2px dotted #888; }.toggle-children-wrapper-expanded .toggle-children { transform: rotate(90deg) }.toggle-children-wrapper-collapsed .toggle-children { transform: rotate(0); }.toggle-children-wrapper {  padding: 2px 3px 5px 1px;}.toggle-children {  height: 8px;  width: 9px;  background-size: contain;  display: inline-block;  position: relative;  top: -.65px;  background-repeat: no-repeat;  background-position: center;}.toggle-children-placeholder {  display: inline-block;  height: 10px;  width: 10px;  position: relative;  top: 1px;  padding-right: 3px;}.node-content-wrapper {  display: inline-flex;  padding: 2px 5px;  border-radius: 2px;  transition: background-color .15s,box-shadow .15s;}.node-wrapper {display: flex; align-items: flex-start;}.node-content-wrapper-active,.node-content-wrapper-focused { background: #e7f4f9 }.node-content-wrapper.is-dragging-over { background: #ddffee; box-shadow: inset 0 0 1px #999; }.node-content-wrapper.is-dragging-over-disabled { opacity: 0.5 }tree-viewport {  -webkit-tap-highlight-color: transparent;  height: 100%;  width: 100%;   overflow: hidden;  display: block;  min-width: 170px;}tree-viewport {  overflow: auto;  margin-bottom: 10px;}.tree-children { padding-left: 20px }.empty-tree-drop-slot .node-drop-slot { height: 20px; min-width: 100px }}并且功能也照常工作。请任何帮助。

Answer 1

确保您主要使用transform以获得更好的性能。

还要确保添加will-change: transform到您的元素中，该元素将具有转换属性。

此外，最好添加contain: layout通知浏览器该框内发生的事情不会影响页面的其他部分，反之亦然。这将允许浏览器针对特定模块/框/div 进行优化。