企业官网建设流程全解析

网站以什么名字备案,罗湖区住房和建设局网站,做信息网站需要什么,寺庙招人做网站维护吗欢迎回到《Nanobrowser 源码分析》系列。在上一篇中#xff0c;我们探讨了 Nanobrowser 的多智能体协作架构。今天#xff0c;我们将进入一个非常硬核的话题#xff1a;视觉感知。 对于人类来说#xff0c;看一眼网页就能找到“登录”按钮#xff1b;但对于 AI 模型来说我们探讨了 Nanobrowser 的多智能体协作架构。今天我们将进入一个非常硬核的话题视觉感知。对于人类来说看一眼网页就能找到“登录”按钮但对于 AI 模型来说面对动辄数万行的原始 HTML 代码它会瞬间淹没在“噪声”中。Nanobrowser 是如何把复杂的网页“翻译”成 AI 能听懂的语言的一、 为什么 AI 不能直接读 HTML在深入源码之前我们需要理解两个痛点Token 爆炸一个普通的电商商品页原始 HTML 往往超过 100KB。如果直接塞给 LLM不仅成本极高还会因为超过上下文长度导致模型“失忆”。视觉噪音HTML 中包含大量的script、style、无意义的div嵌套以及隐藏的埋点代码。这些对 AI 定位核心操作毫无帮助。Nanobrowser 的核心方案是DOM 蒸馏Distillation与无障碍树Accessibility Tree映射。二、 核心技术 1DOM 树的“瘦身”艺术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。源码实现逻辑节点标注Nanobrowser 会给页面上每一个“可交互元素”分配一个唯一的nano-id。语义提取通过读取元素的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 简化快照特性原始 HTMLNanobrowser 快照Token 消耗极高 (10,000)低 (几百到一千)包含噪音包含 CSS, JS, 统计代码仅包含交互元素和语义文本AI 理解难度难需从杂乱代码中推理易结构化 JSON 或 Markdown操作精度模糊精确到像素坐标六、 总结AI 的“眼睛”其实是语义通过源码分析我们可以发现Nanobrowser 并没有使用复杂的计算机视觉CV去识别图片而是通过深度挖掘浏览器的无障碍语义将视觉问题转化为了一个结构化的信息处理问题。这种做法的优势在于极速、廉价且极其精准。