使用MathJax进行WebView渲染非常慢

时间:2019-05-24 14:01:59

标签: android performance webview cdn mathjax

我正在将包含Tex格式数学的HTML字符串传递到WebView,该WebView使用MathJax库(通过CDN交付)来呈现网页。问题是,该应用需要很长时间才能完成整个过程。在具有良好wifi连接的我的Galaxy S7 edge上,要渲染甚至很短的字符串(例如$$ X ^ 2 $$)也要花费近2分钟。我的问题是,

  1. 程序的哪个部分实际上是造成这种延迟的原因?
  2. 如何改进它?

代码:

package com.example.mutas.mathjaxpilot;

import android.Manifest;
import android.content.DialogInterface;
import android.content.pm.PackageManager;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final String front = "<html>" +
                "    <head>" +
                "        <script src=\'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML\' async></script>" +
                "    </head>" +
                "    <body>";

        final String back = " </body>" +
                "</html>" ;


        final WebView webView = (WebView) findViewById(R.id.webView);
        final EditText editText = (EditText) findViewById(R.id.editText);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);


        editText.setOnClickListener(
                new EditText.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        String content = editText.getText().toString();
                        content = front + "\\( " + content + " \\)" + back;
                        webView.loadData(content, "text/html; charset=utf-8", "UTF-8");
                    }
                }
        );


        if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.INTERNET)
                != PackageManager.PERMISSION_GRANTED) {
            // Permission is not granted
            ActivityCompat.requestPermissions(MainActivity.this,
                    new String[]{Manifest.permission.INTERNET},
                    1);
        }
        //webView.loadUrl("file:///android_asset/test.html");
    }
}

1 个答案:

答案 0 :(得分:1)

很难说出是什么原因导致了这种延误。我要做的就是找出问题,逐步减少代码,直到除了启动空白应用程序外什么都没有。

一开始我会尝试的一件事是避免Web请求。由于这是本地安装的应用程序,因此您可以将“ MathJax.js”库作为资源随应用程序一起提供,这样可以节省Web请求。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    ...
    <script src="file:///android_asset/html/MathJax.js"></script>
</head>
...