动画冻结在FF和IE,但不是Chrome
Animation freezes on FF an IE but not Chrome
我的应用程序中有一个加载旋转器动画,当它执行重js时,在FF和IE中一直冻结,但在chrome中运行良好,当执行重js时。
我做了一个活塞来演示这个问题。由于在不同浏览器上的性能不同,我做了三个不同的。它们之间唯一的区别是重复项目的数量。不确定它是否也依赖于计算机,在这种情况下,也许你可以改变项目的数量来获得一个小的性能影响。
在这个Chrome版本中,当我重新填充列表时,spinner动画一直在旋转,即使你可以看到它需要一段时间才能更新ng-repeat。
在这个FireFox版本和IE版本中,当列表被重新填充时,微调器会停止动画。
css:.spinner-container {
position: absolute;
top: 40%;
left: 50%;
}
#preloader {
margin: 0 auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid red;
border-right: 1.1em solid red;
border-bottom: 1.1em solid red;
border-left: 1.1em solid green;
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
#preloader,
#preloader:after {
border-radius: 50%;
width: 80px;
height: 80px;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
有谁知道这是为什么,也许是解决方案吗?
当然,我们将尝试重构"繁重的js执行",但这可能需要一段时间,如果有一个合适的加载旋转器就好了。
谢谢
这是预期的行为,这是浏览器在单线程内渲染的方式。Chrome(确切地说是Webkit浏览器)在这方面有所不同,这就是为什么它们通常被称为"快速"answers"响应"的原因。本文对此进行了总结。
你可能想把cpu密集型任务委派给web worker。
相关文章:
- IE/Chrome中未定义的函数,但Firefox中没有
- 滚动在Chrome中有效,但在Firefox或IE中无效
- CKeditor预览插件.js,为Chrome和IE进行编辑.因为它拒绝CSS样式
- 如何编写在Chrome和IE中正常工作的JavaScript
- document.images未加载在chrome或firefox上,但已加载在IE上
- Javascript赢得'不能在IE上编译,但可以在Chrome上运行
- IE与Chrome的怪癖模式
- Json到CSV下载,可以在chrome中工作,但不能在IE浏览器中工作
- Jquery selectmenu组合框在IE和Chrome中每当按钮打开时就会关闭
- 以下颜色更改功能在IE9和Firefox中运行良好,但在早期的IE或Chrome中则不然
- window.opener not working in chrome & IE
- HTML5视频无法在chrome上工作,在服务器上托管后的IE,mov文件中的视频(quicktime格式)
- Iframe加载调整大小在Chrome中工作,但不能在IE或Firefox中工作
- AngularJS$http.post没有'不适用于Chrome,仅适用于IE
- Javascript'元素'在ie中未定义,但在chrome和firefox中运行良好
- Multi-platform (Chrome, IE, Firefox)
- Javascript在JS Fiddle中工作,但在Chrome / IE中不起作用
- jQuery:$.getJSON对Chrome/IE上的数据进行排序
- 输入元素在Firefox中没有定义,但在Chrome/IE中有
- 下拉JavaScript的onClick事件不触发Chrome/IE