内存警告/崩溃与PhoneGap iPad应用程序 [英] Memory warnings/crashing with PhoneGap iPad app

问题描述

我尝试了几种方法，使用Phonegap制作一个单页原生应用程序，并寻求一些关于故障排除的一般建议。

I've tried several approaches to make a one-page native app using Phonegap, and am seeking some general advice on troubleshooting.

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

First approach: It's basically a bunch of different pages and sub-pages loaded with jquery into containers that live on the index page. So, no page loads, just loading page fragments from pages into a shell, using .load().

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

Second approach: I made a one-page html page with all content, then show and hide that based on matching the class of a navigation item to an id of a content container.

这两种方法都是机械加工。问题似乎在于，我的所有子页面都有一个图库或2-6个图像（所以我总共有215个图像，660 x 440），我使用jquery周期，触摸滑动即可使用手势激活滚动。画廊工作正常，但一些滚动通过约35画廊后，应用程序总是收到内存警告级别1，然后2，然后崩溃。我在仪器中的内存使用似乎确定... ajax加载片段版本保持大约2兆字节活字节，单寻呼机始终保持在大约5兆。这些图库由div中的CSS背景图片组成，因为这似乎比标签的性能更好。

Both approaches work fine mechanically. The problem seems to lie in the fact that all of my subpages have a gallery or 2-6 images, (so I've got a total of over 215 images altogether, 660 x 440) for which I've used jquery cycle, and Touchwipe to activate scrolling with gestures. The galleries work fine, but after some scrolling through about 35 galleries, the app always receives a memory warning level 1, then 2, then crashes. My memory usage in instruments seem ok... the ajax loaded fragment version stays around 2 megabytes live bytes, the one-pager stays consistently at around 5 meg. The galleries are composed of CSS background images in divs, as this seemed to perform better than tags.

我没有看到任何内存泄漏，或者内存警告之外的任何其他问题。我很抱歉如何跟踪这下来。我完成了试验和错误绝对死亡。已经减少了javascript到裸的必需品。似乎随着时间的推移，积累的东西。

I don't see any memory leaks, or really any other problems outside of the memory warnings. I'm kind of stuck on how to track this down. I've done trial and error absolutely to death. Have reduced the javascript down to the bare essentials. Something seems to be building up over time.

有关如何确定发生了什么的任何想法？有没有一些第一方法，以确保没有什么是与JavaScript导致一些类型的内存泄漏？

Any ideas on how to figure out what is going on? Are there some first-approaches to make sure nothing is going on with the javascript that's causing some type of memory leak?

这是非常令人沮丧的是，整个事情工作得很好，除了在iPad上。

It's very frustrating that the whole thing works pretty well, except on the iPad.

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

My next tactic might be to try to rewrite the gallery background images to a blank gif when they are not in use.

以下是我为单页传呼机使用的代码：

Here is the code I'm using for the one-pager:

$(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");
            } 
        });  
    });
});

感谢任何建议，我把我的头发拉出来。

Thanks for any advice, I'm pulling my hair out.

推荐答案

我认为问题与javascript无关，但与webkit可以在活动内存中维护的映像量有关。它似乎与此问题相关：加载图片时崩溃

I think the problem was not related to javascript, but related to the amount of images webkit can maintain in active memory. It seems related to this question: Crashing when loading images

我的解决方案是使用这里提到的组合。首先，我使用divs和背景图片为我的画廊。其次，我开始与所有的背景图片设置为一个空白的GIF。当我显示一个子部分并激活图库，我使用jquery重写css的背景图像到实际的图像源，然后当我点击一个新的子链接，我重置它使用空白的GIF。这似乎保持活动div背景图像的数量一次只有3-7，除了接口gfx。同时其他200左右的divs与背景图像在画廊（不显示）只是一个空白的GIF。

My solution was to use a combination of things mentioned there. First of all, I'm using divs with a background image for my galleries. Secondly, I'm starting out with all background images set to be a blank GIF. When I show a subsection and activate a gallery, I use jquery to rewrite the css background-image to the actual image source, then when I click a new sublink, I reset it to be use the blank GIF. This seems to keep the number of "active" div background-images to only 3-7 at one time, aside from interface gfx. Meanwhile the other 200 or so divs with background-images in galleries (not showing anyway) are just a blank gif.

我认为这个问题通常与UIWebview的限制有关，而不是与PhoneGap或jquery相关的。我不是积极的，这是最终的解决方案，但我可以运行应用程序，而不会崩溃到目前为止，我的活动字节在分配仪器保持恒定在1.3兆。

I think that this problem is related in general to limitations in UIWebview, rather than something specific to PhoneGap or jquery. I'm not positive that this is the final solution, but I am able to run the app without crashing so far, and my live bytes in the Allocations Instrument stays consistently around 1.3 meg.

这篇关于内存警告/崩溃与PhoneGap iPad应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！