内存警告/PhoneGap iPad 应用程序崩溃

Question

我尝试了几种方法来使用 Phonegap 制作单页本机应用程序，并且正在寻求一些有关故障排除的一般建议。

第一种方法： 它基本上是一堆不同的页面和子页面，它们用 jquery 加载到索引页面上的容器中。因此，没有页面加载，只需使用 .load() 将页面片段从页面加载到 shell 中。

第二种方法： 我制作了一个包含所有内容的单页 html 页面，然后根据将导航项的类与内容容器的 id 匹配来显示和隐藏该页面。

这两种方法在机械上都能正常工作。问题似乎在于我所有的子页面都有一个画廊或 2-6 张图片，（所以我总共有超过 215 张图片，660 x 440），我使用了 jquery 循环，并且Touchwipe 可通过手势激活滚动。画廊工作正常，但在滚动浏览大约 35 个画廊后，应用程序总是收到 1 级内存警告，然后是 2 级，然后崩溃。我在仪器中的内存使用似乎还可以……加载 ajax 的片段版本保持在 2 兆字节左右，单页机始终保持在 5 兆字节左右。画廊由 div 中的 CSS 背景图像组成，因为这似乎比标签表现更好。

我没有看到任何内存泄漏，或者内存警告之外的任何其他问题。我有点卡在如何追踪这个问题上。我已经彻底地反复试验了。已将 javascript 减少到最基本的要求。随着时间的推移，某些东西似乎正在积累。

关于如何弄清楚发生了什么的任何想法？是否有一些首要方法可以确保导致某种类型的内存泄漏的 javascript 没有发生任何事情？

令人沮丧的是，除了在 iPad 上，整个事情都运行良好。

我的下一个策略可能是在不使用时尝试将图库背景图像重写为空白 gif。

这是我用于单页机的代码：

$(document).ready(function(){

    document.addEventListener('touchmove', function(e){ e.preventDefault(); });

    $('div#mainpages > div').hide(); 

    $("ul#mainnav li").click(function() {
        $("#mainpages > div").hide();
        var navClass = $(this).attr('class');
        var target='#'+navClass;
        $(target).show();
        $('[id^=subpages] > div').hide(); 
        $(target).find('[id^=subpages_] div:first').show();
    });


    $('[id^=subnav] li').click(function() {

        $('[id^=subnav_] li').removeClass('current');
        $('[id^=subpages_] > div').hide();

        var subnavClass = $(this).attr('class');
        var subtargeted='#'+subnavClass;
        $(subtargeted).show();

        $(this).addClass('current');  

        $(subtargeted+' .gallery_div_shell').cycle({
            timeout: 0,
            speed: 700,
            speedIn: 300,
            speedOut: 300,
            fx: 'scrollHorz'
        }); 

        $(subtargeted+' .gallery_div_shell').touchwipe({
            wipeLeft: function() {
                $('.gallery_div_shell').cycle("next");
            },
            wipeRight: function() {
                $('.gallery_div_shell').cycle("prev");
            } 
        });  
    });
});

感谢您的建议，我正在拔头发。

Answer 1

我认为问题与 javascript 无关，而与 webkit 可以在活动内存中维护的图像数量有关。好像和这个问题有关：Crashing when loading images

我的解决方案是结合使用那里提到的东西。首先，我为我的画廊使用带有背景图像的 div。其次，我开始将所有背景图像设置为空白 GIF。当我显示一个小节并激活一个画廊时，我使用 jquery 将 css 背景图像重写为实际的图像源，然后当我单击一个新的子链接时，我将其重置为使用空白 GIF。除了接口 gfx 之外，这似乎一次将“活动”div 背景图像的数量保持在 3-7 个。同时，画廊中其他 200 个左右带有背景图像的 div（无论如何都没有显示）只是一个空白 gif。

我认为这个问题通常与 UIWebview 的限制有关，而不是特定于 PhoneGap 或 jquery 的问题。我不确定这是最终的解决方案，但到目前为止我能够运行应用程序而不会崩溃，并且我在分配工具中的实时字节始终保持在 1.3 兆左右。

Answer 2

乍一看，我没有发现任何问题。当您打开下一个时，您可能会尝试显式销毁 jQuery Cycle 库，看看是否有帮助

$(youridentifier).cycle('destroy');