前端技术文章
-
解释 Vite 配置求值早于 .env 文件加载的原因，并用 loadEnv 正确读取模式变量、配置端口和控制客户端暴露边界。133 收藏 -
React useOptimistic 的列表回滚关键是保留真实数据作为基线，用 reducer 标记待处理项，请求失败时让乐观状态自然恢复，请求成功后再同步服务端列表。153 收藏 -
URLPattern 可以在同一个对象模式中分别声明 hostname 与 pathname，并从 exec 返回值的对应组件读取命名分组。本文用多租户项目地址演示域名参数、路径参数、相对 URL、未匹配处理和旧环境回退。108 收藏 -
介绍 Intl.DurationFormat 如何接收结构化持续时间对象，按 locale 与 long、short、narrow 风格生成本地化文本，并用 formatToParts 和能力检测处理真实前端场景。141 收藏 -
MessagePort 放入 postMessage 的 transfer 列表后，发送侧原对象已失去端口所有权，不能再当作有效通信端点。正确做法是主线程保留 port1、只把 port2 交给 Worker，并用 start、ACK、messageerror 与 close 管理通道生命周期。477 收藏 -
fetchpriority 是浏览器的图片获取优先级提示。本文说明如何识别首屏关键图片，只给 LCP 候选设置 high，并处理 lazy、CSS 背景、preload、srcset 与验证边界。343 收藏 -
用 AbortSignal.any 把用户取消和超时合并为一个 fetch 信号，并根据 reason 区分取消来源，补充监听器清理与兼容性边界。106 收藏 -
文章 · 前端 | 2星期前 | 前端 · 性能优化 · javascript · scheduler.postTask TaskController Prioritized Task Scheduling API TaskSignal JavaScript任务优先级
Scheduler.postTask 用 options.priority 设置固定优先级，用 TaskController 的 TaskSignal 管理动态优先级。本文说明三档优先级、Promise 错误处理、取消、delay 和浏览器能力检测。148 收藏 -
文章 · 前端 | 2星期前 | 前端 · View Transition API startViewTransition ViewTransitionTypeSet pageswap pagereveal
View Transition types 用字符串区分前进、后退和其他导航，再由 :active-view-transition-type() 选择动画。本文分别说明 SPA、跨文档导航、动态类型和兼容性边界。195 收藏 -
HTMLDialogElement 的 requestClose() 用于发起可拦截的关闭请求，close() 用于直接关闭。本文用事件顺序、returnValue 和兼容性代码说明两者的选择边界。363 收藏 -
Popover API 无需手写 document 点击监听：给浮层设置 popover=auto，并用 popovertarget 按钮控制，浏览器会在点击外部或按 Esc 时执行 Light Dismiss。本文同时说明 manual 模式、菜单项关闭和事件同步边界。225 收藏 -
cqi 按查询容器的 inline-size 计算，cqb 按 block-size 计算；两者跟随逻辑轴而不是固定的 width、height。本文说明 container-type、writing-mode 和无合格容器时的回退边界。470 收藏 -
用 position-try-fallbacks 为 CSS 锚点浮层安排有优先级的回退候选，理解逗号与空格的区别，并处理双轴翻转和兼容降级。427 收藏 -
CSS :has() 在动态页面中可能因宽泛锚点和深层后代匹配扩大重算范围。本文用商品卡片案例讲清组件级锚定、组合器收缩、权重控制、兼容降级和检查方法。210 收藏 -
Web Locks API 能让同源标签页和 Worker 围绕同一锁名协调任务，但默认排队只避免并发，不会自动消除顺序重复。本文讲清 ifAvailable、锁内完成标记、长期持锁和服务端幂等的组合方式。348 收藏