分析
意外发现博客的某篇文章在手机端打开的时候一直处于加载中的状态,但是点开其他文章却又是正常的,推断可能是前端页面在渲染的过程中遇到某些错误被中断了。
chrome 浏览器直接打开
mobile
模式还是能正常显示,无法完全模拟手机端的情况
复现
由于手机端的浏览器无法直接进行调试,需要通过 usb 连接到电脑,再使用 chrome 浏览器结合 pc 和手机端进行调试。
手机端调试接入的方式参考:
https://blog.csdn.net/weixin_32149443/article/details/112936241
这篇博文是转载的,且格式杂乱无章。。csdn的水文真是越来越多了,原文是 cnblog 的一篇文章,但是已经无法显示了,将就着看吧。
接入调试后发现,是文章内容在渲染的时候 jquery.js 抛出了错误,导致内容的渲染被中断了。
点进错误信息里面我们可以看到异常发生的具体是哪行代码,如下图
从上图的第二处可以看出,抛出异常的是 formatMath
这个方法,从注释和代码上来看,这个方法的具体作用可能是对文章内容中出现的一些公式做处理。
前期推测可能是传入的某一次循环中传入的
kateBlock
值为 null 对象,导致无法调用replaceAll
方法(该方法只有在字符串类型时才存在),也就是 Java 中经常遇到的空指针异常(没有在使用某个对象前对其值为空的情况做出处理)只是在 js 体现的不一样。
在渲染别的文章内容时基本没有触发引用 dealMathx
这个方法,所以这个问题也没有被发现。
解决
从 stackoverflow 这篇文章中得知,有可能是浏览器内核对 replaceAll
这个方法的兼容性问题导致的。
本篇文章中的安卓 chrome 版本是 78.x
,而不在官方给到的支持版本范围内,如下图