iOS Safari使用“-webkit-transform”来耗尽内存。 [英] iOS Safari runs out of memory with "-webkit-transform"
问题描述
http://jsfiddle.net/ES4xG/8/ 会导致大多数视网膜设备崩溃。
http://jsfiddle.net/ES4xG/8/ crashes most retina devices.
iOS Safari在使用一些 -webkit-transform 指令时，容易出现内存不足和崩溃。这种方法提供了令人印象深刻的图形，但是，特别是在视网膜显示器，似乎消耗大量的记忆和导致崩溃。
iOS Safari "easily" runs out of memory and crashes when using some -webkit-transform instructions. This approach delivers impressive graphics but, especially on retina displays, just seems to consume a lot of memory and cause crashes.
上面的演示显示一个文本显示150次，否则在PC浏览器上正常运行：
The demo above shows a text displayed 150 times that would otherwise run normally on a PC browser:
字体大小和元素数量被夸大，导致崩溃。 -webkit-transform：translate3d（0,0,0）旨在强制GPU加速绘制每个元素。
The font size and number of elements is exaggerated to cause a crash. The -webkit-transform: translate3d(0,0,0) is intended to force GPU accelerated drawing of each element.
在实际应用中，我们使用 translateX ， Y ， code>， scale 和其他似乎以相同的方式连接到GPU使用。
In the real application, we are using translateX,Y,Z, scale and others that seem to be connected to GPU use in the same way. Images and sprites are also used, but they are not connected to crashes directly.
根据上述情况：
1）这是iOS Safari崩溃的错误吗？
1) Is it a bug that iOS Safari is crashing?
2）插入Apple Instruments内存监视器，虚拟内存上升，似乎是崩溃的罪魁祸首。
2) Plugging in Apple Instruments Memory Monitor, Virtual Memory climbs and seems to be the culprit of the crash. What exactly is using this memory?
3）有没有其他GPU加速方法，不会消耗大量的内存？
3) Is there any other GPU accelerated approach that would not consume a lot of memory?
推荐答案
它崩溃，因为所有硬件加速项目的高度是257,025px在你的例子中。在我的测试中，似乎移动safari可以处理大约20,000px高度之前，它崩溃。
It crashes because the height of all hardware accelerated items is 257,025px in your example. In my tests it appeared that mobile-safari can handle about 20,000px in height before it crashes.
硬件加速是真棒，但不要滥用它通过使用它的一切。
The hardware-acceleration is awesome but don't abuse it by using it for everything.
调试通过你将需要从终端上运行Safari的Mac上使用以下键：
To help debug it through you will need to run Safari on Mac from the terminal with the following keys:
$> export CA_COLOR_OPAQUE=1
$> export CA_LOG_MEMORY_USAGE=1
$> /Applications/Safari.app/Contents/MacOS/Safari
CA_COLOR_OPAQUE显示哪些元素被加速.CA_LOG_MEMORY_USAGE显示我们有多少内存用于渲染。
CA_COLOR_OPAQUE shows which elements are accelerated.CA_LOG_MEMORY_USAGE shows us how much memory is used for rendering.
有关详情，请查看以下链接：
Have a look at the following links for details:
- http://www.html5rocks.com/en/mobile/optimization-and-performance/ li>
- http://engineering.linkedin.com / linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5
- http://www.html5rocks.com/en/mobile/optimization-and-performance/
- http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5
这篇关于iOS Safari使用“-webkit-transform”来耗尽内存。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
