探讨css动☏漫是不是会被js堵塞

css的动漫一部分是会被js堵塞的，但是transform的动漫则不容易受危害。

下边举一个margin-left移动的动漫下，起动js堵塞动漫的特性数据图表

<style>
.walkabout-old-school {
  animation: 3s slide-margin linear infinite;
}
 
@keyframes slide-margin {
  from {margin-left: 0;}
  50% {margin-left: 100%;}
  to {margin-left: 0;}
}
</style>
<script>
function kill() {
  var start = +new Date;
  while (+new Date - start < 2000){}
}
</script>

图中在运作kill方式以后显著能看到动漫停滞不前了2s后才再次。

由图中能看到开启js的2s内，3D渲染过程会直到kill涵数实行进行后才实行，再看看面这幅图，能看出margin的转变会造成dom再次合理布局，而合理布局会等kill涵数实行进行后才刚开始。便会造成

随后再看一下应用了transform做为动漫的原素

.walkabout-new-school {
  animation: 3s slide-transform linear infinite;
}
@keyframes slide-transform {
  from {transform: translatex(0);}
  50% {transform: translatex(300px);}
  to {transform: translatex(0);}
}

下面的图是运作比照图（深蓝色为margin，翠绿色为transform）

从图中看得出应用了transform的彻底不会受到kill方式的危害，再说看看调节的数据图表

这儿能看出margin会经常开启网页页面的重排，而transform不是会的，而js堵塞了网页页面重排。因此margin的动漫会卡住。

因此在平常应用动漫时，要用transform可让网页页面特性和实际效果做到最好。

到此这篇有关探讨css动漫是不是会被js堵塞的文章内容就详细介绍到这了,大量有关css动漫被js堵塞內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！