前端技术文章
-
文章 · 前端 | 2星期前 | 前端 · 性能优化 · 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 收藏 -
Fetch 调用 AbortController 取消后，catch 和 finally 仍会按 Promise 规则执行；真正需要防止的是旧请求在 await 后继续更新业务状态。本文用 signal.aborted、请求代次和 finally 清理讲清排查与修复方法。168 收藏 -
Vite 路由使用动态 import 后首屏仍然偏大，通常不是分包失效，而是入口静态依赖、共享依赖或 CSS 仍被首屏带入。本文用构建 manifest 和模块边界逐层定位原因。343 收藏 -
Vite 环境变量未出现在客户端时，先检查 VITE_ 前缀，再核对 mode、.env 文件和 envPrefix 配置；数据库密码、私钥等服务端秘密不应通过改前缀暴露。464 收藏 -
用模板字面量类型生成 xxxChanged 事件名，并通过泛型与索引访问类型让回调参数跟随属性类型推导，最后说明动态字符串和可选属性的边界。247 收藏 -
TypeScript 条件类型左侧使用裸类型参数时，会对联合类型逐成员计算。本文用 ToArray 示例解释分发原因，并说明如何用方括号关闭分发。447 收藏 -
用 Vue Router 的 scrollBehavior 区分新导航、浏览器前进后退、hash 锚点和异步内容，配置固定头部偏移并排查滚动位置恢复异常。133 收藏 -
Vue 3 使用 provide/inject 传递跨组件状态时，字符串键容易让类型变成 unknown 或 undefined。本文用 InjectionKey 绑定上下文类型，并说明 readonly、必需注入、可选注入和默认值的边界。247 收藏 -
React useMemo 依赖数组中的对象每次渲染都重新创建时，即使字段不变也会重复计算。本文用引用相等、原始依赖和 useEffect 场景说明正确处理方式。297 收藏