Question

我编写了一个带有导航菜单的JS应用程序，该菜单使用transform属性的简单CSS过渡滑入视图。它在桌面浏览器和Android上表现良好。但是，在iPhone5 / iPhone6上，转换前后都有明显延迟，我无法解释或进一步诊断。

下面是一些其他背景，其次是截图，滑块CSS和原始结果的开销性能实验。寻找其他实验的指导我可能尝试或潜在的解决方案。

背景

单页JS应用程序使用Cordova / PhoneGap部署到移动设备
启动后，分配~2000个DOM元素，所有视图最多8000个
主视图是带有MapView背面（水平翻转div）的ListView
ListView有点忙于每行的onclick侦听器
NavMenu是一个包含菜单项列表的div
NavMenu最初隐藏在屏幕外变换100％左侧
NavMenu从左到右滑过50行ListView
将转换的纯CSS转换用于ListView
300毫秒的过渡可能需要花费3000毫秒才能完成
转换顺利，但在
使用transitionend事件声明转换完成

该应用的

原型可用here。

过渡前后的

屏幕截图 ...

这是滑块CSS。 NavMenu滑块初始化为类＆＃34;滑动控制滑动控制 - 转换打开右侧＆＃34;为实现转型，＆＃34;开放权利＆＃34;删除类，然后重新读取以再次隐藏菜单。

＆＃13;

/*
 * Base slide control element
 */

.slide-control {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 50;
    background-color: white;
}

/*
 * Transition on platforms that can support it
 */

.slide-control-transition {
    -webkit-transition: -webkit-transform 300ms;
       -moz-transition: -moz-transform 300ms;
        -ms-transition: -ms-transform 300ms;
         -o-transition: -o-transform 300ms;
            transition: transform 300ms;
}

/*
 * Background mask
 */

.use-mask {
    background-color: rgba(0,0,0,0.4);
}

/*
 * Initial state of slide control
 */

.open-right {
    -webkit-transform: translate3d(-100%,0,0);
       -moz-transform: translate3d(-100%,0,0);
        -ms-transform: translate3d(-100%,0,0);
         -o-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0);
}

＆＃13;

尝试了实验：

注意：原始性能结果显示以毫秒为单位的开销（超过300毫秒动画）。

注意：运行Mac OS X Sierra的MBP上的Firefox，运行IOS 10.x的iphone5 / 6。

**Baseline**:

  firefox:
        { name: openSlider,   count: 10,  average: 27,  values: 23,26,20,26,33,48,20,22,23,33 }
        { name: closeSlider,  count: 10,  average: 28,  values: 23,26,30,24,24,30,33,25,33,34 }

  iphone6:
        { name: openSlider,   count: 10,  average: 652,  values: 661,655,650,647,665,643,644,657,653,647 }
        { name: closeSlider,  count: 10,  average: 656,  values: 669,643,657,692,636,646,654,685,635,646 }

  iphone5:
        { name: openSlider,   count: 10,  average: 2227,  values: 2298,2154,2157,2143,2086,2908,2128,2160,2139,2095 }
        { name: closeSlider,  count: 10,  average: 2193,  values: 2121,2096,2100,2110,2147,2094,2115,2925,2129,2095 }


**White -> Transparent background:**

  firefox:
        { name: openSlider,   count: 10,  average: 33,  values: 36,34,33,54,49,20,32,31,21,22 }
        { name: closeSlider,  count: 10,  average: 32,  values: 42,37,36,27,29,27,27,39,24,30 }

  iphone6:
        { name: openSlider,   count: 10,  average: 677,  values: 711,702,677,667,673,672,653,682,666,669 }
        { name: closeSlider,  count: 10,  average: 670,  values: 687,704,660,659,660,657,668,664,657,681 }

  iphone5:
        { name: openSlider,   count: 10,  average: 2272,  values: 2977,2066,2107,2887,2076,2128,2081,2133,2133,2135 }
        { name: closeSlider,  count: 10,  average: 2248,  values: 2891,2075,2102,2084,2073,2878,2116,2104,2082,2077 }


**3D -> 2D transforms:**

  firefox:
        { name: openSlider,   count: 10,  average: 27,  values: 40,25,19,31,29,27,22,17,31,25 }
        { name: closeSlider,  count: 10,  average: 34,  values: 42,39,42,38,32,28,30,31,40,20 }

  iphone6:
        { name: openSlider,   count: 10,  average: 699,  values: 730,704,732,698,688,690,696,704,648,700 }
        { name: closeSlider,  count: 10,  average: 667,  values: 688,622,658,662,674,676,669,669,683,671 }

  iphone5:
        { name: openSlider,   count: 10,  average: 2190,  values: 2292,2183,2249,2162,2185,2162,2159,2130,2169,2209 }
        { name: closeSlider,  count: 10,  average: 2135,  values: 2135,2141,2309,2115,2107,2131,2098,2103,2110,2099 }


**Mask with default background:**

  firefox:
        { name: openSlider,   count: 10,  average: 31,  values: 37,34,30,32,28,24,31,30,32,29 }
        { name: closeSlider,  count: 10,  average: 27,  values: 17,38,22,34,24,29,20,25,30,30 }

  iphone6:
        { name: openSlider,   count: 10,  average: 652,  values: 692,665,653,644,651,644,648,650,641,634 }
        { name: closeSlider,  count: 10,  average: 643,  values: 619,653,639,639,646,658,641,644,639,648 }

  iphone5:
        { name: openSlider,   count: 10,  average: 2102,  values: 2200,2126,2122,2116,2066,2050,2107,2104,2076,2048 }
        { name: closeSlider,  count: 10,  average: 2086,  values: 2151,2076,2105,2075,2073,2077,2074,2076,2089,2065 }


**ListView with no gradient background: (small portion visible)**

  firefox:
        { name: openSlider,   count: 10,  average: 261,  values: 271,259,267,262,262,258,259,258,257,258 }
        { name: closeSlider,  count: 10,  average: 264,  values: 265,271,271,258,261,270,259,262,261,261 }

  iphone6:
        { name: openSlider,   count: 10,  average: 630,  values: 611,627,651,637,630,631,635,630,628,623 }
        { name: closeSlider,  count: 10,  average: 639,  values: 668,635,640,635,633,643,633,662,632,613 }

  iphone5:
        { name: openSlider,   count: 10,  average: 2097,  values: 2191,2111,2096,2100,2063,2057,2109,2056,2100,2091 }
        { name: closeSlider,  count: 10,  average: 2081,  values: 2074,2063,2080,2081,2068,2063,2179,2081,2061,2059 }


**Reduce ListView rows to only those visible:**

  firefox:
        { name: openSlider,   count: 10,  average: 24,  values: 19,31,24,22,18,33,30,18,22,18 }
        { name: closeSlider,  count: 10,  average: 27,  values: 24,29,33,27,18,31,29,21,22,33 }

  iphone6:
        { name: openSlider,   count: 10,  average: 250,  values: 250,261,249,240,259,245,264,237,253,243 }
        { name: closeSlider,  count: 10,  average: 260,  values: 250,265,251,255,270,269,276,256,249,255 }

  iphone5:
        { name: openSlider,   count: 10,  average: 511,  values: 565,515,508,492,511,496,495,501,512,514 }
        { name: closeSlider,  count: 10,  average: 517,  values: 522,517,517,515,519,518,515,514,514,515 }


**Reduce ListView rows to 0:**

  firefox:
        { name: openSlider,   count: 10,  average: 32,  values: 63,22,60,24,31,19,26,30,21,28 }
        { name: closeSlider,  count: 10,  average: 24,  values: 22,22,25,27,22,33,8,28,24,24 }

  iphone6:
        { name: openSlider,   count: 10,  average: 172,  values: 128,169,178,177,167,167,178,195,178,182 }
        { name: closeSlider,  count: 10,  average: 176,  values: 187,175,173,169,173,179,185,178,172,167 }

  iphone5:
        { name: openSlider,   count: 10,  average: 473,  values: 678,325,573,855,334,310,302,647,362,346 }
        { name: closeSlider,  count: 10,  average: 353,  values: 530,301,315,322,406,287,302,340,320,406 }


**Reduce ListView rows to 0 and remove gradient background:**

  firefox:
        { name: openSlider,   count: 10,  average: 22,  values: 19,34,30,22,2,19,32,20,22,20 }
        { name: closeSlider,  count: 10,  average: 25,  values: 3,28,31,33,23,27,25,20,30,25 }

  iphone6:
        { name: openSlider,   count: 10,  average: 183,  values: 133,270,173,205,174,190,169,175,164,176 }
        { name: closeSlider,  count: 10,  average: 171,  values: 159,171,175,170,182,174,171,170,168,169 }

  iphone5:
        { name: openSlider,   count: 10,  average: 261,  values: 271,259,267,262,262,258,259,258,257,258 }
        { name: closeSlider,  count: 10,  average: 264,  values: 265,271,271,258,261,270,259,262,261,261 }

摘要问题：

我可以运行哪些其他实验来获得一些好的线索？移动设备上的绘制/渲染/布局分析几乎是不可能的。无法使用最新的ios_webkit_debug_proxy / remotedebug_ios_webkit_adapter让Chrome Dev Tools在IOS上运行。我可以使用其他工具来获得一些见解吗？非常感谢您提供的有关这个难题的任何帮助，使得该应用在50％的目标设备上无法使用。

其他线索1：

该应用程序还有一个textarea用于用户评论。触摸/点击后弹出软键盘需要10-20秒。肯定发生了什么事！

其他线索2：

使用UIWebView，Xcode报告的工作集大小约为80mb。在WKWebView中交换将其减少到~40mb。但是，转换之前和之后的延迟没有变化。这让我相信它可能更多地是关于渲染工作而不是记忆压力。使用z-index单独分层过渡元素。但是，我想知道GPU管理（加载/卸载）是否更可能成为瓶颈。我非常喜欢管理GPU的最佳实践。

ListView上的导航菜单滑块执行不良

0 个答案: