transform: scale(x) 是一项代价高昂的操作吗？

Question

我有一个 UI 元素，该元素设计为恰好在“200 像素”宽度时效果最佳。但是，如果 UI 的大小需要根据 window / 媒体大小进行更改，则必须一点一点地调整此组件并将宽度从 200px 更改开来会很痛苦.

通过使用 transform: scale(x) 调整到 window / 媒体大小来更改组件的大小是否是可接受的做法？性能成本高吗？实际上，window / media size 将从一开始就设置好，所以 scale 函数只需要运行一次即可。

if (screen width < 600px) {
  element.style.transform = "scale(.7)"
} else {
  element.style.transform = "scale(1)"
}

Answer 1

Is transform: scale(x) a costly operation?

不，变换操作不需要 DOM 更新。浏览器进行渲染更新。它的优点是性能成本低，运行速度快。它的缺点是缩放可能会大大降低其视觉质量（例如，模糊图像），缩小后的组件及其内容可能难以使用或阅读。

使用 JS 来设置 CSS 绝对是一种代价高昂的更改方式。最有效的方法是仅使用 CSS（媒体查询）。
'scale' 小屏幕组件看起来很奇怪。现在常见的解决方法是做响应式布局。但是想想，你不需要让它的内容在里面是动态的。这样的任务可以用 CSS 来解决。再向前迈出一步。将内部内容与外部尺寸绑定在 CSS - 使用 em/rem 单位而不是 px 来衡量其所有度量。并且媒体查询将仅更改其基数 font-size。大小不同，没有潜在的缩放可视化问题，内容位置相同。 :)
CSS可以像下面这样。抱歉，一个最小的 HTML、CSS、JS 来演示这个概念。要检查此代码段中不同屏幕尺寸的 JS - 更改屏幕尺寸，刷新代码段。 CSS 选项无需刷新即可工作。

function setSizeJs() {
  const element = document.getElementById('target-element-px');
  element.style.transform = window.innerWidth < 600 ? 'scale(.7)' : 'scale(1)';
}

.parent {
  font-size: 14px;
}

#target-element-px {
  /* original width */
  width: 200px;
  /* colorize element to show its size */
  background-color: green;
}

#target-element-em {
  /* main style, will be applied always */
  /* an equivalent of 'width 200px' in EMs, where EM is taken as '14px' from the 'parent' class */
  width: 14.28571428571429em;
  background-color: grey;
}

@media screen and (max-width: 600px) {
  /* additional style, will be applied only when the screen size will be less than 600px */
  /* it will overwrite the main style */
  #target-element-em {
    font-size: 0.7em;
  }
}

<div class="parent">
  <div id="target-element-px" class="target-element" onload="setSizeJs">
  Some content for original 200px width
  </div>

  <div id="target-element-em" class="target-element">
  Some content for original 200px width
  </div>
</div>

transform: scale(x) 是一项代价高昂的操作吗？

Is transform: scale(x) a costly operation?

html

javascript

css

user-interface

frontend