问题

许多现代文档工具依赖沉重的 JavaScript 框架(如 React 或 Vue)来渲染静态文本。这些框架会给初次页面加载额外增加数百 KB。浏览器必须先下载、解析并执行大量代码,站点才完全可交互。这会导致加载变慢,并在低端设备上出现"幽灵点击"。

为什么重要

庞大的 JavaScript 载荷会直接影响"可交互时间 (TTI)"。在技术文档场景中,用户需要快速得到答案。任何由重型框架初始化造成的延迟,都是一道显著的可用性鸿沟。保持载荷小,能让搜索、导航和主题切换都即时完成。

方法

docmd 在客户端核心逻辑上采用 零框架 (Zero-Framework) 架构。我们使用原生 JavaScript 与浏览器原生 API,而非重型 Virtual DOM,能让一个标准站点的总 JS 载荷保持在 20KB 以下。这种轻量基础为所有设备带来最大化的性能。

实现

1. 使用浏览器原生 API

避免为简单任务引入 jQuery 或 Lodash 这类重型库。现代浏览器提供了可靠的原生 API,几乎可以零开销地满足任何文档场景的需求。

  // 在 docmd.config.json 中添加自定义脚本
  customJs: ["/static/js/my-custom-logic.js"]

2. 策略性的插件管理

插件 能带来强大功能,但其中一些会显著增加您的 JavaScript 载荷。例如 Mermaid 插件 需要一个庞大的客户端库才能渲染图表。只有当这些重型插件对内容确实必要时再启用它们。

3. 延迟加载非关键脚本

如果您引入了分析或反馈小组件等第三方服务,请确保它们以异步或延迟方式加载。这样可以避免它们阻塞文档的渲染。

<!-- 放在自定义 head 注入中 -->
<script src="https://analytics.com/script.js" async defer></script>

4. 优化资源

确保您提供的任何 JavaScript 都经过压缩 (minified)。docmd 会对它自己的核心资源进行压缩,但添加到 static/ 目录下的文件则需要您自行优化。

取舍

使用原生 JavaScript 构建复杂交互功能,比使用声明式框架需要更多手工投入。但对于"95% 内容是静态文字与图片"的文档场景来说,零框架方案带来的性能收益远远超过重型框架所提供的便利。