"-webkit-transform"的 iOS Safari 内存使用情况

Question

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

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

上面的演示显示了一个显示 150 次的文本，否则该文本将在 PC 浏览器上正常运行:

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

在实际应用中，我们使用的是translateX、Y、Z、scale等看似以相同的方式连接到 GPU 使用。图像和 Sprite 也被使用，但它们与崩溃没有直接联系。

鉴于上述情况:

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

2. 插入 Apple Instruments 内存监视器后，虚拟内存攀升，似乎是崩溃的罪魁祸首。到底是什么在使用这个内存？

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

Answer 1

它崩溃是因为在您的示例中所有硬件加速元素的高度都是 257,025 像素。在我的测试中，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