Android webview slow performance

Android webview slow performance

本文关键字:performance slow webview Android      更新时间:2023-09-26

我正在用javascript编写一款游戏。这个应用程序在我的浏览器上运行得很好(很快),但我有一些麻烦与android webview运行。

  1. 启动应用程序的时间需要5s或更长时间(我认为这有点慢,但也许这是正常的?)
  2. 在游戏的菜单中,我有一个方法:

    this.showCredits = function() {
    document.getElementById('core-credits-layer').style.display = 'block';
    document.getElementById('core-credits').style.display = 'block';
    var parent = this;
    $.ajax({
        url: 'content/credits.html',
        dataType: 'html',
        success: function(data, status, response) {
            var  now = new Date();
            var s = now.getSeconds()-parent.test.getSeconds();
            console.log('success ajax: '+s);
            document.getElementById('core-credits').scrollTop = 0;
            document.getElementById('core-credits').innerHTML = response.responseText;
            console.log('finished');
        },
        error: function() {
            console.error('failed fetch credits');  
        }
    });
    }
    

    所以控制台日志("finished", success()中的最后一行),在点击菜单"credits"后立即出现。但我可能需要6个月(或多或少)才能看到核心学分。在我的浏览器中,我点击后立即看到#core-credits。但是第二次点击那个菜单点的时候我得到了1-2s后面的div。我不知道这是什么,我不这么认为,这是一个缓存的东西,因为我进入success()回调非常快

Java:

    public void onCreate(Bundle savedInstanceState)
{
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    Context context = this.getApplicationContext();
    SharedPreferences wmbPreference = PreferenceManager.getDefaultSharedPreferences(this);
    boolean isFirstRun = wmbPreference.getBoolean("FIRSTRUN", true);
    if(isFirstRun) {
        this.copyAudioFiles(context);
    }
    WebView mWebView = (WebView) findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setDomStorageEnabled(true);
    mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    String data = context.getFilesDir().getPath();
    mWebView.getSettings().setDatabasePath(data+"data/"+this.getPackageName()+"/databases/");
    mWebView.getSettings().setAllowFileAccess(true);
    mWebView.setWebChromeClient(new WebChromeClient());
    String data_root = Environment.getExternalStorageDirectory()+"/"
        +this.getPackageName();
    mWebView.loadUrl("file:///android_asset/www/index.html?system=android&" +
        "data_root="+data_root);  
}

我在eclipse中的虚拟平板设备和真正的华硕平板电脑上都有这个性能问题。

动画(jquery show('slow'))有时真的很慢或坏了。例如(这是一款纸牌游戏),玩家在显示("慢")动画的情况下获得9张牌,每隔2或3次我就会获得3或8张牌,但不是9^^。

以上所有功能在chrome或firefox等浏览器上运行良好。我正在使用Android 4.1。

激活硬件加速没有帮助。有很多关于webview渲染问题的帖子,但都是关于硬件加速解决方案的,这并没有什么帮助。

在Android上使用HTML5/JS的Hybrid Mobile App框架开发了几个应用程序后,恐怕没有解决所有性能问题的灵丹妙药。一般来说,Javascript的性能不是问题,问题是频繁的,甚至可能是浪费的改变/修改DOM和过度使用CSS3效果,这会减慢FPS,就像Android上的box-shadow。

使用CrossWalk作为你的WebView组件,而不是使用现有的WebView组件,这可能会有所帮助。这意味着你可以在你的应用程序中获得最新版本的Chrome,而不必依赖于旧版本的系统WebView组件。您应该观察性能和稳定性的改进,因为您可以获得WebKit软件改进的所有好处。 https://crosswalk-project.org

其次,考虑使用一个避免频繁修改DOM的框架,比如React,它有一个虚拟DOM。

http://facebook.github.io/react/

React并不是唯一提供这种功能的框架,还有其他解决方案旨在提供这方面的性能改进,比如Famous。

http://famous.org

最后,对我来说,选择构建应用的框架是最重要的一步。尽管在改进浏览器性能方面进行了大量投资,但它们在不同领域的性能都是不同的,所以最好在一开始就做好准备,选择适合你想要解决的问题的框架。

感谢你可能已经从这个中走出来了,所以希望这个建议能帮助别人。

#lovejavascript, #hatebrowsers

在这种情况下忘记HW加速-它是一个虚假的朋友。在大多数情况下,它甚至比软件渲染还要慢。

但是有很多小事情你可以优化:

编写更快的javascript

  • 总是使用选择器缓存,在适用的情况下(在你的代码中应该只出现一次document.getElementById('core-credits'))
  • 组/解耦(见下一点或直接使用setTimeout)代码执行和DOM操作(总是触发对单个元素的重绘制,甚至更糟-文档的回流)
  • 在一些应用程序中,我看到了使用requestAnimationFrame Polyfill进行dom操作的良好结果-不一定会导致更高的帧率,但在我的情况下,它允许我正确地"抛出"一个openlayers映射(而不是设备只是不响应触摸)

Android友好

  • 就像intel appframework(以前的jqmobi ui)一样,大量使用css3转换,而不是尝试jquery风格的"tick"动画
  • 删除border-radius并使用透明的png方法
  • Android上的其他昂贵渲染应该是:(-webkit-)box-shadow,文本阴影和各种梯度(再次可以交换老派png的)

希望这有帮助-我会尽量详细说明,请。纠正信息,因为我目前在自己的应用程序中继续与android webview进行斗争。

您是否在清单中启用了硬件加速?: http://developer.android.com/guide/topics/graphics/hardware-accel.html ?

对于动画,尝试将此添加到元素css:

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

这是唯一一个真正对我的webview有影响的快速hack。但要注意不要过度使用!(您可以在本文中了解更多有关此黑客的信息。)

我还建议在css

浏览器必须在Dom更改中重新绘制ui。它对我们的桌面电脑影响不大,但确实阻碍了手机上的动画。你应该考虑使用css3转换,因为它们是由gpu处理的,性能更高。如果你不介意使用javascript库,我建议你试试famo.us它声称能够提供60fps的动画。这似乎确实是真的。