5 月起 Core Web Vitals 成了 Google 的搜索排名信号，LCP、FID、CLS 这三个词第一次要认真对待。拆开讲这三个指标各自衡量什么、为什么比白屏时间更贴近真实体验，以及图片、字体、长任务、布局稳定性具体怎么优化。

命名含糊、边界条件漏了、可读性差、还有一个不容易一眼看出来的性能隐患——一次具体的 PR 评审里，前端代码评审真正该盯的几个重点。

捕获冒泡和事件委托是老知识，这篇讲的是另外三件事：用 Pointer Events 统一鼠标/触摸/笔输入，用 passive 选项让滚动不被 JS 拖后腿，以及用 CustomEvent 在框架边界之外做组件通信。

自定义下拉框鼠标点没问题、键盘却完全操作不了，图标按钮读屏只念得出“按钮”两个字——这类问题背后是 ARIA 属性、焦点管理和键盘导航没有正确实现，对照 WCAG 2.1 的几条关键判定标准逐一理清。

transition 只管一次状态过渡，animation 管的是一段有起止、可循环、可暂停的时间线。这篇讲清楚 @keyframes 的多关键帧序列、animation-fill-mode 决定动画结束后停在哪、animation-play-state 配合 infinite 做可暂停的加载指示器，以及 Web Animations API 这几年成熟起来后能不能替代 CSS 动画。

BEM 命名规则写在文档里没人真正遵守，这篇讲怎么用 stylelint 的正则把命名校验做进 CI，以及大型项目里 BEM 类名过长、和 CSS Modules 该怎么取舍这些落地层面的真问题。

webpack 5 发布快一年了，这篇聚焦一次真实的 4 到 5 升级：持久化缓存怎么把二次构建砍掉大半、资源模块如何替掉 file-loader 和 url-loader 这几个内置 loader、Tree Shaking 对嵌套导出的改进，以及升级路上撞到的插件兼容性问题。

导航、文章列表、侧边栏全用 div 套 div 实现，样式和交互都没问题，搜索引擎却抓不出结构——语义化标签该怎么选、div 和具体标签的分工怎么定，以及它和可维护性、SEO 之间的真实关系。

路由级、组件级的动态 import 拆分久了会遇到瓶颈：多个独立部署的应用之间怎么在运行时共享模块，而不是各自打包一份。这篇聚焦 webpack 5 的 Module Federation 解决了什么问题，以及和 iframe、npm 包共享组件比起来的取舍。

Google 从 5 月起把 CLS 纳入 Core Web Vitals 排名信号，图片没留高度、字体换脸、动态插入的公告条，都会让页面在用户眼皮底下跳一下。这篇梳理布局偏移的成因、怎么量化、以及从预留空间到合成层动画的一整套应对办法。

安全性和幂等性是两个正交的维度，PUT 和 PATCH 的边界、要不要自动重试、超时该怎么用 AbortController 真正取消请求，这几个问题的答案都落在这两个维度上，而不是死记方法该配哪个动词。

localStorage 本身的机制大家都熟，真正难的是在它之上搭一层能长期维护的存储层：多个业务模块共用同一个源时怎么设计键名规范避免互相覆盖，容量逼近上限时怎么做淘汰而不是简单地报错阻断，以及业务字段调整之后，旧版本浏览器里已经写好的数据结构要怎么平滑过渡。这篇整理的是这一层封装的具体设计。

debounce/throttle 的基础实现网上一搜一大把，真正决定能不能扛住生产场景的，是 leading、trailing、maxWait 这几个选项怎么组合，cancel、flush 这类方法内部靠什么状态支撑，以及搜索请求乱序这种防抖管不住的问题该怎么补。

宏任务微任务的顺序不是这篇的重点，这篇讲 Node 事件循环六个阶段具体怎么运作、process.nextTick 和 setImmediate 谁先谁后、requestIdleCallback 与 requestAnimationFrame 在浏览器里怎么配合调度，以及一次微任务堆积导致页面失去响应的排查过程。

闭包的定义 2018 年那篇已经讲透，这篇往下走一层：闭包封装私有状态的工程代价、和 TypeScript 里刚能用的 class 私有字段 `#field` 的取舍、以及模块模式在 ES Module 普及之后是不是还有存在的必要。

圣杯布局、双飞翼布局、footer 永远贴底、多层嵌套 Flex 的性能账、`row-reverse` 遇上 RTL 语言——这几种经典布局结构换成 Flex 实现之后，原来的取舍标准也跟着变了，值得把新旧方案摆在一起过一遍。

this 的绑定规则不是这篇的重点：class 字段箭头函数怎么自动锁定 this、Vue 2 Options API 靠框架帮你绑好 this、Vue 3 setup() 里 this 整个心智模型的转变、代理对象里 this 指向的陷阱，这几处才是真正容易踩空的地方。

Chrome 88 落地之后，`:is()` 和 `:where()` 不再是观望中的草案，而是能直接用来合并重复选择器、给组件库默认样式主动降权的两个工具，用法和权重差异要分清楚。

整理 ES2021 几个刚定案的新特性在业务代码里的实际用法：String.prototype.replaceAll 怎么替掉正则全局替换的老写法，Promise.any 和 race/allSettled 的区别在哪，逻辑赋值运算符怎么简化默认值赋值，以及数字分隔符和 WeakRef 值不值得现在就用。

字段级正则谁都会写，真正难的是异步校验的竞态取消、多个字段互相牵制的联合校验怎么组织、以及字段和规则都由配置决定的动态表单校验引擎怎么设计。

强缓存和协商缓存的排查规则前几年已经讲过。这篇往下一层：Service Worker 的 Cache API 该选 cache-first 还是 network-first、webpack 5 的 contenthash 稳定性改进、CDN 与源站的两层缓存怎么协同、发布新版本后用户还停在旧页面时的具体修复手段。

吸顶筛选栏在某个页面突然失效，问题往往不在 sticky 本身，而在包含块怎么算、层叠上下文怎么形成——这几条规则理清楚，定位相关的坑基本都能对上号。

盒模型的基础换算大多数人都清楚，真正麻烦的是它和 Grid 轨道尺寸、打印样式、第三方组件库默认样式撞在一起时的连锁反应——这篇不讲 width 加减法，讲这几类交叉场景怎么排查。