Cloudflare环境下开启Rocket Loader之后Katex失效问题

在博客部署到线上之后，发现Katex公式无法正常显示，而相同的Html文件在本地环境下是可以正常显示的。

其中解析的核心代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
window.addEventListener("DOMContentLoaded", () => {
    renderMathInElement(document.body, {
        delimiters: [
            { left: "$$", right: "$$", display: true },
            { left: "$", right: "$", display: false },
            { left: "\\(", right: "\\)", display: false },
            { left: "\\[", right: "\\]", display: true }
        ],
        ignoredClasses: ["gist"]
    });
})

通过添加日志发现是DOMContentLoaded事件没有触发。

但是一直没想到是什么原因，直到留意到了线上版本里<script>标签变成了形如<script type="d6a94c0af8a975daac5bee56-text/javascript">。

最终回想起来是Cloudflare开启了Rocket Loader。

Rocket Loader是Cloudflare的一个功能，用于异步加载JavaScript，以提高页面加载速度。

但是Rocket Loader可能会导致加载顺序变化从而导致某些JavaScript代码无法正常执行。

暂时关闭了Rocket Loader，问题解决。

也可以通过在标签里添加data-cfasync="false"来禁用Rocket Loader，不过考虑还需要修改主题，暂时不做修改了。