uniapp Mathjax渲染，引发接口请求点击延迟

Liu_snmou

已于 2025-01-17 11:26:40 修改

阅读量262

点赞数 5

文章标签： uni-app

于 2025-01-17 11:19:25 首次发布

本文链接：https://blog.csdn.net/Liu_snmou/article/details/145202433

版权

uniapp 线上问题排查小程序

某天线上客户反馈，页面点击进入另一个详情页面非常慢。

线上我排查浏览器，看接口返回时长，发现正常，然后去做性能，分析，发现有接近50dom 1.6秒的渲染。
然后这些dom都是公式渲染，我在mathjax3.2统一用的 promise，都在微队列中了

promise
然后我的点击接口都是也是一个promise，所以在等dom渲染队列完成后，才能执行我们的功能点击。

问题已经找到了promise的排队，dom 公式渲染执行时间太长了，如何解决呢？

我这边是运用视口外的公司不渲染，做一个延迟，滚动到视口后做加载。
具体操作如下。
修改mathjax 公式渲染组件

isInViewport(element) {
				const rect = element.getBoundingClientRect();
				return (
					rect.top >= 0 &&
					rect.left >= 0 &&
					rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
					rect.right <= (window.innerWidth || document.documentElement.clientWidth)
				);
			},