Как повысить производительность JS draggable меню в WebView на Android

Ответ 1

В конце концов, это может быть не Javascript. Android WebView имеют довольно неожиданные проблемы с производительностью.

Попробуйте отключить все ненужные CSS и посмотреть, улучшится ли производительность. Если это так, вы можете повторно добавить стили CSS итеративно, чтобы найти виновника.

И не используйте какие-либо анимированные GIF файлы. Наш опыт в том, что это (как ни странно) резко сокращает производительность.

Ответ 2

Мое предложение состоит в том, что вы пишете перетаскивание самостоятельно. Это не сложно. Ключевая часть кода выглядит следующим образом:

var yourDomElement = document.getElementById("demoDrag");
yourDomElement.addEventListener("touchstart", function (e) {
    e.preventDefault();
    //todo
});
yourDomElement.addEventListener("touchmove", function (e) {
    //todo: 
});
yourDomElement.addEventListener("touchend", function (e) {
    //todo
});

Здесь вы можете найти много примеров кода (например,/assets/www/scripts/novas/framwork/nova.Carousel.js, а также scroller.js). Вы должны прочитать пример кода, чтобы узнать, как написать собственное "перетаскивание" .

Если вы все еще не знаете, вы можете связаться с нашей командой, чтобы завершить свою задачу за вас. Мы делаем телефонные приложения с очень хорошей производительностью.

Ответ 3

Как насчет того, чтобы использовать div с переполнением, установленным в auto, и затем применить это исправление, чтобы элементы могли прокручиваться

http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Короткая выдержка:

function touchScroll(id){
    var el=document.getElementById(id);
    var scrollStartPos=0;

    document.getElementById(id).addEventListener("touchstart", function(event) {
        scrollStartPos=this.scrollTop+event.touches[0].pageY;
        event.preventDefault();
    },false);

    document.getElementById(id).addEventListener("touchmove", function(event) {
        this.scrollTop=scrollStartPos-event.touches[0].pageY;
        event.preventDefault();
    },false);
}

Ответ 4

Мы пытались заставить iScroll работать плавно в телефоне-приложении на iPad (2/3), но мы не смогли этого сделать. Приблизитесь с приемлемой производительностью, даже несмотря на то, что все автономные примеры выглядят супер гладко. Наконец, мы закончили тем, что использовали -webkit-overflow-scrolling:touch. Я знаю, что вам нужно это для Android, поэтому я не могу сказать, насколько он хорош там, как на iOS6, но на iPad он работал как шарм.

Ответ 5

Если вы хотите ДЕЙСТВИТЕЛЬНО изменить ситуацию, я предлагаю вам мой подход:

Я выполнил функцию JavaScript для вызова другого WebView ( "дочерний веб-просмотр" ), который я бы использовал как iframe и заполнил контент, поэтому из приложения JS, которое я мог бы сделать:

insertWebView (x,y,w,h,"<div>.......</div>").

Вам нужно сделать одноразовую работу, чтобы стабилизировать способ общения с веб-сайтами, но вы получите эту идею. Ниже вы найдете источник моей функции insertWebView для вдохновения.

Улучшение было потрясающим, так как те крошечные iframe-webviews не только делали потрясающие, но и такие вещи, как светящийся overscroll, multitouch (теперь это разные веб-обзоры!) и т.д., обеспечивали почти собственный опыт.

Я также сделал расширение, чтобы использовать собственное перетаскивание между веб-просмотрами.

Вероятно, это было не очень эффективно с точки зрения памяти, но с точки зрения пользовательского опыта я считаю, что это стоило усилий тысячу раз.

Удачи!

public void insertWebView(int code, int x0, int y0, int w, int h, String url, int vertical, String initContent, String params, int alpha, int rot, int screenId) {

        PlasmaWebView webview1 = getWebView(code);

        if (webview1 != null) {
            if (Conf.LOG_ON) Log.d(TAG, "WEBVIEW: Reusing  webview " + code + " at " + x0 + "," + y0 + "," + w + "," + h + " vertical " + vertical+", rot="+rot);
            webview1.setVerticalScrollBarEnabled(vertical == 1);
            webview1.setHorizontalScrollBarEnabled(vertical != 1);
            webview1.move(x0, y0, w, h, Funq.this);
            if ((alpha>0) && (alpha<100)) webview1.setAlpha((float)alpha/100);
            webview1.setRotation((float)rot/10);
            webview1.handleTemplateLoad(url, initContent);
            return;
        } 

        if (Conf.LOG_ON) Log.d(TAG, "WEBVIEW: Insert webview " + code + " at " + x0 + "," + y0 + "," + w + "," + h + " vertical " + vertical + " url " + url+" alpha "+alpha+", rot="+rot);

        webview1 = new PlasmaWebView(Funq.this.getBaseContext(), code, vertical==1, useHardware, jvs, screenId);
        if ((alpha>0) && (alpha<100)) webview1.setAlpha((float)alpha/100);
        webview1.setRotation((float)rot/10);

        RelativeLayout.LayoutParams p=webview1.createLayout(x0, y0, w, h, Funq.this);
        layerContainer.addView(webview1, p);
        webview1.handleTemplateLoad(url, initContent);
    }