前端技术文章
-
CSS text-wrap: balance 可以让短标题在多行显示时尽量均衡每行长度，减少最后一行过短的情况。本文说明它在标题和卡片中的写法、兼容降级，以及与 pretty、nowrap 的取舍。439 收藏 -
文章 · 前端 | 2星期前 | 前端 · 性能优化 · javascript · ArrayBuffer postMessage 前端性能 结构化克隆 Web Worker transfer terminate
Web Worker 处理大数据计算时，先用 taskId、type、payload 设计可追踪消息，再根据数据形态选择结构化克隆或 transfer，并用 terminate 明确取消边界。176 收藏 -
围绕 cache key、install、activate 和回滚设计一套 Service Worker 缓存版本更新方案，说明怎样避免新旧缓存互相污染，以及 updateViaCache 和 clients.claim 应该怎样取舍。122 收藏 -
文章 · 前端 | 2星期前 | 前端 · css · 可访问性 · 浏览器兼容 · prefers-reduced-motion animation-timeline 前端兼容 CSS scroll-timeline 滚动驱动动画
CSS scroll-timeline 可以让动画进度跟随滚动位置，但不能替代兼容性和无障碍设计。本文用 @supports 与 prefers-reduced-motion 组织增强、降级和静态默认效果。308 收藏 -
HTMLInputElement.showPicker() 可以让自定义按钮打开日期、文件、颜色或 datalist 等原生选择器；关键是保留用户点击上下文，先做特性检测，并为异常和旧浏览器准备原生 input 回退。106 收藏 -
用 role=status 和 aria-live 给异步页面补上礼貌播报，理解 aria-atomic、aria-busy 的边界，并排查不播报与重复播报问题。261 收藏 -
打开模态框或抽屉时，可以给背景容器设置 inert，让其后代暂时不能点击、聚焦，也不会出现在辅助技术访问树中；关闭浮层后再恢复 inert，并保留旧环境降级策略。153 收藏 -
field-sizing: content 可以让 input 和 textarea 按内容伸缩，但实际使用还要配合 min-width、max-width、maxlength，并为未支持的浏览器保留固定尺寸回退。328 收藏 -
用 CSS container-type 与 @container 让卡片按自身容器宽度切换单列和双列布局，覆盖命名容器、containment、兼容降级与常见失效原因。330 收藏 -
Service Worker 更新并不等于页面立即切换。本文用 skipWaiting、clientsClaim 和 controllerchange 说明如何控制新 Worker 的激活与页面接管时机，避免新旧缓存混用。486 收藏 -
Cache API 的匹配不是简单的路径字符串比较。本文围绕 Cache.match() 说明 URL、请求方法、Vary 请求头和匹配选项怎样共同决定缓存条目，并给出带命中率记录的完整 Request 示例。432 收藏 -
IndexedDB 升级应在 onupgradeneeded 中按 oldVersion 累计迁移。本文用独立演示库说明跳版本结构变更、事务活性与失败回滚，并区分回调结束和打开成功。483 收藏 -
Web Worker 默认会通过 structured clone 复制消息数据。本文用 ArrayBuffer 说明 transferable objects 的写法、发送端 detached 状态、TypedArray 与底层 buffer 的关系，以及结果转回主线程时的生命周期边界。408 收藏 -
ReadableStream 停止读取时，reader.cancel() 和 AbortController.abort() 负责的范围不同。本文用一个可复用的 fetch 流读取结构说明如何取消请求、处理 AbortError 并在 finally 中释放 reader 锁。203 收藏 -
ReadableStream 通过 pipeThrough 把数据交给 TransformStream，再从转换流的 readable 端继续消费。本文从一次分块边界误判出发，说明转换回调、文本解码、管道串联以及关闭、异常和取消选项的正确用法。151 收藏