死循环无法阻止CSS3动画

2024-01-20 分类：网站建设

JavaScript的死循环可以卡死浏览器？那是IE6，只有IE6才会那么没出息！现代浏览都是标签页的模式，有些还是独立页面进程的，怎么会因为个小小的JavaScript死循环而卡死呢？虽然JavaScript的循环的优先级很高，但它只是主线程的一个组成部分而已。上一篇的测试代码中也有类似的部分，但是使用了CSS2的margin，所以JavaScript死循环时它就不动了。但实际上在Chrome中，即使程序是死循环状态，CSS3也会继续播放动画。但仅限修改CSS3的属性，例如transform。像margin、left这样的CSS2的属性依然会被阻断。运行<style> div { width:50px;height:50px; background:#FDD000;color:#FFF; text-align:center;font:32px/50px Arial; -webkit-animation:test 2s linear infinite; animation:test 2s linear infinite; } @-webkit-keyFrames test { 0% {-webkit-transform:translateX(0px);} 50% {-webkit-transform:translateX(200px);} 100% {-webkit-transform:translateX(0px);} } @keyFrames test { 0% {transform:translateX(0px);} 50% {transform:translateX(200px);} 100% {transform:translateX(0px);} } </style> <div></div> <hr/> <input type="button" value="循环5秒" /> <script> document.querySelector("input").onclick=function(){ for(var t=new Date;new Date-t<5000;); }; </script>

点击按钮后按钮都卡住了，但是Chrome中CSS3动画还在不知疲倦的运行着。不过目前这是Chrome上独有的问题，其它浏览器上死循环可以正常阻止CSS3动画的。这个现象虽然不会在实际应用中造成什么影响，但是我们可以从这个现象看出代浏览器的实现方向：线程不是你想断，想断就能断的。

网站标题：死循环无法阻止CSS3动画
文章源于：https://www.cdcxhl.com/news42/314592.html

成都网站建设公司_创新互联，为您提供品牌网站设计、微信公众号、App设计、电子商务、做网站、App开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容