Tampilan web Android lambat


174

Saya android webviewslambat. Ini ada di segalanya, mulai dari ponsel hingga 3.0+tablet dengan spesifikasi lebih dari cukup

Saya tahu bahwa tampilan web seharusnya "terbatas" tetapi saya melihat aplikasi web dilakukan dengan celah telepon yang harus menggunakan semua jenis CSS3dan JQuerysihir, semuanya berjalan dengan baik dan cepat

jadi saya kehilangan sesuatu, adakah myWebview.SPEEDHACK(1)yang bisa saya gunakan untuk mempercepat?

juga, kadang-kadang isi dari tampilan web saya hanya tidak memuat, bukannya memuat perlahan, itu hanya tidak memuat. Aset yang saya uji disimpan secara lokal, tidak ada kesalahan.


3
Sepertinya Anda perlu memposting beberapa kode.
Jasoneer

1
kemungkinan duplikat kinerja Android WebView
Ken White

1
@KenWhite kecuali pertanyaan ini memiliki lebih banyak jawaban, pertanyaan ini memiliki jawaban yang lebih baik dan lebih komprehensif, pertanyaan ini memiliki dua kali lebih banyak dilihat, kedua pertanyaan lebih dari dua tahun, versi android kedua pertanyaan yang diterapkan sudah usang ... apa tepatnya apakah Anda keluar dari menandai ini?
CQM

@CQM: Pertanyaan ini ditandai secara otomatis oleh sistem karena jawaban duplikat dari George Mays di bawah ini. Jika jawabannya dapat diulang kata demi kata sebagai jawaban untuk beberapa posting, salah satunya adalah duplikat dari yang lain. Pertanyaan yang ditautkan diposting (dan dijawab) pertama berdasarkan tanggal posting. Duplikat adalah duplikat, dan posting pertama adalah yang asli (dan jawabannya juga sebelumnya). Saya mendapatkan apa-apa dari menandai ini (dan tidak di tempat pertama).
Ken White

1
Juga, jangan gunakan acara klik di aplikasi Anda, itu menambahkan penundaan 300 ms untuk merespons pada setiap klik, untuk menentukan itu klik. Lebih baik gunakan touchstart saja. Saya telah membuat clickhandler yang menggunakan dua peristiwa dan mengambil peristiwa yang dipicu pertama. Saya menggunakan 'klik touchstart', jadi itu juga masih berfungsi tanpa layar sentuh.
Codebeat

Jawaban:


132

Itu tergantung pada aplikasi web yang sedang dimuat. Cobalah beberapa pendekatan di bawah ini:

Tetapkan prioritas render yang lebih tinggi (ditinggalkan dari API 18+):

webview.getSettings().setRenderPriority(RenderPriority.HIGH);

Aktifkan / nonaktifkan akselerasi perangkat keras:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    // chromium, enable hardware acceleration
    webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
    // older android version, disable hardware acceleration
    webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

Nonaktifkan cache (jika Anda memiliki masalah dengan konten Anda):

webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

46
Saya mengerti mengapa menetapkan prioritas render ke tinggi akan membuatnya lebih cepat. tapi mengapa mematikan cache?
Dimas Kotvan

39
Metode setRederPriority tidak digunakan lagi, lihat developer.android.com/reference/android/webkit/WebSettings.html
Victor Ionescu

6
Tautan yang benar untuk setRenderPriority ada di sini
Christopher Perry

2
Di mana saya meletakkan kode ini di Aplikasi saya? Tolong bantu - Saya memiliki masalah yang sama pada misi kritis WebView
Levchik

6
mengapa Anda mematikan cache?
Hassy31

52

Menambahkan ini android:hardwareAccelerated="true"dalam manifes adalah satu-satunya hal yang secara signifikan meningkatkan kinerja bagi saya

Info lebih lanjut di sini: http://developer.android.com/guide/topics/manifest/application-element.html#hwaccel


1
Ini hanya untuk API v11 / Android 3.x dan lebih tinggi
Ludwo

6
Hati-hati, ada hardware terbuka terkait bug yang dipercepat WebViews, seperti yang dinyatakan dalam pertanyaan stackoverflow.com/q/17059899/225341
Victor Ionescu

1
Saya perhatikan bahwa mematikan akselerasi perangkat keras sebenarnya membuat aplikasi saya lebih cepat. Dengan android:hardwareAccelerated="true"animasi 3D CSS, ada penundaan yang lama sebelum dimulai, menggulirkan DIV di dalam DIV yang dapat digulir lainnya tidak berfungsi, dan aplikasinya lebih tidak stabil.
Ernests Karlsons

1
nilai default adalah "true" jika Anda menetapkan minSdkVersion atau targetSdkVersion ke "14" atau lebih tinggi;
Vihaan Verma

37

Solusi bagi kami adalah sebaliknya. Kami menonaktifkan akselerasi perangkat keras hanya pada WebView (bukan pada seluruh aplikasi dalam manifes) dengan menggunakan kode ini:

if (Build.VERSION.SDK_INT >= 11){
    webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

Animasi CSS3 lebih lancar sekarang. Kami menggunakan Android 4.0.

Info lebih lanjut di sini: https://code.google.com/p/android/issues/detail?id=17352


4
Sayangnya, ini juga mencegah komponen video html5 bekerja = /
Ja 30ck

Tidak memperhatikan Kami menggunakan tampilan video untuk memutar video: untungnya kami hanya membutuhkan video layar penuh. Sebagai solusinya adalah mungkin untuk memiliki tampilan web transparan dan tampilan video diputar di latar belakang, meskipun saya tahu itu bukan hal yang sama.
Ena

1
Ada masalah lain dengan perbaikan ini. Saat menyentuh tampilan web grafik menjadi sedikit terganggu. Misalnya jika Anda memiliki gambar dengan cirle, Anda akan melihat kotak kecil (piksel) di atasnya, bukan garis halus. Saya dapat mengatakan bahwa dengan perbaikan Android 4.3 tidak ada gunanya, itu tidak memiliki masalah kinerja.
Ena

Maaf agak baru di android. Apakah ini dapat di-paste langsung di manifes android adalah bahwa file manifes adalah XML. Atau apakah ini seharusnya divalidasi dalam kode sumber saat memuat tampilan web. Maaf untuk pertanyaan noob.
xMythicx

1
Setelah menambahkan, dapatkan kesalahan iniWebView not displayed because it is too large to fit into a software layer (or drawing cache), needs 11534400 bytes, only 8294400 available
developer1011

14

Saya pikir yang berikut ini berfungsi paling baik:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
    webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

Android 19 memiliki mesin Chromium untuk WebView. Saya kira itu bekerja lebih baik dengan akselerasi perangkat keras.


1
Ini bekerja untuk saya di WebViews dengan animasi yang buruk dan pengguliran
kal

Apakah saya atau apakah 'orang lain' Anda melakukan hal yang sama dengan 'jika' Anda?
Codebeat

Erwinus satu untuk type_SOFTWARE dan Perangkat Keras lainnya
user2582318

9

Saya mengalami masalah yang sama dan saya harus mengatasinya. Saya mencoba solusi ini, tetapi pada akhirnya kinerjanya, setidaknya untuk scrolling tidak membaik sama sekali. Jadi, inilah workaroud yang saya lakukan dan penjelasan mengapa itu berhasil bagi saya.

Jika Anda memiliki kesempatan untuk menjelajahi acara seret, hanya sedikit, dengan membuat kelas "MiWebView", menimpa metode "onTouchEvent" dan setidaknya mencetak waktu di mana setiap peristiwa seret terjadi, Anda akan melihat bahwa mereka dipisahkan dalam waktu untuk (turun ke) 9ms jauhnya. Itu adalah waktu yang sangat singkat di antara berbagai peristiwa.

Lihatlah Kode Sumber WebView , dan lihat saja fungsi onTouchEvent. Tidak mungkin untuk ditangani oleh prosesor dalam waktu kurang dari 9ms (Teruslah bermimpi !!!). Itu sebabnya Anda terus-menerus melihat "Miss a drag saat kami menunggu respons WebCore untuk mendarat." pesan. Kode tidak bisa ditangani tepat waktu.

Bagaimana memperbaikinya? Pertama, Anda tidak dapat menulis ulang kode onTouchEvent untuk memperbaikinya, terlalu banyak. Tapi, Anda bisa "mengejeknya" untuk membatasi laju acara untuk menyeret gerakan, misalnya 40ms atau 50ms. (ini tergantung pada prosesor).

Semua acara sentuh seperti ini: ACTION_DOWN -> ACTION_MOVE ...... ACTION_MOVE -> ACTION_UP. Jadi kita perlu menjaga gerakan BAWAH dan ATAS dan memfilter tingkat MOVE (ini adalah orang jahat).

Dan di sini adalah cara untuk melakukannya (Anda dapat menambahkan lebih banyak jenis acara seperti sentuhan 2 jari, yang saya tertarik di sini adalah pengguliran satu jari).

import android.content.Context;
import android.view.MotionEvent;
import android.webkit.WebView;


public class MyWebView extends WebView{

    public MyWebView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    private long lastMoveEventTime = -1;
    private int eventTimeInterval = 40;

    @Override
    public boolean onTouchEvent(MotionEvent ev) {

        long eventTime = ev.getEventTime();
        int action = ev.getAction();

        switch (action){
            case MotionEvent.ACTION_MOVE: {
                if ((eventTime - lastMoveEventTime) > eventTimeInterval){
                    lastMoveEventTime = eventTime;
                    return super.onTouchEvent(ev);
                }
                break;
            }
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_UP: {
                return super.onTouchEvent(ev);
            }
        }
        return true;
    }
}

Tentu saja Gunakan kelas ini sebagai ganti WebView dan Anda akan melihat perbedaannya saat menggulir.

Ini hanya pendekatan untuk solusi, namun masih belum sepenuhnya diterapkan untuk semua kasus lag karena menyentuh layar saat menggunakan WebView. Namun itu adalah solusi terbaik yang saya temukan, setidaknya untuk kebutuhan spesifik saya.


Saya ingin menunjukkan bahwa kode sumber tampilan web yang Anda posting adalah dari 2010
CQM

Ini tidak berfungsi, tidak menggulung mulus, saya tidak bisa merasakan perbedaannya.
neevek

Saya telah menerapkan pengaturan ini hingga batas 80, tetapi sebenarnya sepertinya tidak meningkatkan kinerja tetapi tidak menangkap beberapa peristiwa pemindahan. Apa manfaatnya bagi Anda?
Ragnar

Telah membaca bahwa acara klik 6 kali lebih lambat daripada acara sentuh touchstart. Untuk menghindari keterlambatan, Anda dapat menggunakan $ ('tombol'). On ('klik touchstart', function () {action here; return false;});
Codebeat

Juga, jangan gunakan acara klik di aplikasi html Anda, itu menambahkan penundaan 300 ms untuk merespons pada setiap klik, untuk menentukan itu klik. Lebih baik gunakan touchstart saja. Saya telah membuat clickhandler yang menggunakan dua peristiwa dan mengambil peristiwa yang dipicu pertama. Saya menggunakan 'klik touchstart', jadi masih berfungsi tanpa layar sentuh.
Codebeat

9

Saya mencoba semua proposal untuk memperbaiki masalah kinerja render di aplikasi phonegap saya. Tapi tidak ada yang benar-benar berhasil.

Akhirnya, setelah seharian mencari, saya berhasil. Saya menetapkan dalam tag (bukan tag) dari AndroidManifest saya

<application android:hardwareAccelerated="false" ...

Sekarang aplikasi berperilaku dengan cara yang sama cepat seperti browser web saya. Sepertinya, jika akselerasi perangkat keras tidak selalu merupakan fitur terbaik ...

Masalah terperinci yang saya miliki: https://stackoverflow.com/a/24467920/3595386


2
Menonaktifkan akselerasi perangkat keras memang mengerikan bagi saya, tampilan web sangat lambat dalam bergulir
AbdelHady

5

Tidak ada jawaban yang tidak membantu bagi saya.

Akhirnya saya menemukan alasan dan solusi. Alasannya adalah banyak filter CSS3 (filter, -webkit-filter).

Larutan

Saya telah menambahkan deteksi WebView dalam skrip halaman web untuk menambahkan kelas "rendah kualitas" ke tubuh HTML. BTW. Anda dapat dengan mudah melacak WebView dengan mengatur agen-pengguna di pengaturan WebView. Kemudian saya membuat aturan CSS baru

body.lowquality * { filter: none !important; }

Canggung ketika 5 tahun kemudian ada sangat sedikit alasan untuk menggunakan tampilan web meskipun perangkat lebih cepat, kinerja yang lebih kompatibel dengan browser mobile telah sangat meningkat dan alasan lainnya. Terima kasih telah melihatnya!
CQM

@ CQM Saya memiliki masalah yang sama, saya menemukan solusi jadi saya ingin membagikannya :)
l00k

Saya hanya bercanda, ini adalah salah satu pertanyaan tertua saya, terima kasih lagi!
CQM

1
Tidak masuk akal bahwa ini adalah masalah pada 2016/2017. Tidak ada filter CSS yang menantang untuk GPU seluler mana pun.
Adam Leggett

4

Jika hanya ada beberapa komponen tampilan web Anda yang lambat atau lambat, coba tambahkan ini ke elemen css:

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

Ini adalah satu-satunya speedhack yang benar-benar berpengaruh pada tampilan web saya. Tapi hati-hati jangan sampai berlebihan! (Anda dapat membaca lebih lanjut tentang retas di artikel ini .)


1
Gunakan will-change: transform.
Adam Leggett


3

Jika Anda mengikat ke onclickacara tersebut, itu mungkin lambat di layar sentuh.

Untuk membuatnya lebih cepat, saya menggunakan fastclick , yang menggunakan acara sentuh yang jauh lebih cepat untuk meniru acara klik.


fastclick tidak lagi dikembangkan ... ya acara sentuh lambat dan saya hanya membutuhkannya untuk bekerja dan ditemukan dengan jquery masalah kecepatan dapat diselesaikan dengan menggunakan $('#').on('touchstart', function() {...});sebagai lawan dari onclick
CrandellWS
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.