前端技术文章
-
Import Maps 可以把浏览器模块中的相对路径统一成稳定别名。本文从 imports、路径前缀、scopes 和加载顺序入手，给出可迁移的 HTML 示例与回归清单。486 收藏 -
Vite 8 用 Rolldown 统一开发依赖优化与生产打包链，同时把 JavaScript 转换、压缩和 CSS 压缩边界交给 Oxc 与 Lightning CSS。本文按配置和插件边界说明升级时如何核对。486 收藏 -
ReadableStream.tee() 的两个消费者速度不一致时，慢分支的未读数据会在内部队列中积累，快分支不会自动等待。本文用最小示例解释背压、内存风险、取消语义与分流方案选择。485 收藏 -
用一个带校验状态、禁用状态和兄弟提示的表单例子，拆清 CSS :has() 的相对选择器边界、特异性影响与可维护写法。485 收藏 -
connectedCallback 适合处理依赖 DOM 的初始化，但不能把所有逻辑都塞进去。本文用 Web Component 示例区分 constructor、connectedCallback、attributeChangedCallback 和 disconnectedCallback 的职责，并处理重连、子节点时机与事件清理。484 收藏 -
IndexedDB 升级应在 onupgradeneeded 中按 oldVersion 累计迁移。本文用独立演示库说明跳版本结构变更、事务活性与失败回滚，并区分回调结束和打开成功。483 收藏 -
浏览器后台标签页可能延迟定时器，直接用客户端心跳时间判断 WebSocket 存活容易误报。本文说明如何结合 visibilitychange、应用层 ping/pong、服务端确认和退避重连，避免页面恢复时重复连接。483 收藏 -
通过 view-transition-name 与 startViewTransition，让列表更新只动画目标元素，并为不支持的浏览器保留直接更新降级。483 收藏 -
使用 URLSearchParams.append 逐个生成同名查询参数，用 getAll 读取完整数组，并了解 set 覆盖值、数组初始化和后端解析约定的常见坑。483 收藏 -
文章 · 前端 | 1个月前 | 前端 · 性能优化 · javascript · Fetch AbortController ReadableStream TextDecoderStream 大文件分块
前端用 fetch 读取大文件时，不必等 response.text() 或 response.blob() 一次性完成。本文用 ReadableStream 逐块消费响应，讲清 TextDecoderStream、背压、取消请求和兼容处理。483 收藏 -
ResizeObserver 回调修改被观察尺寸会形成布局反馈链。本文从循环成因、requestAnimationFrame 调度、期望尺寸守卫和 CSS 容器查询四个方面给出可落地的排查与修复写法。481 收藏 -
fetch 遇到 404 不进入 catch，是因为请求已经拿到了 HTTP 响应。本文用 response.ok、status 和 JSON 解析示例说明正确的错误处理方式。481 收藏 -
用 requestIdleCallback 安排不影响首屏交互的后台任务，结合 IdleDeadline.didTimeout 与 timeRemaining() 分片处理，并给出不支持该 API 时的安全降级方案。480 收藏 -
paths 是 tsconfig.json 中的配置选项，用于配置模块路径别名。 它可以让导入路径更简洁，同时保持代码的组织结构清晰。 路径映射 paths 工作原理 原始导入路径 import Button from "../../components/Button" 使用别名导入 import480 收藏 -
用一个可运行的 HTML dialog 示例验证 closedby 的 none、closerequest、any 三种关闭边界，并记录 close 事件、returnValue 与旧浏览器降级策略。479 收藏