使用css 3转换的iOS webkit内存使用率高

我们使用css 3转换来构建一个UI，该UI包含可以滑动和翻转的元素。当我们使用这些样式并将其应用于元素时，我们会发现safari mobile内存使用率很高：

-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);

具体来说，大量额外的图形对象，CG光栅数据，正在创建中。我们通过xcode使用仪器看到了这一点：

0   0x13087b000 VM: CG raster data  00:03.300.465   •   7.28 MB CoreGraphics    CGDataProviderCreateWithCopyOfData

当元素未应用这些样式时，这是内存分配配置文件：

0   0x12a6a5000 VM: CG raster data  00:03.290.109   •   7.28 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
1   0x1239e9000 VM: CG raster data  00:03.289.774   •   1.65 MB CoreGraphics    CGDataProviderCreateWithCopyOfData

0   0x13087b000 VM: CG raster data  00:03.300.465   •   7.28 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
1   0x133c2f000 VM: CG raster data  00:03.306.677   •   6.32 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
2   0x131bbe000 VM: CG raster data  00:03.302.266   •   6.32 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
3   0x1335e3000 VM: CG raster data  00:03.305.898   •   6.30 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
4   0x132fe1000 VM: CG raster data  00:03.304.956   •   6.01 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
5   0x1315bc000 VM: CG raster data  00:03.301.709   •   6.01 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
6   0x130fc2000 VM: CG raster data  00:03.301.151   •   5.98 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
7   0x12d7ba000 VM: CG raster data  00:03.299.443   •   5.98 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
8   0x132210000 VM: CG raster data  00:03.303.152   •   5.69 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
9   0x12ddb4000 VM: CG raster data  00:03.299.949   •   5.68 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
10  0x1327c1000 VM: CG raster data  00:03.304.192   •   5.40 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
11  0x132d27000 VM: CG raster data  00:03.304.679   •   2.73 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
12  0x12e363000 VM: CG raster data  00:03.302.855   •   2.58 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
13  0x12d5e8000 VM: CG raster data  00:03.299.246   •   1.82 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
14  0x1239e9000 VM: CG raster data  00:03.307.642   •   1.65 MB CoreGraphics    CGDataProviderCreateWithCopyOfData

当元素应用这些样式时，我们会看到以下内存分配配置文件：

0   0x12a6a5000 VM: CG raster data  00:03.290.109   •   7.28 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
1   0x1239e9000 VM: CG raster data  00:03.289.774   •   1.65 MB CoreGraphics    CGDataProviderCreateWithCopyOfData

0   0x13087b000 VM: CG raster data  00:03.300.465   •   7.28 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
1   0x133c2f000 VM: CG raster data  00:03.306.677   •   6.32 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
2   0x131bbe000 VM: CG raster data  00:03.302.266   •   6.32 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
3   0x1335e3000 VM: CG raster data  00:03.305.898   •   6.30 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
4   0x132fe1000 VM: CG raster data  00:03.304.956   •   6.01 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
5   0x1315bc000 VM: CG raster data  00:03.301.709   •   6.01 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
6   0x130fc2000 VM: CG raster data  00:03.301.151   •   5.98 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
7   0x12d7ba000 VM: CG raster data  00:03.299.443   •   5.98 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
8   0x132210000 VM: CG raster data  00:03.303.152   •   5.69 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
9   0x12ddb4000 VM: CG raster data  00:03.299.949   •   5.68 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
10  0x1327c1000 VM: CG raster data  00:03.304.192   •   5.40 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
11  0x132d27000 VM: CG raster data  00:03.304.679   •   2.73 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
12  0x12e363000 VM: CG raster data  00:03.302.855   •   2.58 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
13  0x12d5e8000 VM: CG raster data  00:03.299.246   •   1.82 MB CoreGraphics    CGDataProviderCreateWithCopyOfData
14  0x1239e9000 VM: CG raster data  00:03.307.642   •   1.65 MB CoreGraphics    CGDataProviderCreateWithCopyOfData

看起来safari mobile webkit正在为每个变换创建一个图形对象。两种情况下的第一个和最后一个核心图形对象是相同的

我们在chrome和iOS上的safari上都看到了这种行为。我们在桌面safari或chrome上看不到这一点，在android chrome上看不到这一点

有没有人遇到过这个问题，有没有人知道一种可以保留变换的修复方法

编辑： 我们注意到了这一点，因为我们将元素设置为不透明度0，但没有隐藏。我们猜测在android和桌面上已经进行了优化，当不透明度为0时删除图形对象，但在iOS上的webkit上没有应用相同的优化