Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

死循环已经无法阻止CSS3动画执行了

  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动画的。这个现象虽然不会在实际应用中造成什么影响,但是我们可以从这个现象看出代浏览器的实现方向:线程不是你想断,想断就能断的。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^