【Nanobrowser源码分析3】视觉篇： AI 是如何“看见”网页的？DOM 树简化与快照技术源码分析-优快云博客

欢迎回到《Nanobrowser 源码分析》系列。在上一篇中，我们探讨了 Nanobrowser 的多智能体协作架构。今天，我们将进入一个非常硬核的话题：视觉感知。

对于人类来说，看一眼网页就能找到“登录”按钮；但对于 AI 模型来说，面对动辄数万行的原始 HTML 代码，它会瞬间淹没在“噪声”中。Nanobrowser 是如何把复杂的网页“翻译”成 AI 能听懂的语言的？

在深入源码之前，我们需要理解两个痛点：

Token 爆炸：一个普通的电商商品页，原始 HTML 往往超过 100KB。如果直接塞给 LLM，不仅成本极高，还会因为超过上下文长度导致模型“失忆”。
视觉噪音：HTML 中包含大量的 <script>、<style>、无意义的 <div> 嵌套以及隐藏的埋点代码。这些对 AI 定位核心操作毫无帮助。

Nanobrowser 的核心方案是：DOM 蒸馏（Distillation）与无障碍树（Accessibility Tree）映射。

Nanobrowser 在 src/content/ 目录下实现了一套精密的过滤机制。其目标是：保留交互性，删除装饰性。

Nanobrowser 会遍历 DOM 树，并应用以下规则：

标签黑名单：直接剔除 script, style, svg, path, noscript 等不影响功能逻辑的标签。
不可见元素过滤：通过 getComputedStyle 检测 display: none 或 visibility: hidden 的元素。
属性清洗：只保留 id, class, href, placeholder, title 以及以 aria- 开头的属性。

对于冗长的文本节点，Nanobrowser 会进行截断或去重，确保 AI 能获取关键信息（如按钮文字、标题），同时节省 Token。

这是 Nanobrowser 聪明的地方。与其试图理解混乱的 <div> 布局，不如利用浏览器自带的无障碍树。

为什么选择 A11y Tree？

无障碍树是浏览器为屏幕阅读器（供视障人士使用）准备的。它天然地提取了页面的语义：哪个是按钮（Role: button），哪个是输入框（Role: textbox），哪个是导航栏（Role: nav）。

JSON

// AI 看到的简化快照示例
{
  "nodeId": "12",
  "role": "button",
  "name": "提交订单",
  "attributes": { "disabled": false }
}

在 src/content/vision/snapshot.ts（参考路径）中，Nanobrowser 实现了一个“快照生成器”。

为了让 AI 能够模拟点击，快照中不仅包含文本，还必须包含坐标（Bounding Box）。

计算位移：源码调用 getBoundingClientRect() 获取元素在视口中的绝对位置。
坐标校准：考虑到滚动条的位置，Nanobrowser 会实时修正这些坐标，确保 Navigator 智能体发出的 click(x, y) 指令精准无误。

Nanobrowser 并不是每一秒都在重新解析页面。它利用了 MutationObserver API。