Android的webview後期渲染

我已經寫了一個應用程序主要是在JS（Mootools）和HTML，它是加載到webview在我的應用程序。Android的webview後期渲染

這只是一個HTML文件，該文件被添加或移除nodisplay類顯示或隱藏頁面的某些部分（要素）：

.nodisplay {display:none} 
function showPage1() 
{ 
    $$('.pages').addClass('nodisplay'); 
    $('page1').removeClass('nodisplay'); 
}

在安卓4（XPERIA弧和GALAXY NOTE 2）我看到一個奇怪的後期渲染，但我不知道舊版本的行爲。當我隱藏一個元素並顯示另一個元素時，它看起來是正確的，但在滾動過程中，舊元素的某些部分會以毫秒顯示並立即消失。這就像不可見區域的渲染延遲到繪製時刻。

而且有時它只是在隱藏和顯示過程中發生奇怪的閃爍。

在PC上的鉻，它沒有任何問題。即使在AVD中，它也非常鋒利，沒有任何眨眼。

我不知道這是Android的問題，如果有任何方法可以克服它？！我試過android:hardwareAccelerated="false"|"true"，沒效果。以及ws.enableSmoothTransition()也不解決問題。

來源

2012-12-16 Ali

Ajay答案給了我一些我在另一個項目中使用的東西，所以我可以使WebView背景透明。直到現在我還不知道代碼會關閉硬件加速。我在這個項目中測試了代碼的和平，並且沒有後期渲染。儘管滾動頁面並不像以前那麼流暢，但它比後期渲染要好。

這是解決這一切的代碼：

if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

順便說一句，這就像定義android:hardwareAccelerated="false"不影響webview！

來源

2012-12-26 10:59:21 Ali

Downvoters不知道他們在說什麼。硬件層上的WebView對頁面重排非常不利，這在Android 4.2中仍然存在。在軟件層上的WebViews可以更快速地重排和重新渲染，但在其他方面性能卻差得多，比如說當你用css變換移動東西時。 – Hristo

.nodisplay {height:0; display:none; }

在這裏工作了......

來源

2012-12-19 11:11:05 Toping

測試它，不工作。 – Ali

這裏是我的「在一個堆棧答案（第一版）修復您的WebView應用程序」：

性能

保持引用JS中的頁面元素可以提高性能。每次更改頁面時，$('.page1')必須解析DOM，並且這應該只發生一次。這也適用於$('.pages') - 它必須掃描&對多個元素執行操作。相反，我建議你保持活躍的頁面參考。也許這應該是這個樣子：

function showPage(page) { // receive active page; page is the jQuery ref to the next page 
    activePage.addClass('nodisplay'); // activePage is the jQuery ref to the previous page 
    page.removeClass('nodisplay'); // show the page 
}

您應該掃描您的整個應用和解決這類問題。他們似乎不是什麼大事，但我相信他們可以在資源有限的移動操作系統中發揮重要作用。

DOM管理

如果你沒有準備好，你一定要使用模板。除了幫助您管理您的應用，模板還可以幫助保持DOM儘可能輕量級：而不是有100個頁面元素，您可以從0開始，並在需要時動態創建它們。爲了實現最佳性能，請確保您僅渲染每個模板一次 - 渲染前檢查該頁面是否已存在於DOM中。看看這會如何影響你的應用程序只是谷歌「瀏覽器迴流」。

這個工作有很多工具。考慮到您目前的設置，您可以選擇：http://mootools.net/forge/p/template。以下是其他一些選項： http://mustache.github.com/,http://underscorejs.org/#template,http://api.jquery.com/category/plugins/templates/。

也很重要，但十分廣闊。有些事情要記住：