21

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

-webkit-transformiOS Safari 在使用某些指令时“很容易”耗尽内存并崩溃。这种方法提供了令人印象深刻的图形，但尤其是在视网膜显示器上，似乎只是消耗了大量内存并导致崩溃。

上面的演示显示了一个文本显示了 150 次，否则它可以在 PC 浏览器上正常运行：

字体大小和元素数量被夸大导致崩溃。-webkit-transform: translate3d(0,0,0)旨在强制每个元素的 GPU 加速绘图。

在实际应用中，我们使用translateX, Y, Z,scale和其他似乎连接到 GPU 的使用方式相同。图像和精灵也被使用，但它们不直接连接到崩溃。

鉴于上述情况：

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

2）插入Apple Instruments Memory Monitor，虚拟内存攀升，似乎是崩溃的罪魁祸首。究竟是什么在使用这个内存？

3) 是否有其他不会消耗大量内存的 GPU 加速方法？

4

3 回答 3

29

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

硬件加速很棒，但不要滥用它来做所有事情。

为了帮助调试它，您需要从终端使用以下键在 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 显示了渲染使用了多少内存。

请查看以下链接以获取详细信息：

于 2013-07-30T14:49:03.577 回答
7

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

-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;
于 2013-07-26T16:28:30.167 回答
-2

-webkit-transform谷歌浏览器在文本上运行 Javascript 动画几分钟后崩溃。我同时使用了rotate()和rotateZ()，并且，特别是当正在查看动画的文本时，操作系统报告的内存使用量飙升，直到Aw, Snap! 发生错误。

在 Windows 7 64 位下使用 Google Chrome 31.0.1650.63，Blink 引擎 537.36。

在 Firefox 25.0.1 上测试了相同的动画，它没有显示任何问题。

我什至认为 Tristan 引擎（我自己的 JS 库）存在严重的内存泄漏，但在 Developer > Timeline 内存图上检查并没有显示任何迹象。

在-webkit-transform图像或空 DIV 上设置不会显示此错误。

使用简单的 CSS2 属性（例如left:或top:不会显示此错误）为相同的文本设置动画。

已经在 Google 上提交了错误报告。我花了三个小时才弄清楚出了什么问题。

错误报告： https ://code.google.com/p/chromium/issues/detail?id=328245&thanks=328245&ts=1386906785

于 2013-12-13T07:55:36.120 回答