Web应用程序内存泄漏的硬件加速

Question

我一直在使用PhoneGap / Cordova构建Web应用程序并且运行良好。

这些应用包含一系列幻灯片，用户可以滑动以进入下一张幻灯片。我一直在使用idangero swiper来实现这一目标。

一旦我尝试扩展我的应用以包含更多幻灯片，应用程序就会在XCODE上出现内存警告而崩溃。我把它缩小到CSS3中的硬件加速（下面）。我没有崩溃的幻灯片的 MAX 数量是22.一旦我添加了23，我就会收到内存警告并崩溃。

我把它缩小到了

.swiper-slide {
    background-color: #fff;

    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0);
  }

当我从下面的css中删除两个webkit变换时，应用程序编译并运行，但第一页上有白色屏幕闪烁，而像slideToggle这样的简单下拉动画会变得紧张。

idangero css

.swiper-container {
    margin:0 auto;
    position:relative;
    overflow:hidden;
    height: 768px;
    width: 1024px;
    z-index:1;

}

.swiper-slide {
    background-color: #fff;

    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0);
  }

.swiper-wrapper {
    position:absolute;
    width: 100%;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0s;
    -webkit-transition-timing-function:ease;

    -moz-transition-property:-moz-transform, left, top;
    -moz-transition-duration:0s;
    -moz-transform:translate3d(0px,0,0);
    -moz-transition-timing-function:ease;

    -o-transition-property:-o-transform, left, top;
    -o-transition-duration:0s;
    -o-transform:translate3d(0px,0,0);
    -o-transition-timing-function:ease;
    -o-transform:translate(0px,0px);

    -ms-transition-property:-ms-transform, left, top;
    -ms-transition-duration:0s;
    -ms-transform:translate3d(0px,0,0);
    -ms-transition-timing-function:ease;

    transition-property:transform, left, top;
    transition-duration:0s;
    transform:translate3d(0px,0,0);
    transition-timing-function:ease;


    transform: translate3d(0%,0,0) scale3d(1,1,1);
    -o-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;


}

.swiper-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;

}
.swiper-slide {
    float: left;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
}

示例html for 2“slide”

<div class="swiper-container">
            <div class="swiper-wrapper">

                <!-- Home (Page 1) = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
                <div id="home" class="swiper-slide" rel="bkg-home.jpg">
                    <div class="page">
                        <h1>TEXt HErE</h1>   
                        <h3>Header 3</h3>
                    </div><!-- /page -->
                </div><!-- /home -->

                <!-- Page 2 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  -->
                <div id="p2" class="swiper-slide" rel="bkg-2.jpg">
                    <div class="page">
                        <div class="menu-trigger"></div>
                        <h1 style="padding-top:17px;">MORE TITLES</h1> 
                        <div class="content">
                            <div id="table-of-contents">
                                <ul>
                                     <li><a href="#p3">Issue Overview </a></li>
                                     <li><a href="#p4">Content1</a></li>
                                     <li><a href="#p6">Content2</a></li>
                                     <li><a href="#p30">Content3</a></li>
                                     <li><a href="#p17">Content4</a></li>
            </ul>
                                </ul>
                            </div><!-- /table-of-contents -->

                        </div><!-- /content -->
                        <div class="header"></div><!-- /header -->
                        <div class="footer"></div><!-- /footer -->
                        <div class="footer-segment"></div><!-- /footer-segment -->
                    </div><!-- /page -->
                </div><!-- /p2 -->
       </div>
</div>

所以我似乎需要硬件加速CSS3以使应用程序顺利运行但似乎它也会导致崩溃。有没有人有一些代码可以让我的应用程序顺利运行但不会导致整个应用程序崩溃？

Answer 1

我会尝试两种不同的东西。

1 will-change

据推测，硬件加速的未来是新的will-change css属性。

https://dev.opera.com/articles/css-will-change-property/

.swiper-slide {
  background-color: #fff;
  -webkit-transform-style: preserve-3d;
  /* -webkit-transform: translate3d(0,0,0); */
  will-change: transform, top, left;
}

2 transforms are cheaper than positioning with top and left

我无法确定您在transition和top使用left的具体位置，但我会尝试替换top / left使用translateX()，translateY()或translate()。