前端技术文章
-
文章 · 前端 | 1星期前 | 前端 · 性能 · 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 收藏 -
文章 · 前端 | 1星期前 | 前端 · 性能优化 · javascript · Fetch AbortController ReadableStream TextDecoderStream 大文件分块
前端用 fetch 读取大文件时，不必等 response.text() 或 response.blob() 一次性完成。本文用 ReadableStream 逐块消费响应，讲清 TextDecoderStream、背压、取消请求和兼容处理。483 收藏 -
fetch 的 catch 不能单独证明是 CORS 还是断网。本文用 Response.ok、AbortError、Console、Network 和服务端日志建立一套可执行的判断路径。424 收藏 -
fetch 收到 404 时，Promise 通常仍会 resolve，因为服务器已经返回了 HTTP 响应。本文用 Response.ok、Response.status 和主动抛错讲清 catch 的正确使用边界。299 收藏 -
用 Blob.slice 把大文件切成固定分片，配合稳定恢复标识、单片重试和已完成分片查询，实现刷新页面后继续上传的前端方案。321 收藏 -
Web Worker 通过 postMessage 传输 ArrayBuffer 时，加入 transfer list 会转移底层内存所有权，使发送端 buffer 进入 detached 状态。本文对比复制与转移，说明消息体、transfer list 和 Uint8Array 视图的正确边界。364 收藏 -
CSS 响应式规则不必二选一：依赖浏览器视口或设备偏好时用 media query，依赖组件祖先容器宽度时用 container query。本文用最小 CSS 片段和决策表说明两者的选择边界。173 收藏 -
Service Worker 更新后仍读到旧文件，通常不是浏览器拒绝更新，而是新 worker 还在 waiting、页面仍由旧 controller 控制，或 fetch 代码继续命中旧的 Cache Storage。本文用版本化缓存、activate 清理和可控接管方式排查这个边界。251 收藏