前端技术文章
-
SPA 局部导航请求失败时，先保留旧内容，再把错误、重试和兼容回退收进同一条验收流程。文章用 Navigation API 的 navigateerror、intercept() 和能力检测说明如何避免空白页与重复重试。308 收藏 -
用 useActionState 让 Server Action 在校验失败时同时返回字段值和错误信息，避免表单回显为空，并区分预期错误与异常。308 收藏 -
围绕 localStorage 配额异常，说明同步写入的失败边界、异常捕获、内存降级和迁移 IndexedDB 的判断方法。308 收藏 -
富文本预览常见的换行消失、连续空格变成一个空格，可以在展示层用 white-space-collapse: preserve-breaks 保留换行并压缩空白，再用 pre-line 作为兼容回退。308 收藏 -
解释SolidJS createMemo的纯计算约束，结合报价预览组件区分派生值、createEffect外部同步与用户事件，并说明相等判断、状态回写和清理边界。308 收藏 -
文章 · 前端 | 2星期前 | 前端 · css · 可访问性 · 浏览器兼容 · prefers-reduced-motion animation-timeline 前端兼容 CSS scroll-timeline 滚动驱动动画
CSS scroll-timeline 可以让动画进度跟随滚动位置，但不能替代兼容性和无障碍设计。本文用 @supports 与 prefers-reduced-motion 组织增强、降级和静态默认效果。308 收藏 -
用 adoptedStyleSheets 把同一份构造样式表复用到多个 ShadowRoot，重点核对 CSSStyleSheet 构造时机、跨文档限制、动态更新与不支持浏览器的 style 回退。307 收藏 -
Popover API 的弹层如果只给 :popover-open 写过渡，首次打开和关闭时常会出现闪现或瞬间消失。本文从最小示例出发，说明 @starting-style、transition-behavior、overlay 与 reduced motion 的配合边界。307 收藏 -
前端使用 ReadableStream 逐块读取 fetch 响应时，停止按钮应通过 AbortController 取消底层请求，并在 reader、TextDecoder 和异常收尾之间划清边界。306 收藏 -
BroadcastChannel 可用于跨标签页短消息同步。本文以主题偏好为例，说明通信范围、消息协议、有限去重、关闭清理与降级路径，并指出历史补发和并发一致性需由业务另行处理。306 收藏 -
用 View Transitions API 把列表卡片与详情页的关键元素连接起来，掌握 view-transition-name 的唯一性、路由更新封装、能力回退和减少动效处理。305 收藏 -
用 Fetch 读取 Response.body 的 ReadableStream，按块更新页面，并处理 UTF-8 中文跨块、HTTP 异常、空 body 和取消读取。304 收藏 -
文章 · 前端 | 1星期前 | 前端 · javascript · 浏览器API · AbortController AbortSignal JavaScript异步任务 scheduler.postTask
scheduler.postTask 可以通过AbortSignal取消尚未执行的任务，但abort不会回溯终止已经进入回调的JavaScript。本文用最小示例说明signal接入、Promise错误处理、协作式停止和兼容性边界。304 收藏 -
TypeScript 项目的性能优化涉及编译速度、运行时性能和代码体积等多个方面。 本教程介绍常见的性能优化技巧，帮助构建更高效的 TypeScript 应用。 TypeScript 性能优化维度 编译速度 增量构建 | skipLibCheck 运行时性能 类型推断 | 避免 any 包体积 Tr302 收藏 -
React useEffect 遇到快速变化的查询参数时，旧请求可能晚于新请求返回并覆盖界面。本文用 AbortController 在清理阶段取消旧 Fetch，再用 active 标记保护不可取消异步任务的状态写入。302 收藏