更改 DIV 大小与更改其 BIG 大小（性能）

Posted 2023-05-09

【中文标题】更改 DIV 大小与更改其 BIG 大小（性能）

【英文标题】：Changing DIV size vs Change its BG size (perfomance)

【发布时间】：2017-03-19 05:52:32

【问题描述】：

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

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

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

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

TL;DR

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

【参考方案1】：

对于浏览器来说，最高效的方式通常是通过 css 转换来扩大规模，因为它的硬件加速并且与 DOM 的定位完全不冲突。这也是制作动画的最简单方法:)

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

html:

<div>foo</div>

css:

div:hover 
  transform:scale(1.5)

【讨论】：

这真的很棒。虽然我需要将操作分成两部分 css/js。仍然很好的解决方案和性能解释！谢谢你的回答:)

如果你希望它被 javascript 调用，你可以在悬停时添加一个带有 javascript 的类，这会触发这个 css 效果