企业官网建设流程全解析

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

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

一、 为什么 AI 不能直接读 HTML？

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

1. Token 爆炸：一个普通的电商商品页，原始 HTML 往往超过 100KB。如果直接塞给 LLM，不仅成本极高，还会因为超过上下文长度导致模型“失忆”。

2. 视觉噪音：HTML 中包含大量的<script>、<style>、无意义的<div>嵌套以及隐藏的埋点代码。这些对 AI 定位核心操作毫无帮助。

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

二、 核心技术 1：DOM 树的“瘦身”艺术

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

2.1 常见的过滤策略

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

• 标签黑名单：直接剔除script,style,svg,path,noscript等不影响功能逻辑的标签。

• 不可见元素过滤：通过getComputedStyle检测display: none或visibility: hidden的元素。

• 属性清洗：只保留id,class,href,placeholder,title以及以aria-开头的属性。

2.2 文本压缩

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

三、 核心技术 2：基于无障碍树（A11y Tree）的感知

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

为什么选择 A11y Tree？

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

源码实现逻辑：

1. 节点标注：Nanobrowser 会给页面上每一个“可交互元素”分配一个唯一的nano-id。

2. 语义提取：通过读取元素的role属性和aria-label，为 AI 构建一个类似 JSON 的页面快照。

JSON

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

四、 核心组件：快照（Snapshot）技术源码分析

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

4.1 坐标映射机制

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

• 计算位移：源码调用getBoundingClientRect()获取元素在视口中的绝对位置。

• 坐标校准：考虑到滚动条的位置，Nanobrowser 会实时修正这些坐标，确保 Navigator 智能体发出的click(x, y)指令精准无误。

4.2 变化检测

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

• 逻辑：只有当 DOM 发生重大变化（如 URL 跳转、弹窗弹出）时，才会触发新的快照生成。

• 意义：这极大地降低了本地 CPU 的占用，也减少了与 LLM 的通信频率。

五、 对比：原始 DOM vs 简化快照

六、 总结：AI 的“眼睛”其实是语义

通过源码分析我们可以发现，Nanobrowser 并没有使用复杂的计算机视觉（CV）去识别图片，而是通过深度挖掘浏览器的无障碍语义，将视觉问题转化为了一个结构化的信息处理问题。

这种做法的优势在于：极速、廉价且极其精准。