前端技术文章
-
React useOptimistic 的回滚不靠手工恢复临时副本，而是依赖权威状态只在成功后更新；失败时 Action 结束，界面回到当前权威值。并发列表更新应使用纯 reducer、稳定 ID 和逐项 pending 标记，避免旧闭包覆盖新数据。286 收藏 -
Web Locks API 的 ifAvailable 会把等待锁改成一次异步立即尝试：锁不可用时回调收到 null。本文给出结构化返回、交互接入、参数限制与兼容降级写法。261 收藏 -
从真实用户 INP 数据出发，用 web-vitals attribution 拆分输入、处理和呈现延迟，再结合 Long Animation Frames 定位长任务、脚本与布局瓶颈。257 收藏 -
用两层 mask 和 mask-composite: exclude 做出渐变镂空边框，拆清遮罩层、组合关系、尺寸位置与圆角对齐，解决边框变实心或内容被裁掉的问题。253 收藏 -
Web Locks API 可以用 AbortSignal 取消尚未获锁的排队请求，但不能用同一个 signal 强制终止已经开始的锁回调。本文用 JavaScript 示例拆分等待取消、业务任务取消和资源清理边界。239 收藏 -
CSS Anchor Positioning 用 position-try 配置浮层回退位置，本文从最小写法、自定义 @position-try、优先级和兼容性边界说明如何避免 tooltip 溢出视口。234 收藏 -
前端状态更新频繁时，批处理负责合并同一调度窗口的重复提交，去抖负责等待连续输入停止后再执行副作用。本文用原生 JavaScript 拆开两者的触发边界，并给出输入、请求、状态和绘制的组合方案。227 收藏 -
从 label、原生约束和 aria-describedby 入手，把表单错误总览、字段状态与键盘焦点连起来，并说明客户端校验与服务端校验的边界。225 收藏 -
文章 · 前端 | 2小时前 | 前端 · javascript · SyntaxError Web Components customElements.whenDefined Custom Elements 自定义元素名称
customElements.whenDefined 传入无效标签名时会直接抛出 SyntaxError，而不是返回等待中的 Promise。本文区分名称契约与注册时序，给出前置处理、统一注册名和批量等待的实用写法。223 收藏 -
CSS white-space-collapse: preserve-spaces 会保留连续空白，制表符和换行段则转为空格，因此文本占用宽度和换行机会都可能改变。本文用最小示例拆解它与其他取值的差异，并给出排查宽度异常的选择方法。222 收藏 -
讲清 customElements.whenDefined 如何批量等待自定义元素注册完成，使用 Set 去重标签名、Promise.all 汇总等待，并处理空集合、路由切换和内部渲染边界。222 收藏 -
文章 · 前端 | 6天前 | 前端 · 性能优化 · javascript · ArrayBuffer postMessage 前端性能 Web Worker Transferable structured clone
解释 Web Worker 传大数据卡顿的 structured clone 成本，对比普通复制与 Transferable，并用 ArrayBuffer 示例说明 transfer list、detach 和发送端所有权边界。220 收藏 -
CSS scroll-driven animations 可以把关键帧动画交给滚动进度或元素可见进度控制。本文从旧的 scroll 事件方案出发，讲清 scroll()、view()、命名时间线、关键帧范围和兼容回退的写法。207 收藏 -
从候选 URL 筛选、Sec-Purpose 服务端判断到 prerenderingchange 激活边界，说明 Speculation Rules API 如何渐进增强地预渲染下一页并避免误触发副作用。202 收藏 -
使用 View Transition API 为列表排序、筛选和拖动重排添加平滑位移动画，关键是让每个列表项保持稳定 DOM 身份，并把一次同步 DOM 更新交给 document.startViewTransition。本文给出完整示例、兼容回退、减弱动画设置与排错清单。158 收藏