前端技术文章
-
WebSocket close 事件出现 1006 时，浏览器并不是收到了服务端发送的 1006。本文用 CloseEvent 字段、readyState、Network 记录和服务端日志对照，建立一套可执行的异常断链排查方法。286 收藏 -
JavaScript 请求超时和主动取消不是同一件事：本文对比 AbortSignal.timeout、AbortController 与 AbortSignal.any，给出错误区分、signal 一次性使用和旧浏览器定时器清理的实战写法。263 收藏 -
CSS subgrid 能让嵌套卡片在指定方向沿用父网格轨道，解决标题、正文和操作区逐卡片漂移的问题。本文说明列与行的选择、gap 继承、命名线和隐式轨道边界。238 收藏 -
Fetch 使用 ReadableStream 作为请求体时，RequestInit 必须显式写 duplex: half。本文从流的结束、取消、错误处理和浏览器兼容四个方面给出可落地的上传写法。168 收藏 -
structuredClone 并不是任何对象都能复制。本文用最小示例说明函数、DOM 节点、Symbol、WeakMap 等失败边界，并解释 ArrayBuffer 的 transfer 转移、原型链和属性描述符变化。377 收藏 -
CSS container query 让卡片根据父容器宽度切换单列与双列布局，本文从 container-type、@container、命名容器、cqi 和降级方案讲清可复用组件的响应式边界。349 收藏 -
Worker.terminate() 会立即停止 Worker，未完成计算和未发出的消息不会自动补发。本文用请求编号、确认消息和协作取消协议处理销毁边界，并说明 structured clone 与 transfer list 的对象所有权差异。199 收藏 -
文章 · 前端 | 2星期前 | 前端 · 性能 · javascript · 浏览器API · ArrayBuffer postMessage Web Worker structured clone transfer list
Web Worker 的 postMessage 默认使用 structured clone，接收端拿到的是独立副本。本文解释对象复制、ArrayBuffer 转移、transfer list 和生命周期边界，帮助前端开发者判断什么时候复制、什么时候交接所有权。290 收藏 -
Service Worker 的 fetch 事件不是所有请求都适合缓存。本文用同源、GET、路径和请求意图四个条件建立绕过清单，给出静态资源缓存、动态接口放行和旧缓存清理的最小实现。418 收藏 -
Service Worker 更新时，skipWaiting 负责跳过 waiting，clientsClaim 负责让 active worker 接管已有页面；两者一起使用前，要先确认旧页面引用的资源仍与新 fetch 逻辑兼容。本文给出默认等待、用户确认和即时接管三种版本切换安排。410 收藏 -
前端用 URL.createObjectURL 预览 File 或 Blob 时，revokeObjectURL 不能机械地立刻调用。本文按图片加载、替换预览、组件卸载和下载链接四种边界，说明什么时候释放对象 URL 才不会让资源提前失效。422 收藏 -
用 file.size、chunkSize、start 和排他结束位置计算 Blob.slice 最后一片的真实长度，并说明对象 URL 预览后的释放时机。432 收藏 -
IndexedDB 事务会随事件循环在没有新请求时自动提交。本文用读后写、网络等待、版本升级和同源边界说明为什么不能跨 await 继续使用原事务，以及如何改成稳定的请求回调结构。398 收藏 -
IndexedDB 升级被旧页面阻塞时，旧连接要处理 versionchange 并关闭，新页面用 onblocked 延迟显示提示，再在升级完成时撤销提示。本文给出跨标签页可执行的处理结构和边界清单。383 收藏 -
前端使用 ReadableStream 逐块读取 fetch 响应时，停止按钮应通过 AbortController 取消底层请求，并在 reader、TextDecoder 和异常收尾之间划清边界。306 收藏