Valine 评论系统在文章在部分场合下卡顿

[ymd45921]

自检报告

第一步：查阅文档

• 在 Volantis 文档中搜索关键词，并未找到相关内容。
• 在 Hexo 官方文档中搜索关键词，并未找到相关内容。

第二步：测试原生代码

打开终端，执行下面的命令：

git clone https://github.com/volantis-x/demo.git && cd demo && npm i && hexo s

结果是否能够正常运行？

测试结果是：A or B

• A. 能正常运行，代表主题和当前环境配置都没有问题。
• B. 不能正常运行，代表主题或者环境配置有问题，建议在下方对应位置附上环境配置信息。

需要先运行相关命令拉取 submodule

问题描述

博客使用 Valine 作为评论系统，在某些特定场合下输入会卡顿甚至 Crash

经过简单测试，在包含有 MathJax 数学公式的页面会稳定出现这个问题

环境信息

主题版本

您当前使用的版本为：4.3.1 （Commit: a1264913aee369ba20b11a35271373863f918d1a）
这个 Commit 的 在某个版本的 Volantis 官网中使用过；

复现地址

• 文档官网源码本地运行存在异常。
• 文档官网源码本地运行不存在异常。请给出复现地址及源码仓库地址 _________________

拉取仓库 community，修改使用的评论插件为 valine，并加入一篇包含 Mathjax 数学公式的文章，尝试在评论区快速输入内容，可以感到明显的卡顿；修改配置文件打开打字机效果，可以看到动画明显的掉帧；但是在其他不包含数学公式的页面进行上述行为，则不会出现问题。

其他的复现地址：

• 我的博客：已尝试关闭打字机特效，但是没有改善
  • 这是一篇包含数学公式的文章：链接
  • 这是一篇不包含数学公式的文章：链接
• 社区官网上的一个博客：开启了打字机特效，可以看到明显的差别
  • 这是一篇包含了数学公式的文章：链接
  • 这是一篇不包含数学公式的文章：链接
    可以看到包含数学公式的页面的 Valine 评论的输入框有明显的卡顿

截图

相关截图

截图来自于社区官网的一个博客，它开启了打字机特效：

一个包含了数学公式的页面：

可以看到打字机的动画有明显的掉帧；大量的粒子密集地滞留在图片上

这是一个不包含数学公式的页面：

可以看到动画进行流畅，没有办法截取上图大量的密集的粒子

这是我的朋友访问我的博客相关页面尝试评论然后崩溃的样子：

因为我没有安装录屏成 gif 的工具所以就没有动画…… 虽然这截图说明不了什么但是确实是这样的（

浏览器、操作系统

操作系统： Windows 10 2004
浏览器：Chrome 89.0.4389.90 (64 Bit) / Chromium Edge 89.0.774.54 (64 Bit)

配置文件

配置文件

站点配置文件

拉取了社区文档的仓库之后没有修改这个配置文件。
可以复现这个问题。

主题配置文件

上述仓库拉取后，_config.volantis.yml 中修改过的部分

plugins:
  comment_typing:
    enable: true  

comments:
  service: valine

node.js & npm

node -v ; npm -v 输出的信息

v12.14.0
6.13.4

package.json

npm ls --depth 0 输出的信息

[email protected] D:\Workspaces\Hexo\community
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

[inkss]

这是一个历史遗留问题，可以尝试修改 valine 的源码，将它的公式渲染关闭

xCss/Valine#305

[ymd45921]

感谢，已经通过修改主题中的 valine.js 解决了

修改后的链接：https://cdn.jsdelivr.net/gh/45921/cdn-public@main/js/valine/min.js

[github-actions]

👋 Hello,
This issue has been marked as resolved. If there are other issues, please contact us with a new issue.

👋 您好，
此 issue 已经被标记为已解决，如果还有其它问题，请提出新的 issue 联系我们。