-
field-sizing: content 可以让 input 和 textarea 按内容伸缩,但实际使用还要配合 min-width、max-width、maxlength,并为未支持的浏览器保留固定尺寸回退。
-
用 CSS container-type 与 @container 让卡片按自身容器宽度切换单列和双列布局,覆盖命名容器、containment、兼容降级与常见失效原因。
-
Service Worker 更新并不等于页面立即切换。本文用 skipWaiting、clientsClaim 和 controllerchange 说明如何控制新 Worker 的激活与页面接管时机,避免新旧缓存混用。
-
Cache API 的匹配不是简单的路径字符串比较。本文围绕 Cache.match() 说明 URL、请求方法、Vary 请求头和匹配选项怎样共同决定缓存条目,并给出带命中率记录的完整 Request 示例。
-
IndexedDB 升级应在 onupgradeneeded 中按 oldVersion 累计迁移。本文用独立演示库说明跳版本结构变更、事务活性与失败回滚,并区分回调结束和打开成功。
-
Web Worker 默认会通过 structured clone 复制消息数据。本文用 ArrayBuffer 说明 transferable objects 的写法、发送端 detached 状态、TypedArray 与底层 buffer 的关系,以及结果转回主线程时的生命周期边界。
-
ReadableStream 停止读取时,reader.cancel() 和 AbortController.abort() 负责的范围不同。本文用一个可复用的 fetch 流读取结构说明如何取消请求、处理 AbortError 并在 finally 中释放 reader 锁。
-
ReadableStream 通过 pipeThrough 把数据交给 TransformStream,再从转换流的 readable 端继续消费。本文从一次分块边界误判出发,说明转换回调、文本解码、管道串联以及关闭、异常和取消选项的正确用法。
-
Fetch 可用 AbortSignal.timeout 为每次请求设置等待预算。本文给出覆盖响应体读取的原创封装,说明 TimeoutError 的归属、其他异常和活动时间边界,并提供兼容判断。
-
Fetch keepalive 适合在页面关闭、刷新或跳转前尽力发送小型数据。本文从 64 KiB 体积边界、页面生命周期、幂等键和关键写入风险出发,说明哪些请求适合使用,以及什么时候应该换方案。
-
前端 source map 不只是调试开关,也决定了浏览器能看到多少源码信息。本文从 sourceMappingURL、sourcesContent 和生产构建策略入手,说明如何把调试地图留在受控错误上报链路中。
-
CSS 自定义属性默认按离散值处理,直接做颜色或数值动画时常常没有中间帧。本文用 @property 声明 syntax、inherits 和 initial-value,让 --progress 与 --accent 获得可插值的动画能力。
-
浏览器后台标签页可能延迟定时器,直接用客户端心跳时间判断 WebSocket 存活容易误报。本文说明如何结合 visibilitychange、应用层 ping/pong、服务端确认和退避重连,避免页面恢复时重复连接。
-
WebTransport 的双向流和 Datagram 都能承载实时数据,但可靠性、顺序性和消息边界完全不同。本文用一个实时面板的取舍场景说明两者适合什么数据,并给出可靠流的 framing 写法与兼容检查清单。
-
用 Web Streams 组装生产、转换和消费管道时,关键不是手工堆积缓存,而是让下游需求通过队列和 pipe 链路传回 source,并用 AbortController 统一处理取消、超时和资源释放。