使用 MathJax 进行 WebView 渲染非常慢答案

【问题标题】：WebView rendering with MathJax very slow使用 MathJax 进行 WebView 渲染非常慢
【发布时间】：2019-10-11 03:37:32
【问题描述】：

我将一个包含 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");
    }
}

【问题讨论】：

标签： android performance webview cdn mathjax

【解决方案1】：

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

一开始我会尝试避免网络请求。由于这是一个本地安装的应用程序，您可以将“MathJax.js”库作为资源与您的应用程序一起提供，这样您就可以节省网络请求。

<!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>
...

【讨论】：

库本身的大小几乎是 65 mb，所以我想避免在应用程序中添加整个库。
看来我们已经找到了罪魁祸首，这更是一个在本地加载它的理由。另一种方法是将 MathJax 库复制到您自己的网站并编写一个接口/api 来使用它。然后你会例如对您的网站进行 Ajax 调用，传递一个字符串并检索结果。这样你就完全不需要设备上的 MathJax 库了。
更新：尽管库很大，但我已经将它添加到应用程序中，并且渲染速度有了明显的提升。整个过程现在几乎是瞬间完成的。