我必须在 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 进行优化。