Android webview性能缓慢

Question

我正在用javascript编写游戏.这个应用程序在我的浏览器上运行良好(快速),但我用android webview运行它有一些麻烦.

1. 启动应用程序的时间需要5秒或更长时间(我认为这有点慢,但也许这是正常的？)

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');  
       }
   });
   }
   

   因此,在单击"信用"菜单后立即出现控制台日志("已完成",成功的最后一行()).但是在我看到div #core-credits之前,它可能需要6s(或多或少).在我的浏览器中,我点击后立即看到#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的渲染问题有各种各样的帖子,但只有硬件加速解决方案,这没有帮助.

Answer 1

在经历了在 Android 上使用 HTML5/JS 混合移动应用程序框架开发多个应用程序的过程后，恐怕没有一个灵丹妙药可以解决所有性能问题。一般来说，Javascript 性能不是问题，问题很频繁，甚至可能是对 DOM 的浪费性更改/修改，以及过度使用 CSS3 效果，这些效果会降低 FPS，就像 Android 上的 box-shadow 一样。

使用 CrossWalk 作为 WebView 而不是普通的 WebView 组件可能会有所帮助。这意味着您可以在应用程序中获取最新版本的 Chrome，而不必依赖旧版本的系统 WebView 组件。您应该会观察到性能和稳定性的改进，因为您可以获得 WebKit 软件改进的所有好处。

https://crosswalk-project.org

其次，考虑使用一个避免频繁更改 DOM 的框架，例如具有虚拟 DOM 的 React。

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

React 并不是提供此功能的唯一框架，还有其他旨在提供该领域性能改进的解决方案，例如 Famous。

http://known.org

最后，对我来说，选择构建应用程序的框架是最重要的一步。尽管在提高浏览器性能方面投入了大量精力，但它们在不同领域的性能各不相同，因此最好在一开始就对冲你的赌注，并选择适合你要解决的问题的框架。

感谢您可能已经摆脱了这一点，因此希望这个建议对其他人有所帮助。

#lovejavascript，#hatebrowsers

Answer 2

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