jquery - PhoneGap iPad 应用出现内存警告/崩溃

Question

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

第一种方法: 它基本上是一堆不同的页面和子页面，用 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 兆左右。