前端技术文章
-
Service Worker 更新时不要直接覆盖旧缓存。本文用版本化缓存、activate 清理和接管策略，拆解新资源先落地、旧资源再删除的可靠流程。490 收藏 -
Import Maps 可以把浏览器模块中的相对路径统一成稳定别名。本文从 imports、路径前缀、scopes 和加载顺序入手，给出可迁移的 HTML 示例与回归清单。486 收藏 -
ReadableStream.tee() 的两个消费者速度不一致时，慢分支的未读数据会在内部队列中积累，快分支不会自动等待。本文用最小示例解释背压、内存风险、取消语义与分流方案选择。485 收藏 -
MessagePort 放入 postMessage 的 transfer 列表后，发送侧原对象已失去端口所有权，不能再当作有效通信端点。正确做法是主线程保留 port1、只把 port2 交给 Worker，并用 start、ACK、messageerror 与 close 管理通道生命周期。477 收藏 -
浏览器缓存命中却仍请求服务器，往往是资源过期后发生了协商缓存。本文从 304、Cache-Control、ETag、刷新方式和 Fetch cache mode 入手，给出 HTML、静态资源与个性化响应的排查和配置清单。477 收藏 -
subtle.digest 不支持流式输入。本文说明如何用 Blob.slice 控制单块内存，并通过增量哈希器持续 update，正确计算大文件的 SHA-256。475 收藏 -
解释 CSS :has() 与 :is() 组合时参数选择器如何参与优先级计算，说明为什么后写的规则仍可能失效，并给出用 :where()、拆分选择器和级联层恢复可维护覆盖关系的方法。474 收藏 -
CSS @layer 覆盖不了组件样式，通常不是 specificity 不够，而是层的首次创建顺序、未分层样式或 !important 改变了级联比较。本文用最小示例给出固定层顺序和排查清单。471 收藏 -
cqi 按查询容器的 inline-size 计算，cqb 按 block-size 计算；两者跟随逻辑轴而不是固定的 width、height。本文说明 container-type、writing-mode 和无合格容器时的回退边界。470 收藏 -
Fetch 被取消后，不要只看统一的失败结果。AbortSignal.timeout 会给出 TimeoutError，AbortController 默认产生 AbortError，AbortSignal.any 会保留最先触发的 reason。本文给出可复用封装，并说明网络错误、兼容性、竞态和清理边界。466 收藏 -
CSS subgrid 让多张嵌套卡片共享父网格的标题、正文和操作区轨道，解决内容长度不同导致的按钮错位，并补充 gap、隐式轨道与 flex 降级写法。465 收藏 -
用 CSS @layer 固定组件库、基础样式和业务覆盖的优先级，说明 vendor 与 overrides 的组织方式，以及未分层规则、!important 和内联样式的迁移边界。464 收藏 -
文章 · 前端 | 1星期前 | 前端 · 性能监控 · javascript · 前端性能 PerformanceObserver INP Long Animation Frames API LoAF 卡顿脚本
使用 Long Animation Frames API 采集超过 50ms 的长帧，从 scripts 中按脚本地址、入口函数与字符位置聚合耗时，并区分脚本执行、强制布局和渲染开销。463 收藏 -
Background Sync 适合把离线表单的发送时机交给 Service Worker，但它不是本地存储。本文用 IndexedDB outbox、唯一同步标签和失败保留策略，整理一套可回退的延迟提交方案。463 收藏 -
CSS color-mix 的默认混合空间会影响主题色的亮度、饱和度和色相。本文用原创示例说明如何选择 oklab、oklch 或 srgb，并处理比例、透明度与组件状态。451 收藏