iOS Safari 内存使用“-webkit-transform”

Question

https://jsfiddle.net/ES4xG/8/ 使用了大量的内存。

iOS Safari 通过一些 -webkit-transform 指令使用大量内存。这种方法有助于提供更复杂的图形，但似乎会消耗大量内存，甚至可能导致崩溃。

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

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

In the real application, we are using translateX , Y , Z , scale and others that seem to be connected to GPU use in一样的方法。图像和精灵也被使用，但它们不直接连接到崩溃。

鉴于上述情况：

1. iOS Safari 使用大量内存甚至崩溃的原因是什么？

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

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

原文由 Zero Distraction 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它崩溃是因为在您的示例中所有硬件加速项目的高度为 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 显示了渲染使用了多少内存。

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

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

原文由 Andrey 发布，翻译遵循 CC BY-SA 3.0 许可协议

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;

原文由 Gildas.Tambo 发布，翻译遵循 CC BY-SA 3.0 许可协议