我正在努力寻找一种使CSS页面转换在google chrome中表现良好的方法.
在时间线上的Chrome开发人员工具中,我注意到一些红色的标记,他们都说同样的事情：长帧时间表明可能导致性能下降和渲染性能差.阅读更多关于渲染性能的Web基础知识指南.
在我正在工作的应用程序上,这似乎是合法的,我试图调查,但找不到来源.
我做了一个更简单的演示,我仍然得到红色的标记：http://codepen.io/anything/full/qOOpza/
.page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#ccc;
&--1 {
background:green;
}
&--2 {
background: yellow;
}
&.moveToRight {
animation: moveToRight ease .5s;
animation-fill-mode: forwards;
}
&.moveToLeft {
animation: moveToLeft ease .5s;
animation-fill-mode: forwards;
}
}
@keyframes moveToRight {
from { }
to { transform: translateX(100%); }
}
@keyframes moveToLeft {
from { }
to { transform: translateX(0); }
}
解决方法
我一直在玩ytour演示,我发现2个问题：
首先,从翻译到translate3d的改进(至少在我的系统中)有一点点表现.所以写这个
@keyframes moveToRight {
from { transform: translate3d(0%,0px,0px); }
to { transform: translate3d(100%,0px); }
}
更好. (这已经被告知了好几次,但总是很好的检查).
另外,一个新的财产应该有所帮助.设置
意志变化
应准备浏览器以便将来更改此属性.但是我看不出有什么区别.
其次,Chrome收集统计资料的方式似乎有问题.
您已启用“屏幕截图”.这似乎是延迟的主要原因,Chrome需要渲染和存储截图的时间.
根据定义,执行工作所需的时间不应在分析中计算.但这似乎并非如此,我会说这是一个错误.
至少在我的情况下,改变这两个问题会使红色标记几乎消失
而在其余标记的框架中,似乎没有任何性能问题.请注意,屏幕截图中帧长度为25.57 ms,但cpu时间为1.239 ms.
