前端技术文章
-
用 Fetch Streams 分段读取大响应体，串起 Response.body、TextDecoderStream、TransformStream 和 WritableStream，并说明背压、取消与错误处理的边界。386 收藏 -
用 View Transition API 为列表到详情的跳转增加共享元素动画，同时保留不支持浏览器的原生导航回退。385 收藏 -
本文用 uploadId、固定分片索引和服务端状态对账实现前端大文件上传，讲清有限并发、XHR 暂停、失败重试、恢复补传及页面刷新后的续传协作方式。371 收藏 -
用 HTML Popover API 设计嵌套菜单和多层浮层，区分 auto、manual、dialog 的适用边界，并通过 popovertarget、autofocus、source 与 toggle 让键盘焦点路径更可预测。356 收藏 -
fetchpriority 是浏览器的图片获取优先级提示。本文说明如何识别首屏关键图片，只给 LCP 候选设置 high，并处理 lazy、CSS 背景、preload、srcset 与验证边界。343 收藏 -
用 Vue 组合式函数封装 AbortController、请求序号和 onUnmounted 清理，处理重复请求、旧响应回写、组件卸载与 SSR 边界。335 收藏 -
用 Vite mode 管理 development、staging、production 环境变量文件，说明 .env 覆盖关系、VITE_ 客户端边界，以及在 vite.config.js 中使用 loadEnv 的配置方法。329 收藏 -
用 Promise.withResolvers 将一次事件转换为可 await 的结果，结合 AbortSignal 处理预先取消，并在成功、取消与注册异常时移除监听器，避免只用 once 或 race 留下订阅。327 收藏 -
搜索框输入流畅而结果列表很重时，可以用 React useDeferredValue 把非关键结果渲染降为可中断的后台更新，再配合 memo、过期状态和请求策略处理真实边界。320 收藏 -
声明式 Shadow DOM 允许服务端在 HTML 中输出 template shadowrootmode，浏览器解析时直接构建 Shadow Root。本文用一个 SSR 组件解释首屏闪烁根因、最小模板、客户端激活、特性检测、回退与 parser-only 陷阱。315 收藏 -
跨页面导航动画不能直接套用 SPA 的 startViewTransition。本文用同源多页面场景说明 @view-transition、view-transition-name、伪元素动画和无障碍降级的组合方式。310 收藏 -
可访问模态弹窗不只是加 aria-modal。本文优先用原生 dialog 与 showModal 完成焦点限制和同文档背景 inert，再补齐初始焦点、Escape/按钮关闭、触发器恢复、动态触发器兜底，并说明何时才需要手写 Tab 焦点陷阱。309 收藏 -
富文本预览常见的换行消失、连续空格变成一个空格，可以在展示层用 white-space-collapse: preserve-breaks 保留换行并压缩空白，再用 pre-line 作为兼容回退。308 收藏 -
Web Worker 高频回传数值时，SharedArrayBuffer 能避免反复复制，但必须满足跨源隔离并正确处理并发。本文比较三种通信方案，并给出带背压的单生产者单消费者环形缓冲区实现。301 收藏 -
本文用一张可复用内容卡片讲清 CSS Container Query：声明具名容器、按容器宽度切换布局，并处理容器单位、可访问性与降级边界。289 收藏