使用PhoneGap开发的iPad应用程序出现内存警告/崩溃问题

Question

我尝试了几种方法使用Phonegap制作单页面本地应用程序，并寻求一些通用的故障排除建议。

第一种方法：基本上是将不同页面和子页面加载到在索引页上的容器中，使用.load（）从页面加载页面片段而不是页面加载。

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

这两种方法机械上都可以很好地工作。问题似乎在于我的所有子页面都有一个画廊或2-6张图片，（所以总共有215多张图片，660 x 440），我已经使用jquery cycle和Touchwipe来激活手势滚动。画廊效果很好，但在大约浏览35个画廊之后，该应用程序总是收到内存警告级别1，然后2，最后崩溃。仪器中的内存使用率看起来还好……Ajax加载的片段版本保持在2兆字节左右，单页版始终保持在5兆字节左右。画廊由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");
            } 
        });  
    });
});

非常感谢您的建议，我都快被搞疯了。

- Transoptic

Answer 1

我认为问题与javascript无关，而与webkit可以在活动内存中维护的图像数量有关。这似乎与此问题相关：加载图像时崩溃 我的解决方案是使用那里提到的组合方法。首先，我使用带有背景图像的div来制作我的画廊。其次，我从一开始就将所有背景图像设置为空白GIF。当我显示一个子部分并激活一个画廊时，我使用jquery将css背景图像重写为实际的图像源，然后当我点击新的子链接时，我将其重置为使用空白GIF。这似乎将“活动”div背景图像的数量保持在3-7个左右，除了界面gfx外。同时，其他200多个具有背景图像的div在画廊中（无论如何都不显示）只是一个空白gif。

我认为这个问题通常与UIWebview的限制有关，而不是PhoneGap或jquery特定的东西。我不能确定这是最终的解决方案，但我能够在没有崩溃的情况下运行应用程序，我的Allocations Instrument中的实时字节数始终保持在1.3兆左右。

- Transoptic

Answer 2

乍一看，我没有发现任何问题。您可以尝试在打开下一个库时明确销毁jQuery Cycle画廊，看看是否有所帮助。

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

- jitter

---

谢谢查看，我也试过了。我首先在当前画廊中添加了一个类，比如“.active_gallery”，然后在导航点击事件的第一件事上具体销毁了那个“cycle”画廊，接着在设置新的当前周期画廊的所有代码之前移除了该类。但是还没有成功。似乎无论如何，在滑动35个画廊后，就会开始出现内存警告。使用ajax加载应用程序后，即使销毁“cycle”画廊，删除“wipe”处理程序等等，我仍然得到相同的结果。 - Transoptic