Jquery CSS转换转换-使用´；px和xB4；比'更平滑/性能更好；百分比'；

我最近一直在研究改进我网站上的动画——更具体地说是移动设备上的导航下拉菜单

在这方面，我偶然发现了以下案例，我希望能对其有更深入的了解

这种情况是，当使用

%

而不是

px

应用浏览器时，在转换/设置动画

transform:translate3d（）

时，浏览器似乎需要更多的计算。例如，在我的测试中，从

transform:translate3d（0500px，0）

转换到

transform:translate3d（0,0,0）

比从

transform:translate3d（0,100%，0）

转换需要更少的计算量，运行更平稳

更新：进一步测试后，我发现使用

100vh

/

100vw

可以绕过/缓解使用百分比的问题。当元素具有窗口的已知百分比宽度或为全宽度时，可以使用FYK，从而提高性能。实际上，似乎使用这个值的行为就像在Chrome中为它分配了

px

值一样

下面是来自每个动画的时间线的几张图片。时间线是使用谷歌开发工具在“性能”下获得的。为了更好地展示这一差异，Chrome开发工具的性能仅限于“低端移动设备”（6倍CPU减速）

使用百分比进行变换：

使用像素（px）进行变换：

从图像中可以看出，当使用

%

而不是

px

来确定转换时，似乎要进行更多的渲染和绘制。浏览器必须计算每一帧的百分比值（我想是吧？），这很有意义，但我很惊讶，与使用像素值相比，它需要的时间要多得多

另外请注意，显示百分比时间线的图片中的帧速率从未达到~60 fps，而是平均约40 fps

下面是复制案例的片段。有一个使用百分比，一个使用px

$（文档）。在（“单击”，函数（）上）{
$（“.bb”）。切换类别（“活动”）；
});
.aa{
高度：50px；
背景：蓝色；
位置：固定；
排名：0；
宽度：100%；
}
.bb{
位置：固定；
顶部：0px；
背景：无；
身高：100%；
宽度：100%；
左：0；
变换：translateZ（0）；
溢出：隐藏；
指针事件：无；
}
.cc{
身高：100%；
转换：translate3d（0500px，0）；
宽度：100%；
过渡：转变。5s轻松；
背景：红色；
}
.bb.active.cc{
转化：无；
}

单击文档以启动动画

第一点
第二点
第三点
第四点
第五点
第六点
第七点

第一点
第二点
第三点
第四点
第五点
第六点
第七点


我所经历的这种行为（在px中赋值的性能优于%）正确吗？如果正确，为什么会发生这种情况？如前所述，我认为应该这样做是有道理的，但我确实缺乏一些技术/深入的解释

的确是这样。像素是绝对值（即，不依赖于任何东西，以“原样”表示）。百分比是相对值，这意味着它们必须依赖于其他值才能产生结果。所以每次你分配一个百分比值，它必须得到它的相对值来进行计算。
当使用像素进行转换时，您只需更改转换值，但使用百分比时，您必须首先获得元素的尺寸，然后应用转换。对于每个动画帧都必须这样做

若要缓解此问题，必须在动画之前仅重新计算元素的尺寸一次。然后使用
！重要信息
覆盖样式属性中设置的内容。代码段中的代码正是这样做的

还要注意，我添加了一个
resize
侦听器。如果窗口被调整大小，那么元素将被隐藏，这是必需的


$（函数（）{
var$el=$（“#bb”）；
$（文档）。在（“单击”，函数（）上）{
变量高度=$el.outerHeight（）；
$el
.css（'transform'，'translateY（'+height+'px'））
.toggleClass（“主动”）；
});
$（窗口）.on（'resize'，function（））{
$el.removeClass（'active'）.removeAttr（'style'）；
});
});
#bb{
位置：固定；
顶部：0px；
背景色：红色；
身高：100%；
宽度：100%；
左：0；
溢出：隐藏；
转化：translateY（100%）；
过渡：转变。5s轻松；
}
#活跃的
{
转换：translateY（0px）！重要；
}


第一点
第二点
第三点
第四点
第五点
第六点
第七点

第一点
第二点
第三点
第四点
第五点
第六点
第七点

为了进一步扩展CyperAP给出的答案和我在原始问题中提出的建议，我还发现使用CSS3
vw
和
vh
值可以绕过使用
%
导致的问题

此用例在根据窗口大小为要转换的元素指定了高度/宽度的情况下特别有用，例如，如果元素为全宽（
100%
/
100vw
）

根据原始问题中的示例，使用
transform:translate3d（0，100vh，0）
生成以下时间轴结果（同样，在Chrome中，性能限制为“低端移动”）：


可以在此处看到代码片段：


$（文档）.on（“clic