前端技术文章
-
搜索框输入流畅而结果列表很重时，可以用 React useDeferredValue 把非关键结果渲染降为可中断的后台更新，再配合 memo、过期状态和请求策略处理真实边界。320 收藏 -
用 Vite mode 管理 development、staging、production 环境变量文件，说明 .env 覆盖关系、VITE_ 客户端边界，以及在 vite.config.js 中使用 loadEnv 的配置方法。329 收藏 -
TypeScript NoInfer 用于拆分泛型推断与参数约束，本文通过数组、默认值和配置对象示例说明如何保持调用方的显式类型选择，并列出版本与回归边界。443 收藏 -
Import Maps 可以把浏览器模块中的相对路径统一成稳定别名。本文从 imports、路径前缀、scopes 和加载顺序入手，给出可迁移的 HTML 示例与回归清单。486 收藏 -
Background Sync 适合把离线表单的发送时机交给 Service Worker，但它不是本地存储。本文用 IndexedDB outbox、唯一同步标签和失败保留策略，整理一套可回退的延迟提交方案。463 收藏 -
用 Fetch Streams 分段读取大响应体，串起 Response.body、TextDecoderStream、TransformStream 和 WritableStream，并说明背压、取消与错误处理的边界。386 收藏 -
CSS scroll-driven animations 可以把关键帧动画交给滚动进度或元素可见进度控制。本文从旧的 scroll 事件方案出发，讲清 scroll()、view()、命名时间线、关键帧范围和兼容回退的写法。207 收藏 -
AbortController 的 AbortSignal 是一次性信号，调用 abort 后不能恢复。本文用请求切换场景解释为什么复用旧控制器会让新请求立即取消，并给出每次请求新建控制器、取消旧请求和防止旧响应覆盖新结果的生产写法。418 收藏 -
Web Locks API 的 ifAvailable 会把等待锁改成一次异步立即尝试：锁不可用时回调收到 null。本文给出结构化返回、交互接入、参数限制与兼容降级写法。261 收藏 -
Web Worker 高频回传数值时，SharedArrayBuffer 能避免反复复制，但必须满足跨源隔离并正确处理并发。本文比较三种通信方案，并给出带背压的单生产者单消费者环形缓冲区实现。301 收藏 -
跨页面导航动画不能直接套用 SPA 的 startViewTransition。本文用同源多页面场景说明 @view-transition、view-transition-name、伪元素动画和无障碍降级的组合方式。310 收藏 -
React useOptimistic 的回滚不靠手工恢复临时副本，而是依赖权威状态只在成功后更新；失败时 Action 结束，界面回到当前权威值。并发列表更新应使用纯 reducer、稳定 ID 和逐项 pending 标记，避免旧闭包覆盖新数据。286 收藏 -
Vite Environment API 用命名环境承载浏览器、Node 和 Edge 的差异。本文用配置示例说明顶层继承、optimizeDeps 边界和渐进迁移方法。418 收藏 -
Web Locks API 可以用 AbortSignal 取消尚未获锁的排队请求，但不能用同一个 signal 强制终止已经开始的锁回调。本文用 JavaScript 示例拆分等待取消、业务任务取消和资源清理边界。239 收藏 -
文章 · 前端 | 1天前 | javascript · AbortController AbortSignal.any AbortError TimeoutError AbortSignal reason
AbortSignal.any 会把首个触发源的 reason 原样传给组合信号。本文用 TimeoutError、AbortError、自定义 reason 和来源记录器区分超时与手动取消，并说明竞态与兼容边界。447 收藏