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内,渲染进程会等到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阻塞的更多相关文章

  1. css动画结束后 js无法修改translated值 .

    由于项目的需要,俺要做一些页面的转场动画. 即将是移动端,肯定是首先css动画了. 结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性trans ...

  2. CSS动画小结

    CSS动画 原理:1.画面之间变化  2.视觉暂留作用 常见问题 1.CSS 动画的实现方式有几种 1.transition  2. keyframes(animation) 2.过渡动画和关键帧动画 ...

  3. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  4. Animo.js :一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

  5. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  6. JS阻塞以及CSS阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  7. css动画和js动画的差异

    代码复杂度,js 动画代码相对复杂一些 动画运行时,对动画的控制程度上,js 能够让动画,暂停,取消,终止,css动画不能添加事件 动画性能看,js 动画多了一个js 解析的过程,性能不如 css 动 ...

  8. 哪些地方会出现css阻塞,哪些地方会出现js阻塞?

    Js的阻塞特性: 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.直到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.为了提高用户体验,新一代浏览器 ...

  9. 【对比分析五】CSS阻塞和JS阻塞

    js 的阻塞特性: 所有浏览器在下载 JS 的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.直到 JS 下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.为了提高用户体验,新 ...

随机推荐

  1. Linux下 flash工具的使用

    使用命令前用cat /proc/mtd 查看一下mtdchar字符设备:或者用ls -l /dev/mtd* #cat /proc/mtd dev:    size   erasesize  name ...

  2. 六种酷炫Python运行进度条

    本文介绍了目前6种比较常用的进度条,让大家都能直观地看到脚本运行最新的进展情况 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做 ...

  3. 20行Python代码检测人脸是否佩戴口罩

    最近,口罩成为绝对热门的话题,在疫情之下,出门不戴口罩不仅对自己不负责,对他人而言也是一种潜在的威胁.所以许多小区都有保安在门口守着,谁要是不戴口罩就吼回去(吓死我了). 很多人学习python,不知 ...

  4. pageHelper使用时的注意点

    1 在pom.xml中导入相关的依赖(注意版本问题,报错十有八九是因为版本问题) <dependency> <groupId>com.github.pagehelper< ...

  5. 2020重新出发,JAVA入门,关键字&保留字

    关键字 & 保留字 关键字(或者保留字)是对编译器有特殊意义的固定单词,不能在程序中做其他目的使用. 关键字具有专门的意义和用途,和自定义的标识符不同,不能当作一般的标识符来使用.例如, cl ...

  6. 简单Web服务器

    import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.F ...

  7. 2020-07-04:tcp三次握手干了啥?time_wait什么时候出现?

    福哥答案2020-07-04:三次握手如下:1.SYN j2.ACK j+1,SYN k3.ACK k+1 time_wait出现在断开连接第四次挥手的时候出现.TIME_WAIT状态存在有两个原因. ...

  8. C#LeetCode刷题之#788-旋转数字(Rotated Digits)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3967 访问. 我们称一个数 X 为好数, 如果它的每位数字逐个地 ...

  9. mycat数据库集群系列之mysql主从同步设置

    最近在梳理数据库集群的相关操作,现在花点时间整理一下关于mysql数据库集群的操作总结,恰好你又在看这一块,供一份参考.本次系列终结大概包括以下内容:多数据库安装.mycat部署安装.数据库之读写分离 ...

  10. pandas | DataFrame中的排序与汇总方法

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是pandas数据处理专题的第六篇文章,我们来聊聊DataFrame的排序与汇总运算. 在上一篇文章当中我们主要介绍了DataFrame ...