创见博客
行号标记如何实现 DOM 到源码定位
基于 DOM Source Mapping Lab 的真实实现，拆解行号标记如何连接 JSX、DOM 与源码面板，并分析祖先回退、源码读取、动态实例、安全边界、优势与局限。
前端工程化DOM源码映射React技术调研
七崽爱吃小饼干2026-08-212
AST 如何实现 DOM 到源码映射：原理、优势与局限
基于 DOM Source Mapping Lab 的实际实现，拆解 Babel AST 解析、确定性节点 ID、代码注入、映射表查询与源码高亮链路，并分析 AST 方案的优势、工程成本和适用边界。
前端工程化ASTDOM源码映射Babel
七崽爱吃小饼干2026-08-213
从零实现一个 DOM 元素选择器：事件命中、Overlay 与 Shadow DOM
拆解一个框架无关 DOM Picker 的完整实现：捕获阶段事件、composedPath 命中、排除区域、Shadow DOM Overlay、滚动定位、生命周期管理，以及开发中遇到的层级与节流问题。
前端工程化DOMTypeScriptShadow DOM开发工具
七崽爱吃小饼干2026-08-211
DOM 与源码映射调研：六种方案的实现与对比
系统调研行号标记、AST、Source Map、运行时增量匹配、XPath 和混合映射六种方案，对比精度、复杂度、性能与适用场景，并给出分阶段采纳建议。
前端工程化Source MapASTDOM技术调研
七崽爱吃小饼干2026-08-203
请求中的 User-Agent 是什么：浏览器、爬虫与 AI Bot 如何表明身份
从一条真实 HTTP 请求出发，讲清 User-Agent 的含义、解析方式、应用场景与可信边界，并介绍浏览器 Client Hints、普通爬虫和 AI Bot 的常见 UA 及识别策略。
HTTPUser-Agent爬虫AI网络协议
七崽爱吃小饼干2026-08-191
在 SSG 页面中通过根节点状态属性控制 DOM 显隐
在 Head 中同步读取登录态或 AB 变量，将状态写入 HTML 根节点的 data-* 属性，并通过 CSS 实现无 Hydration 冲突的 DOM 显隐。
SSG前端ReactAB实验
七崽爱吃小饼干2026-08-171
看懂网页性能指标：FCP、LCP、CLS、TBT 与 INP
系统介绍 FCP、LCP、CLS、TBT 和 INP 的含义、参考标准、常见问题及优化方法，并辨析 TBT 与 INP 的区别。
前端性能Web VitalsLighthouseChrome DevTools
七崽爱吃小饼干2026-08-171
用 Less Mixin 重构 SSG 断点方案
解释 ResponsiveContainer 集中断点与统一设备语义的设计背景，并将响应式样式迁移到 CSS Media Query 和共享 Less Mixin，解决 SSG 首屏错位、布局闪动与 CLS。
前端工程Less响应式设计SSRReact
七崽爱吃小饼干2026-08-0710