死循环无法阻止CSS3动画

发布时间:2025-07-10 点击:5
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动画的。这个现象虽然不会在实际应用中造成什么影响,但是我们可以从这个现象看出代浏览器的实现方向:线程不是你想断,想断就能断的。

深圳网站设计时应该注意这几点
二级域名和子目录,哪个更有利于SEO
定制型网站建设有什么要求?
大数据告诉你:Google排名高的是什么样的页面 ?
SEO是公司网站长期营销推广不可或缺的得力工具
什么是中央服务器?中央服务器位置有什么好处?
哪里的网站建设好?建设网站的好公司有哪些?
网站加入熊掌号提交链接不断失败的三大原因