问题

现代文档网站通常依赖沉重的 JavaScript 运行时来显示静态文本。对于使用旧款手机、廉价笔记本电脑或处于 3G/4G 慢速连接的用户，这些网站可能需要几秒钟才能加载完成。设备的处理器在解析大型 JS 包时会感到吃力，导致“输入延迟”、动画卡顿以及糟糕的整体阅读体验。

为什么重要

技术文档应该是普遍可访问的。迫使处于新兴市场或硬件受限的用户下载并执行沉重的框架来阅读教程，会为学习制造不必要的障碍。轻量级的网站可确保您的产品信息可供所有人使用，无论其硬件配置或互联网速度如何。

方法

采用 HTML 优先 策略。docmd 采用零框架架构设计，确保在构建过程中将主要内容渲染为标准 HTML。这使浏览器的主要线程保持畅通，从而确保即使在廉价设备上也能实现平滑滚动和快速度的导航。

实施

1. 极简的运行时足迹

默认情况下，docmd 的核心 UI 不使用 React、Vue 或任何其他沉重的客户端框架。这种预渲染方法确保了初始“首次内容绘制 (First Contentful Paint)”几乎立即发生。为了保持这种性能：

• 限制自定义脚本：避免在 customJs 配置中添加大型第三方库。
• 使用原生浏览器功能：依靠标准 CSS 和 HTML5 元素，这些元素经过所有现代浏览器的高度优化。

2. 战略性插件管理

虽然 插件 增加了强大的功能，但它们可能会引入显著的性能开销。例如，Mermaid 插件 需要大型引擎来渲染图表。如果您的用户主要使用低端设备，请考虑使用静态图像代替客户端渲染的图表。

3. 响应式与优化的媒体

避免向移动用户发送尺寸过大的图像。使用 WebP 等现代格式，并考虑使用 <picture> 标签来更精细地控制响应式资产。

<picture>
  <source srcset="/assets/mobile-hero.webp" media="(max-width: 600px)">
  <img src="/assets/desktop-hero.webp" alt="功能概览" loading="lazy">
</picture>

使用 loading="lazy" 属性可确保仅在图像进入用户视口时才下载，从而节省慢速连接下的带宽。

4. 高效的搜索索引

docmd 生成限定范围的搜索索引，以保持较低的内存占用。然而，对于极大型站点，搜索插件 仍可能消耗大量内存。鼓励移动设备用户仅在必要时使用搜索栏，或按照 本地优先搜索指南 中的说明优化您的索引。

权衡

优先考虑低端设备的性能通常意味着避免使用“沉重”的交互功能，如复杂的 3D 可视化或大型客户端数据处理。这是一种刻意的设计选择，它重视 包容性和速度 超过视觉复杂性，确保您的文档对于尽可能广泛的受众来说始终是一个有用的资源。