Skip to main content

复杂工程的实践测试

git : http://deve.work:33333/colin/mde.git

commit : c61827061d6a34cbd2ca2fae62b59fcb780f192e

prompt : 在vscode里面打开一个markdown非常慢,每次打开一个文件都要白屏很久

fix commit : 3e64dfab0643fecc583bb1e77467373d7e43854e

答案:

  1. Lute 双重加载 (3.8MB)
    1. 之前的代码在 <script> 的 onload 回调里才设 id="vditorLuteScript"。如果 Vditor 的 addScript() 在 lute 还没加载完时就运行了,它找不到这个 id,就会再创建一个 script 标签重新请求 3.8MB。
    2. 修复:用 window.__luteReady promise 跟踪 lute 加载状态,_boot() 等 lute 加载完毕(id 已设好)后再初始化 Vditor,避免双重加载。
  2. Icons 同步 XHR (43KB)
    1. <script defer> 加载了 ant.js,但没有 id="vditorIconScript"。Vditor 初始化后调用 addScriptSync() 时找不到这个 id,就用同步 XHR 重新请求一遍——这会阻塞主线程。
    2. 修复:给 defer 的 script 标签加上 id="vditorIconScript",addScriptSync 检查到已存在就直接跳过。
  3. Loading 遮罩 1200ms 人工延迟
    1. 之前 Vditor ready 之后还要等 1200ms 才移除 loading 遮罩。
    2. 修复:ready 后立即移除。

结果:

  1. Opus4.7 经过非常多轮的尝试才修复,消耗大概500K的上下文

git : http://deve.work:33333/colin/mde.git

commit : 5b9134576b7a11b52dc1c7962d2827c487c698bc

prompt : 在 inline code 的元素的 内部开头和外部结尾 不显示光标。虽然可以在 进行输入。inling code 边界部分,应该能有两个光标,分别在 inling code内部和外部。但是现在是 内部开头和外部结尾 不显示光标。

fix commit : b234863461bed88652e6d6169f81ece3696416b6

答案:

根因找到了三个叠加的问题: 1. <code> 的行高和 marker 的行高不同(13.6 vs 16px),光标画到不同 y 2. marker 默认 overflow: hidden + width: 0,把光标 glyph 本身裁掉了 3. 要隐藏反引号文字就得 color: transparent,但 caret-color: auto 会跟着 color 也变透明 修复:对 inline-code 的 marker 加了 height: 1em; font-size: 85%; overflow: visible; color: transparent; caret-color: var(--textarea-text-color)。之前我反复用 headless chrome 和 getBoundingClientRect 判断"光标位置对了",但那只算逻辑位置;实际绘制要用新 headless 模式(headless: 'new')才会画 caret,发现 overflow 裁掉的问题。请重新跑 ./run-local-vditor-demo.sh 或在 VS Code 里 Reload Window 验证。

结果:

  1. Opus4.7 经过非常多轮的尝试才修复,消耗大概1M的上下文