vscode 内置 markdown 预览卡顿主因是未做节流与增量更新,全量解析+同步渲染重型内容;建议关闭自动预览、手动触发、限制渲染范围、减小预览尺寸并禁用冗余样式注入。

为什么内置 Markdown 预览一卡一卡的
VSCode 内置的 markdown.preview 渲染器用的是轻量 Webview,不走 Chromium,但也没做太多性能优化。它默认对每个文档都做完整解析 + 虚拟 DOM 构建 + 样式注入,遇到含大量数学公式、嵌套表格、长代码块或图片的文件,主线程很容易被阻塞。你敲一个字就卡半秒,不是电脑不行,是它没做节流和增量更新。
禁用自动刷新 + 手动触发预览
默认开启的 markdown.preview.autoShowPreviewToSide 和实时监听机制,会让每次光标移动、输入、甚至折叠代码块都触发一次预览重绘。这不是必须的。
- 在
settings.json中关闭自动预览:"markdown.preview.autoShowPreviewToSide": false - 改用快捷键手动触发:默认是
Ctrl+K V(Windows/Linux)或Cmd+K V(macOS),只在你确认编辑完成时才刷新 - 如果连这个都嫌慢,可完全禁用预览监听:
"markdown.preview.refreshOnSaveOnly": true
限制渲染范围,避开重型内容
内置预览对 Mermaid、LaTeX、HTML 块不做懒加载,全量解析会拖垮性能。尤其当文档里有 ```mermaid 或 $$...$$ 块时,解析器会同步执行 JS 渲染逻辑。
- 把 Mermaid 图形转成静态 PNG 后再插入(用
mermaid-cli提前导出) - 数学公式建议改用
markdown-preview-enhanced插件替代——它支持 KaTeX 异步加载,且能配置markdown-preview-enhanced.katexMacros缓存公式解析结果 - 避免在 Markdown 里直接写大段
<script></script>或内联style,这些会被 Webview 同步执行
别让预览吃掉整个窗口宽度
默认右侧预览会占满 editor group 宽度,导致 Chromium 渲染器(即使只是 Webview)要处理高分辨率布局计算。特别是外接 4K 屏或分屏工作时,重排版开销明显上升。
- 用
Ctrl+\将预览拆到独立 editor group,再手动缩小其宽度(拖拽分割线) - 或者在设置中加:
"markdown.preview.fontSize": 14,减小字体可降低行高计算压力 - 禁用不必要的样式注入:
"markdown.preview.styles": [],防止自定义 CSS 触发全局重绘
真正影响体验的往往不是“能不能预览”,而是“预览要不要每次都重算”。内置预览适合轻量笔记,一旦文档复杂度上升,就得主动放弃自动性,换回控制权——删掉一个勾选框,可能比装十个优化插件更管用。











