问题

许多现代文档工具依赖于沉重的 JavaScript 框架(如 React 或 Vue)来渲染静态文本。这些框架会为您的初始页面加载增加数百 KB 的体积,迫使浏览器在网站变得完全可交互之前下载、解析并执行大量代码。这导致了加载速度缓慢,并在低端设备上出现“点击无效(ghost clicks)”的情况。

为什么重要

大型 JavaScript 有效载荷直接影响“可交互时间 (TTI)”。在技术文档中,用户需要快速获得答案,任何由沉重的框架初始化引起的延迟都是显著的可用性障碍。保持有效载荷较小,可确保搜索、导航和主题切换从页面出现的那一刻起就是瞬时的。

方法

docmd 的核心客户端逻辑采用 零框架 (Zero-Framework) 架构。通过利用原生 JavaScript 和浏览器 API 而不是沉重的虚拟 DOM,我们将标准站点的总 JS 有效载荷保持在 20KB 以下。这种轻量级的基石确保了在所有设备和网络条件下都能获得最佳性能。

实施

1. 利用原生浏览器 API

避免为简单任务导入 jQuery 或 Lodash 等沉重的库。现代浏览器拥有强大的原生 API,几乎可以处理任何与文档相关的需求,且开销为零。

// docmd.config.js
export default {
  // ✅ 使用小巧、专用的脚本,而不是沉重的库
  customJs: ['/static/js/my-custom-logic.js']
};

2. 战略性插件管理

虽然 插件 增加了强大的功能,但某些插件会显著增加您的 JavaScript 有效载荷。例如,Mermaid 插件 需要大型客户端库来渲染图表。仅在对您的内容至关重要时才启用沉重的插件,并考虑它们对整体页面重量的影响。

3. 延迟加载非关键脚本

如果您需要包含第三方服务(如分析或反馈组件),请确保它们异步加载或延迟加载,以免阻塞文档的渲染。

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

4. 优化资源

确保您提供的任何自定义 JavaScript 都经过压缩。docmd 处理其核心资产的压缩,但您需要负责优化添加到 static/ 目录中的任何文件。

权衡

使用原生 JavaScript 构建复杂的交互功能可能比使用声明式框架需要更多的手动工作。然而,对于文档而言——其中 95% 的内容是静态文本和图像——零框架方法带来的性能收益远超沉重框架带来的开发便利性。