MathJax刷新页面后无法即时渲染问题排查及修复方案咨询

1. 异步加载顺序不稳定：MathJax和md-block都是异步加载的资源。首次打开页面时，md-block刚好在MathJax第一次扫描DOM前完成了Markdown转DOM的解析，所以公式能正常渲染；但刷新后浏览器缓存了资源，加载速度变快，MathJax会先完成初始化并扫描DOM，此时md-block还没生成包含公式的DOM节点，MathJax自然找不到要渲染的内容。
2. MathJax默认不处理动态DOM：MathJax默认只在页面初始加载完成时扫描一次DOM，对于md-block后续动态生成的内容，不会自动触发渲染，只能等它内置的定时重新扫描（间隔长达数分钟），所以刷新后要等很久才会恢复渲染。

通过监听md-block的渲染完成事件，手动触发MathJax重新渲染对应的内容，同时确保MathJax已经初始化完毕，修改后的代码如下：

<html>
    <!-- Markdown渲染模块 -->
    <script type="module" src="https://md-block.verou.me/md-block.js"></script>

    <!-- MathJax公式渲染模块 -->
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

    <script>
        // 等待MathJax初始化完成
        MathJax.startup.promise.then(() => {
            const mdBlock = document.querySelector('md-block');
            // 监听md-block完成Markdown解析的事件
            mdBlock.addEventListener('md-block-rendered', () => {
                // 让MathJax重新渲染这个md-block里的内容
                MathJax.typeset([mdBlock]);
            });
        });
    </script>

    <body>
        <md-block>
            Let's solve a simple second-order homogeneous linear differential equation with constant coefficients. One common example is:

            \[
            y'' - 5y' + 6y = 0
            \]

            To solve this, we'll find the characteristic equation by assuming a solution of the form \( y = e^{rt} \), where \( r \) is a constant. The derivative terms \( y' \) and \( y'' \) become \( re^{rt} \) and \( r^2e^{rt} \) respectively, leading to the characteristic equation:

            \[
            r^2 - 5r + 6 = 0
            \]

            This quadratic can be factored as:

            \[
            (r - 2)(r - 3) = 0
            \]

            So, \( r_1 = 2 \) and \( r_2 = 3 \) are the roots. Therefore, the general solution of the differential equation is:

            \[
            y(t) = c_1e^{2t} + c_2e^{3t}
            \]

            Here, \( c_1 \) and \( c_2 \) are constants determined by initial conditions, which are not given in this context. Thus, we have the general form of the solution.
        </md-block>
    </body>
</html>

这个方案的核心是利用md-block-rendered事件准确捕捉Markdown解析完成的时机，再调用MathJax的typeset()方法针对性渲染目标元素，既避免了加载顺序不稳定带来的问题，也不用等待MathJax的定时扫描。

内容的提问来源于stack exchange，提问作者Gregory