在我们解释前先看一段代码以及代码的运行结果(可直接使用观看使用效果)
一、效率问题
1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 动画1通过修改transform来实现 */
@keyframes move1 {
to {
transform: translate(500px);
}
}
/* 动画2通过修改定位的left来实现 */
@keyframes move2 {
to {
left: 500px;
}
}
.ball1,
.ball2 {
width: 200px;
height: 200px;
background: skyblue;
border-radius: 50%;
margin: 50px;
}
.ball1 {
animation: move1 1s alternate infinite ease-in-out;
}
.ball2 {
position: fixed;
left: 0;
animation: move2 1s alternate infinite ease-in-out;
}
</style>
</head>
<body>
<button>死循环</button>
<div class="ball1"></div>
<div class="ball2"></div>
</body>
<script>
function dalay(time) {
let start = Date.now()
// 陷入time时间的死循环
while (Date.now() - start < time) { }
}
// 点击按钮后进入5秒的死循环
document.querySelector('button').onclick = function () {
console.log(1);
dalay(5000)
}
</script>
</html>
2.演示视频
死循环
二、产生的原因
原部分内容与上次文章中的部分内容有关
原因:
因为transform只影响渲染流程中的画步骤
transform 既不会影响布局也不会影响绘制指令,它影响的只是渲染流程的最后一个阶段
由于画阶段在合成线程中,所以 transform 的变化几乎不会影响渲染主线程。反之,渲染主线程无论如何忙碌,也不会影响 transform 的变化。
简单理解:
transform不会影响到渲染主线程;
而另一个动画则对渲染主线程产生了影响,渲染事件陷入死循环后动画会产生影响