iOS Safari使用"-webkit-transform"耗尽内存

Question

http://jsfiddle.net/ES4xG/8/使大多数视网膜设备崩溃.

iOS Safari"轻松"耗尽内存并在使用某些-webkit-transform指令时崩溃.这种方法提供了令人印象深刻的图形,但尤其是在视网膜显示器上,似乎消耗了大量内存并导致崩溃.

上面的演示显示的文本显示150次,否则将在PC浏览器上正常运行:

字体大小和元素数量被夸大以引起崩溃.的-webkit-transform: translate3d(0,0,0)意图强制每个元件的GPU加速绘图.

在实际应用中,我们使用translateX,Y,Z,scale和其他人,似乎被连接到GPU使用相同的方式.还使用了图像和精灵,但它们没有直接连接到崩溃.

鉴于以上情况:

1)iOS Safari崩溃是一个错误吗？

2)插入Apple仪器内存监视器,虚拟内存攀升,似乎是崩溃的罪魁祸首.究竟是什么使用这个记忆？

3)是否有其他GPU加速方法不会占用大量内存？

Answer 1

它会崩溃,因为在您的示例中,所有硬件加速项的高度为257,025px.在我的测试中,似乎mobile-safari在崩溃之前可以处理大约20,000px的高度.

硬件加速是很棒的,但不要滥用它,因为它可以用于所有事情.

要通过您进行调试,您需要使用以下键从终端运行Mac上的Safari:

$> export CA_COLOR_OPAQUE=1 
$> export CA_LOG_MEMORY_USAGE=1
$> /Applications/Safari.app/Contents/MacOS/Safari

CA_COLOR_OPAQUE显示哪些元素被加速.CA_LOG_MEMORY_USAGE显示了用于渲染的内存量.

有关详细信息,请查看以下链接:

• http://www.html5rocks.com/en/mobile/optimization-and-performance/
• http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

Answer 2

尝试在要转换的元素的父元素上使用它

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

这样可以更好地改变你的元素

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;