CODEWITHSUNDEEP
androidperformancewebviewcdnmathjax
Mutasim Mim
Mutasim Mim

Reputation: 146

WebView rendering with MathJax very slow

I am passing an HTML string containing Tex-formatted math to a WebView, which uses the MathJax library (delivered through a CDN) to render the webpage. The problem is, the app takes a long time to complete this whole process. On my Galaxy S7 edge on a good wifi connection, it takes almost 2 minutes to render even a very short string, such as $$X^2$$. My question is,

  1. Which part of the program is actually responsible for such delay?
  2. How to improve it?

Code:

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

Upvotes: 1

Views: 1144

Answers (1)

martinstoeckli
martinstoeckli

Reputation: 24141

It is difficult to tell, what causes such delays. What I would do is to isolate the problem, reduce the code step by step, until it does nothing more than starting up a blank app.

One thing I would try at the very beginning is to avoid the web request. Since this is a locally installed app, you could deliver the "MathJax.js" library as resource with your application, this way you can spare the web request.

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

Upvotes: 1

Related Questions