前端技术文章
-
React useOptimistic 的回滚不靠手工恢复临时副本，而是依赖权威状态只在成功后更新；失败时 Action 结束，界面回到当前权威值。并发列表更新应使用纯 reducer、稳定 ID 和逐项 pending 标记，避免旧闭包覆盖新数据。286 收藏 -
Vite Environment API 用命名环境承载浏览器、Node 和 Edge 的差异。本文用配置示例说明顶层继承、optimizeDeps 边界和渐进迁移方法。418 收藏 -
Web Locks API 可以用 AbortSignal 取消尚未获锁的排队请求，但不能用同一个 signal 强制终止已经开始的锁回调。本文用 JavaScript 示例拆分等待取消、业务任务取消和资源清理边界。239 收藏 -
文章 · 前端 | 11小时前 | javascript · AbortController AbortSignal.any AbortError TimeoutError AbortSignal reason
AbortSignal.any 会把首个触发源的 reason 原样传给组合信号。本文用 TimeoutError、AbortError、自定义 reason 和来源记录器区分超时与手动取消，并说明竞态与兼容边界。447 收藏 -
JavaScript Iterator Helpers 可以把 filter、map、take 等操作组合成惰性处理链。本文用可运行配方解释何时取值、怎样提前停止，以及一次性消费与兼容性边界。110 收藏 -
通过自定义属性、命名容器和 @container style() 让组件响应父级状态，并说明默认回退、继承、容器选择及普通属性查询的支持边界。120 收藏 -
从候选 URL 筛选、Sec-Purpose 服务端判断到 prerenderingchange 激活边界，说明 Speculation Rules API 如何渐进增强地预渲染下一页并避免误触发副作用。202 收藏 -
从真实用户 INP 数据出发，用 web-vitals attribution 拆分输入、处理和呈现延迟，再结合 Long Animation Frames 定位长任务、脚本与布局瓶颈。257 收藏 -
声明式 Shadow DOM 允许服务端在 HTML 中输出 template shadowrootmode，浏览器解析时直接构建 Shadow Root。本文用一个 SSR 组件解释首屏闪烁根因、最小模板、客户端激活、特性检测、回退与 parser-only 陷阱。315 收藏 -
用 HTML Popover API 设计嵌套菜单和多层浮层，区分 auto、manual、dialog 的适用边界，并通过 popovertarget、autofocus、source 与 toggle 让键盘焦点路径更可预测。356 收藏 -
使用 View Transition API 为列表排序、筛选和拖动重排添加平滑位移动画，关键是让每个列表项保持稳定 DOM 身份，并把一次同步 DOM 更新交给 document.startViewTransition。本文给出完整示例、兼容回退、减弱动画设置与排错清单。158 收藏 -
CSS Anchor Positioning 用 position-try 配置浮层回退位置，本文从最小写法、自定义 @position-try、优先级和兼容性边界说明如何避免 tooltip 溢出视口。234 收藏 -
把前端性能预算拆成图片、脚本和交互三类，给出可落地的体积、长任务、LCP、INP、CLS 阈值，以及如何用实验室测试和真实用户数据持续追踪。446 收藏 -
从 label、原生约束和 aria-describedby 入手，把表单错误总览、字段状态与键盘焦点连起来，并说明客户端校验与服务端校验的边界。225 收藏 -
用 CSS @layer 固定组件库、基础样式和业务覆盖的优先级，说明 vendor 与 overrides 的组织方式，以及未分层规则、!important 和内联样式的迁移边界。464 收藏