javascript - 更改 DIV 大小与更改其 BIG 大小(性能)

Question

所以，例如我有一个 div，我需要在鼠标悬停时放大。我知道 2 种方法:

• a)实际上是为了扩大DIV
• b)因为我听说过 JS 操作DOM 是它的主要问题，我想到我们可以创建 2DIVs，1代表放大尺寸，2nd代表缩小尺寸，BG尺寸为放大等于最小化 DIV 的大小，例如70%

在最小化的 DIV 上 mouseenter - 触发将 bg 大小设置为放大的 DIV 大小的 100% 的函数

Scheme here : Bordered DIV - 代表 Enlarged DIV，占 BG 的 70%；最小化的 div 具有零不透明度，大小精确到图像

长话短说

那么哪种方法更快:使用 DIV 的大小本身进行操作，或使用其 css 属性进行操作？希望我能清楚地描述我的想法。

Answer 1

对于浏览器而言，性能最高的方式通常是 css 转换以使其更大，因为它的硬件加速并且与 DOM 的定位完全不冲突。这也是制作动画的最简单方法 :)

演示:https://jsfiddle.net/v0k69mq3/

html:

<div>foo</div>

CSS:

div:hover {
  transform:scale(1.5)
}