提高iPad上的CSS3速度

iOS总体上倾向于使用CSS3转换，动画，转换等。哪些IMO是该技术的一些最佳功能。提高iPad上的CSS3速度

现在，我听说你可以通过抛出一些随机3D变换来欺骗iOS来初始化它的硬件加速，而不是。所以我转换了一个随机的div，并把它放在屏幕上（甚至没有隐藏它），并且这个体验还是一团糟......

有什么方法可以改善CSS3转换，转换，动画等的性能。在iOS上？或者，Web应用程序注定要成为原生应用程序的可塑解决方案？

编辑：这是有问题的代码...

http://www.abhi.my/sl/html/

只要按照这个链接，你会看到一个小的演示我放在一起......上观看时，动画是光滑的和可以接受的桌面浏览器，在iOS在同一地点遭遇......这一个旨在为iPhone 4 ...

随意去通过源和点东西出来...

来源

2011-04-21 Abhishek

也许一些例子会很有用，那么人们可能会指出具体的优化。 – akamike 2011-04-21 14:33:42

CSS3将会很慢，因为它依靠浏览器来进行渲染，而CSS并不是那么快。我甚至注意到，如果你在一个元素上使用了很多盒子阴影属性，那么当你滚动它时，页面将会冻结。 CSS3很不错，但它还没有准备好“黄金时段” – Seth 2011-04-21 15:21:53

** @ akamike ** - 有一个链接可以用来查看我在说什么......在iOS上运行该网站，并繁荣。 ..悲伤的面孔周围...... ** @ Seth ** - 我发现很难相信（并不意味着你错了），CSS3的表现更糟的是这个javascript动画。差异在桌面上出现，CSS3在我见过的一些例子中占据领先地位。我相信，在iOS上，设备运行在降频速度下，只有3D请求允许时钟向上扩展，因此提高了性能... – Abhishek 2011-04-22 01:29:52

3D变换是在iOS上进行硬件加速，所以a你必须做的就是在你使用3D语法的时候使用它，而且它的性能很好 - 至少在3GS及更高版本上。

但是你没有在你的例子中使用变换，你正在使用一个位置的过渡，这是完全不同的，是的 - 在移动上导致蹩脚的FPS。相反，你应该使用-webkit-transform：translate3d（-100％，0,0）（或合适的模拟）。你可以看到这是多么平滑这是从the example in this page.

来源

2011-04-21 16:42:34

完成后，您可以链接到示例代码...希望它有帮助你，反过来，我...... :-) – Abhishek 2011-04-22 01:29:04

真棒，感谢您的链接，它竟然是真正有用的...将再次问我是否卡住... – Abhishek 2011-04-22 04:08:15

你一定要使用-webkit转换而不是-webkit转换。有了这个说法，对于跨浏览器支持和易用性，我肯定会使用诸如jQuery Transit之类的插件，使您可以在iOS以及Android和其他移动设备上轻松创建流畅的，本机状态的转场和效果。

Example JSFiddle of jQuery Transit in action

代码示例：

HTML：

<div class="moveMe"> 
    <button class="moveUp">Move Me Up</button> 
    <button class="moveDown">Move Me Down</button> 
    <button class="setUp">Set Me Up</button> 
    <button class="setDown">Set Me Down</button> 
</div>

的Javascript：

$(".moveUp").on("click", function() { 
    $(".moveMe").transition({ y: '-=5' }); 
}); 

$(".moveDown").on("click", function() { 
    $(".moveMe").transition({ y: '+=5' }); 
}); 

$(".setUp").on("click", function() { 
    $(".moveMe").transition({ y: '0px' }); 
}); 

$(".setDown").on("click", function() { 
    $(".moveMe").transition({ y: '200px' }); 
});

别人有漂亮的为你做了很多辛苦的工作。我无法忍受CSS3动画的修补，这个插件的功能非常出色。我已经通过iPad，iPod Touch，iPhone和Android测试过了。我喜欢它给出的本地感受。

来源

2013-03-11 16:24:05 ROFLwTIME

提高iPad上的CSS3速度

回答

相关问题