使用 MathJax 渲染 WebView 非常慢

Question

我正在将包含 Tex 格式数学的 HTML 字符串传递给 WebView，它使用 MathJax 库（通过 CDN 提供）来呈现网页。问题是，应用程序需要很长时间才能完成整个过程。在我的 Galaxy S7 edge 上，wifi 连接良好，渲染一个非常短的字符串（例如 $$X^2$$）也需要将近 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");
    }
}

Answer 1

很难说是什么原因造成了这种延误。我要做的是隔离问题，逐步减少代码，直到它只启动一个空白应用程序。

一开始我会尝试的一件事是避免网络请求。由于这是一个本地安装的应用程序，您可以将 "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>
...

使用 MathJax 渲染 WebView 非常慢

WebView rendering with MathJax very slow

performance

android

cdn

webview

mathjax