Flutter ve Android yerel Web Görünümü
Önsöz
Google, flutter çapraz platform geliştirme çerçevesini başlattığından beri, çeşitli teknik forumlarda flutter heyecanlandırıldı.
Çapraz platform geliştirme söz konusu olduğunda, tartışmasız en ucuz çapraz platform geliştirme çözümü olan WebView'dan bahsetmelisiniz. Flutter'ın yerli gelişimle karıştırılabileceğini ve birbirlerini arayabileceklerini biliyoruz. Öyleyse, karma geliştirme yaparken, WebView kullanmamız gerekiyorsa, WebView'ı kendimiz uygulamak için yerel WebView'ı mı çağırmalıyız yoksa flutter mı kullanmalıyız? WebView'ı kendiniz uygulamak için flutter kullanırsanız, performansı yerelle karşılaştırıldığında nasıldır? Bugün android'i birkaç farklı boyuttan test etmek için örnek olarak alacağız!
Flutter WebView uygular
Flutter resmi olarak bir WebView bileşenine sahip değildir, ancak güçlü forum geliştiricilerin ihtiyaçlarını dikkate alır ve flutter'da WebView kullanımını kolaylaştırmak için bir eklenti geliştirir.
Pubspec.yaml dosyasında entegrasyon yöntemi çok basittir:
bağımlılıklar: çarpıntı: sdk: flutter flutter_webview_plugin: ^ 0.3.0 + 2Sonraki tüm karşılaştırmalar Android'in yerel WebView ve flutter_webview_plugin eklentilerine dayalıdır. Kesinlik adına üçüncü taraf WebView karşılaştırılmaz.
Test telefonu: Xiaomi 8SE
Sistem: Android 8.1.0
Yükleme hızı karşılaştırması
Web sayfasının açılma hızını test etmek için, yalnızca WebView web sayfasını ne zaman yüklemeye başladığına ve web sayfasının ne zaman yüklendiğine ilişkin zaman damgasını almanız gerekir. Zaman damgaları arasındaki fark, web sayfasının açıldığı zamandır. Günlüğü Android yerelinde karşılık gelen konumlarda yazdırırız ve flutter:
webView? .webViewClient = nesne: WebViewClient () { eğlenceli onPageStarted geçersiz kılın (görünüm: WebView ?, url: String ?, favicon: Bitmap?) { Log.d (TAG, "onPageStarted:" + System.currentTimeMillis ()) super.onPageStarted (view, url, favicon) } eğlenceli onPageFinished (görünüm: WebView ?, url: String?) { Log.d (TAG, "onPageFinished:" + System.currentTimeMillis ()) super.onPageFinished (görünüm, url) } } Kodu kopyala flutterWebViewPlugin.onStateChanged.listen ((state) { if (state.type == WebViewState.finishLoad) { print ('finishLoad:' + DateTime.now (). millisecondsSinceEpoch.toString ()); setState (() { isLoad = false; }); } else if (state.type == WebViewState.startLoad) { print ('startLoad:' + DateTime.now (). millisaniyeSinceEpoch.toString ()); setState (() { isLoad = true; }); } }); Kodu kopyalaFarkı daha belirgin hale getirmek için daha karmaşık bir yükleme karşılaştırması seçiyoruz.Şebekenin yükleme hızı üzerindeki etkisini azaltmak için cep telefonunu aynı ağa bağlıyor, 10 test yapıyor ve ortalama değeri alıyoruz.Ayrıca WebView'ı kapatmamız gerekiyor. Önbelleğin yükleme hızını etkilemesini önlemek için önbellek:
webView? .settings? .cacheMode = WebSettings.LOAD_NO_CACHE Kodu kopyala WebviewScaffold ( anahtar: _scaffoldKey, url: widget.url, clearCache: doğru, appCacheEnabled: yanlış, . . . ); Kodu kopyalaAşağıdaki, yazar tarafından 10 test için elde edilen verilerdir:
Flutter_webview_plugin'in aynı ortamda yükleme hızının yerel WebView'unkinden biraz daha hızlı olduğu görülebilir, ancak fark açık değildir ve temelde göz ardı edilebilir.
Sonuç: flutter_webview_plugin'in yükleme hızı, yerel WebView'den biraz daha hızlıdır.
Bellek ayak izi karşılaştırması
Bellek kullanımını test etmek için AndroidStudio ile birlikte gelen profil oluşturucu aracını kullanabilirsiniz. Taobao ana sayfasını ve Sina ana sayfasını açmak için flutter programına yerel WebView ve flutter_webview_plugin'i entegre ediyoruz. Bellek kullanımı aşağıdaki şekilde gösterildiği gibidir:
Ardından Taobao ana sayfasını açmak için Web Görünümü'nü kullanın:
Taobao ana sayfasını açmak için flutter_webview_plugin kullanın:
WebView ile açılan Taobao ana sayfasının hafızasında temelde bir değişiklik olmadığı, ancak flutter_webview_plugin ile açılan Taobao ana sayfasının hafızasında önemli bir artış olduğu ve büyük ölçüde dalgalandığı görülebilir.
Sonuç: flutter_webview_plugin, yerel Web Görünümünden daha fazla bellek kaplar.
HTML5 uyumluluk karşılaştırması
Tarayıcının uyumluluğu puanlanabilir. Test sırasında, yerel WebView ve flutter_webview_plugin puanlarının aşağıdaki gibi olduğu bulunmuştur:
Xiaomi 8SE cep telefonlarında, yerel WebView ve flutter_webview_plugin'in html5 uyumluluk puanlarının her ikisinin de 501 olduğu bulundu.
Sonuç: Yerel WebView ile flutter_webview_plugin arasında html5 uyumluluğunda önemli bir fark yoktur.
sonuç olarak
Sırasıyla yerel WebView ve flutter_webview_plugin'i web sayfası yükleme hızı, bellek kullanımı ve html5 uyumluluğu açısından karşılaştırdık ve yerel Web Görünümünün daha az bellek kapladığını ve web sayfası yükleme hızı ile html5 uyumluluğu arasında önemli bir fark olmadığını gördük.
Fiili kullanımda, flutter_webview_plugin pencere öğesi ağacında bulunmadığından, flutter_webview_plugin'de atıştırmalık çubukları, diyaloglar ... gibi bu tür bildirim etkileşim widget'larını kullanamazsınız. Ancak flutter_webview_plugin'in çapraz platform avantajları vardır.Aynı anda flutter projesinde hem Android hem de iOS'ta WebView kullanmanız gerekiyorsa flutter_webview_plugin kullanmanız önerilir, aksi takdirde native WebView kullanmanız önerilir.
Umarım herkes aktif olarak tartışır, değerli deneyimlerinizi paylaşır ve birbirini geliştirir!
Ek bilgi:
Android gelişmiş
Mobil mimar
Bu Android eğitim materyallerine ve röportaj materyallerine ihtiyaç duyan herkesin ilgiye ihtiyacı var + özel mesaj "Android materyallerini" ücretsiz olarak yanıtlıyor!
Ayrıca grupta, ileri düzey kullanıcı arayüzü, performans optimizasyonu, mimar kursları, NDK, hibrit geliştirme: ReactNative + Weex ve diğer Android teknik bilgi mimarisi video materyalleri ve kariyer planlaması dahil olmak üzere üst düzey Android hakkında birçok ücretsiz öğrenme materyali bulunmaktadır. Ve röportaj rehberliği.
