亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我必須在 css 類屬性中進行更改,以便充分利用 GPU

我必須在 css 類屬性中進行更改,以便充分利用 GPU

慕田峪9158850 2022-10-27 15:36:17
我有單頁基于 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 }}并且功能也照常工作。請任何幫助。
查看完整描述

1 回答

?
斯蒂芬大帝

TA貢獻1827條經驗 獲得超8個贊

確保您主要使用transform以獲得更好的性能。

還要確保添加will-change: transform到您的元素中,該元素將具有轉換屬性。

此外,最好添加contain: layout通知瀏覽器該框內發生的事情不會影響頁面的其他部分,反之亦然。這將允許瀏覽器針對特定模塊/框/div 進行優化。


查看完整回答
反對 回復 2022-10-27
  • 1 回答
  • 0 關注
  • 100 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號