transform: scale(x) 是一项昂贵的操作吗？答案

【问题标题】：Is transform: scale(x) a costly operation?transform: scale(x) 是一项昂贵的操作吗？
【发布时间】：2021-12-12 01:43:39
【问题描述】：

我有一个 UI 元素，设计为在 '200px' 宽度下工作得最好。但是如果 UI 的大小需要根据窗口/媒体大小来改变，那么必须一点一点地调整这个 Component 并将宽度从200px 改变出来是很痛苦的。

通过使用transform: scale(x) 调整到窗口/媒体大小来更改组件的大小是否可以接受？性能成本高吗？实际上，窗口/媒体大小将从一开始就设置，因此缩放功能只需运行一次即可。

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

【问题讨论】：

也许给你的问题添加一些代码...... ????
文本在缩放元素中通常看起来更糟。如果您重视可读性，我会让组件以多种宽度工作。
我会根据视口宽度使用 CSS 媒体查询来设置组件的样式。但是，要回答您的问题：不，缩放元素并不是一项昂贵的操作。渲染引擎使用图形管道，在渲染之前以数学方式将所有变换（平移、旋转、缩放）应用于元素的矩阵。

标签： javascript html css user-interface frontend

【解决方案1】：

transform: scale(x) 操作成本高吗？

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

使用 JS 来设置 CSS 绝对是一种代价高昂的更改方式。最有效的方法是仅使用 CSS（媒体查询）。
为小屏幕“缩放”组件看起来很奇怪。现在解决它的一种常见方法是制作响应式布局。但是想想，你不需要让它的内容在里面是动态的。这样的任务可以用 CSS 来解决。只需向前迈出一步。在 CSS 中将内部内容与外部尺寸联系起来 - 使用 em/rem 单位而不是 px 进行所有度量。并且媒体查询将仅更改其基础font-size。不同的大小，没有潜在的缩放可视化问题，相同的内容位置。 :)
CSS 可能如下所示。对不起，一个最小的工作 HTML、CSS、JS 来演示这个概念。要在此 sn-p 中检查不同屏幕尺寸的 JS - 更改您的屏幕尺寸，刷新 sn-p。 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>

【讨论】：