改变DIV大小vs改变BG大小(性能)

Changing DIV size vs Change its BG size (perfomance)

本文关键字：改变 大小 性能 vs DIV BG      更新时间：2023-09-26

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

  • a)实际上是扩大DIV
  • b)自从我听说JS与DOM是它的主要问题，我想到，我们可以创建2div, 1表示放大尺寸，2表示最小化，BG尺寸为放大等于最小DIV的大小，例如70%

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

这里的方案:有边框的DIV -表示放大的DIV, BG大小为70%;最小化div的不透明度为零，大小精确到图像

TL;博士

那么哪个方法更快:操作DIV的大小本身，或操作其css属性?

对于浏览器来说，最有效的方法通常是通过css转换将内容变大，因为它是硬件加速的，并且完全不会与DOM的位置发生冲突。这也是制作动画最简单的方法:)

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

html: 

<div>foo</div>
css: 

div:hover {
  transform:scale(1.5)
}
相关文章：