内容索引
浏览器渲染系统
解释 UI 表现
- Rendering pipeline
- DOM → CSSOM → Render Tree
- Layout / Paint / Composite
- Reflow vs Repaint
- GPU compositing
- Canvas / SVG / WebGL basics
- Layer tree / stacking context
- Performance bottlenecks
Browser APIs & DevTools
“控制 UI”
- Chrome DevTools Protocol (CDP)
- Playwright / Puppeteer
- Performance trace
- Network / Layout / Accessibility Tree APIs
Runtime & Sandbox
“隔离和控制 agent 行为”
- iframe sandbox
- CSP / SOP / CORS
- Shadow DOM
- Web Workers / Service Workers
- Node / Bun / Deno
- JS event loop
Research project
- 用 CDP 提取页面 layout tree
- 把 DOM 转成“UI graph”
参考资料
📚 书：
- 《Browser Internals》
- 《High Performance Browser Networking》
- 《You Don’t Know JS》（runtime 部分）
📖 博客：
- Chrome DevTools Blog
- Mozilla MDN (Rendering)
- Surma.dev（Google 工程师）
- Web.dev
自查问题清单
Level 1
- 浏览器如何从 HTML 到像素？
- Layout / Paint / Composite 区别？
- 重排 vs 重绘？
Level 2
- 为什么某些 UI 截图识别不稳定？
- 为什么模型无法判断 spacing？
- 如何从 DOM 推断视觉结构？
- 如何用 CDP 获取 layout 信息？
- playwright 自动化测试如何处理登陆和跨域问题？
Level 3
- 如何构建 UI 的结构化表示？
- 如何把 UI 转成 Agent 可理解的 state graph？
- 如何评估 UI 美学？
- 如何让 Agent 理解交互逻辑？