在WebKit中有效循环大量固定位置图像的最佳方法是什么？
Tim*_*her 6 performance firefox gecko webkit google-chrome
我正在为我的家人在一个小网站上工作.我想做的其中一件事就是制作一个基本的'制作'定格动画视频.我可以组装它并将其上传到Vimeo或其他东西,但我认为这是一个使用HTML,CSS和Javascript的绝佳机会.
我已经完成了所有风格,我的JS正在工作等等,除了它在Chrome和Safari中表现得非常糟糕.有趣的是,它在Firefox中运行良好,我还没有在IE中支持它.我希望能够8以12每秒帧数的方式播放音乐,由于这个原因,我还没有费心去尝试.糟糕的表现不是那么的.目前我已大致3 fps使用Firefox(可接受,但不是我想要的),而在Chrome和Safari中,我大致得到了.6795 fps.
运行Chrome Profiler时,我得到以下(相关)输出.
99.96% 99.96% (program)
0.03% 0.03% (garbage collector)
0.01% 0.01% script.js:5:nextSlide
我之前从未使用过Profiler,但我相信这表明我的JS不是那么难以达到的性能.
我发布了一个测试页面,记录了您可以通过Chrome和Firefox访问的性能差异.
我还发现这似乎与循环的图像有关.虽然Chrome仍然比Firefox更耗电,但在Chrome和Firefox中循环使用不同的,更简单的图像似乎也能正常工作.
作为至少这个结论的进一步证明,虽然这是完全不可接受的,但是在运行图像之后,这里将进行演示convert -compress JPEG -quality 1.它们的循环效率更高,但质量当然很糟糕.
我在Chrome(16.0.912.63),Safari(5.1.2 (6534.52.7)),WebKit nightly(Version 5.1.2 (6534.52.7, r102985))和Mobile Safari(latest as of 2011/12/28)中运行了这些测试页面,只有Mobile Safari和FireFox一样.桌面浏览器在MacBook Pro上进行了测试.
2.7 GHz Intel Core i7
8 GB 1333 MHz DDR3
有趣的是,iPad 2上的Mobile Safari在渲染测试页时的性能与FireFox相同.虽然Mobile Safari基于WebKit,但在这种情况下它的表现完全不同.
降低setTimeout呼叫144从244似乎也没有做任何事情.我已经244完全随意地到达了这一点,因为很早就明白,与呼叫相比,显示器的时间似乎几乎没有直接对应.这让我相信我正在尽可能快地在每个浏览器上呈现幻灯片.
所以我的问题是,如何在WebKit中创建这个高性能？
Ces*_*ssa 12
您可以使用Chrome开发者工具下的时间轴标签调试Chrome中的网页效果.您的脚本的问题是您的重绘周期太昂贵,目前每帧重绘需要1.35秒.
糟糕的性能与jpeg图像的质量无关(尽管图像质量也会影响页面渲染时间).问题是您正在更新z-index,这会导致Chrome重新绘制所有图像,而不仅仅是下一帧(您有一个O(n)图像滑块网站!).
浏览器尝试执行最小可能的操作以响应更改,例如:对元素颜色的更改将仅导致元素的重新绘制.
更改元素z-index属性与从树中删除节点并向其添加另一个节点基本相同.这将导致元素,其子元素和可能的兄弟元素的布局和重绘.我的猜测是,在Chrome中,兄弟姐妹也被重新粉刷,这解释了可怕的表现.
解决此问题的方法是更新opacity属性而不是z-index.与之不同z-index,opacity它不会修改DOM树.它只告诉渲染器忽略该元素.该元素仍然在DOM中"物理"存在.这意味着只有一个元素被重新绘制,而不是所有兄弟姐妹和孩子.
CSS中的这个简单更改应该可以解决这个问题:
.making-of .slide#slide-top {
opacity: 1;
/* z-index: 5000; */
}
.making-of .slide {
position: fixed;
/* z-index: 4000; */
opacity: 0;
....
}
这就是结果,重绘从1.35秒到1毫秒:
编辑:
这是一个使用不透明度解决方案的jsfiddle,我还添加了CSS3过渡(只是为了好玩!)
有关浏览器渲染如何工作的更多信息:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
我看了一下你网站上的代码,发现了两个限制速度的东西.
1)在JavaScript中,您的超时时间约为1/4秒(244毫秒).这意味着您的最佳帧速率约为4 FPS(每秒帧数).这可以通过简单地减少延迟来匹配您实际想要的帧速率来解决. 我看到你最近的编辑解决了这一点,但我不想忽略它,因为它最终对于实现你想要的更高的帧速率至关重要.
2)您正在使用z-index控制哪个图像可见.在一般情况下,z-index处理允许对具有不同大小和位置的对象进行排序,以便您可以控制哪个对象在两个或多个对象重叠的位置处可见.在您的情况下,所有对象完全重叠,并且z-index方法工作正常,除了一个主要问题:浏览器不优化z-index处理,因此它们实际上处理每个帧上的每个图像.我通过创建一个使用了两倍图像的演示的修改版本来验证这一点 - FPS减少了近两倍(换句话说,显示整个集合花了4倍).
我一起破解了一种替代方法,在Chrome和Firefox下实现了更高的FPS(60或更高).它的要点是我使用display属性而不是操纵z-index:
.making-of .slide#other {
display: none;
}
.making-of .slide#slide-top {
display: inline;
}
和JavaScript:
function nextSlide() {
...
topSlide.id='other';
nextTopSlide.id='slide-top';
...
setTimeout(nextSlide, 1);
...
}
我也在HTML中做了一些更改,特别是包含id="other"在每个图像的标记中.
那么为什么WebKit这么慢？ 正如其他评论中指出的那样,您在Webkit上看到的极差性能似乎是Mac特有的.我对此最好的猜测是,Mac版的WebKit实际上并没有使用libjpeg的"turbo"版本(尽管事实上它被列在学分中).在你的测试中,JPEG解压缩很可能是门控因素,如果它实际上解压缩每一帧上的每个图像(很可能就是这种情况). libjpeg-turbo的基准测试显示减压速度提高了约5倍.这大致匹配您在Firefox和Chrome之间看到的差异(3 FPS与0.6795 FPS).
有关libjpeg-turbo的更多说明以及此假设如何解释您的其他一些结果,请参阅我的其他答案.