关于mathjax加载缓慢的解决方法

php小白，工作中的一个小需求就是解决公式加载的问题，期间遇到3个小问题，相信大家使用的时候也都遇到过，留个备份，也供大家参考

背景：

php7

yii2框架

自带标签，公式的文本内容

在view中修改模板文件main.php,我的办法是复制一份修改为自己需要的模板文件

1.mathjax加载出来的公式是块级元素，就是独占一行

解决方法：强制修改公式的样式为行内元素，标记为最重要！网页中所有的公式div 的class都是

MathJax_Display

.MathJax_Display {
    width: auto !important;
    display: inline !important;
}

2.mathjax默认不解析$公式$

解决办法：增加配置方法，把$加入进去，因为我的内容中有/( )/类型的，所有去掉后一个配置

MathJax.Hub.Config({
 tex2jax: {inlineMath: [['$','$']]}
});

3.页面加载时，会显示加载过程，就是从$$到块级元素到行内元素的过程，这是mathjax功能强大，体积过大所造成的渲染缓慢的问题，特别别扭

无法截图，用过的应该都见过

解决方法：隐藏渲染过程，用过元素类型display，但渲染后的页面出现问题，所以改用透明度opacity

先把body透明度设为0

</head>
<body style="opacity:0">

渲染完成改为1

MathJax.Hub.Queue(function () {
  document.getElementsByTagName("body")[0].style.opacity=1;
  
});

大功告成，现在的页面舒服多啦