前端技术文章
-
ResizeObserver 报告 ResizeObserver loop completed with undelivered notifications 时，先区分布局读取与写入，再用 requestAnimationFrame 合并写入，最后用阈值和断点确认循环已经收敛。384 收藏 -
用 CSS @scope 给卡片组件划定样式边界，讲清嵌套 scope、to() 限制、scoping proximity 与不支持浏览器的降级检查。366 收藏 -
用 CSS field-sizing: content 让文本输入框按内容收缩和增长，同时用 min-width、max-width 与 fallback 控制窄屏布局和旧浏览器兼容。442 收藏 -
多个标签页同时刷新订单或缓存时，Web Locks API 可以把写入协调到一个持有者。文章用 navigator.locks.request() 说明 ifAvailable、AbortSignal 超时、query() 诊断和 steal 恢复的边界。386 收藏 -
SPA 局部导航请求失败时，先保留旧内容，再把错误、重试和兼容回退收进同一条验收流程。文章用 Navigation API 的 navigateerror、intercept() 和能力检测说明如何避免空白页与重复重试。308 收藏 -
SPA 同时处理链接点击、后退和表单跳转时，History API 很容易漏掉边界。用 Navigation API 统一接管导航事件，再配合失败恢复和兼容回退，可以把加载、滚动、焦点和错误状态收进一条可验收的流程。291 收藏 -
围绕主题按钮的 hover、浅色背景和边框状态，用 CSS color-mix() 派生 token，再按对比度阈值验收并保留旧浏览器 fallback。173 收藏 -
用 CSS color-mix() 从一个品牌色派生悬停、浅底和边框颜色，并用对比度阈值验收，兼顾现代浏览器与旧环境降级。406 收藏 -
用 CSS text-wrap: balance 处理中文卡片标题和文章标题的断行，配合 max-width、@supports 和可访问性检查，避免标题一行孤零零或切换时跳动。330 收藏 -
用 CSS text-wrap: balance 处理中文卡片标题和文章标题的断行，配合 max-width、@supports 和可访问性检查，避免标题一行孤零零或切换时跳动。353 收藏 -
用 CSS Anchor Positioning 给提示气泡和筛选浮层建立稳定锚点，结合 position-try 回退与 position-visibility 处理视口边缘、滚动和旧浏览器兼容。349 收藏 -
小报表可以由浏览器直接生成，大数据量报表则应交给后端异步任务，并通过进度事件和短时下载地址交付。关键不是文件后缀，而是浏览器内存、请求时限、失败重试和权限边界。331 收藏 -
WebSocket 断线后，如果每个页面都立即重连，网络抖动会迅速变成重连风暴。本文从连接状态、指数退避、随机抖动和页面可见性恢复入手，给出一套可观察、可停止、能回滚的前端重连方案。366 收藏 -
大文件上传到底该让浏览器把数据交给业务服务，还是直接送到对象存储？本文从流量路径、分片重试、权限边界和完成校验四个维度比较两种方案，并给出基于 Blob.slice、预签名 URL 与 uploadId 的可落地实现边界。448 收藏 -
PWA 发布新版本后，用户仍看到旧页面，通常不是浏览器完全没有更新，而是旧页面、waiting 状态和缓存版本同时存在。本文用一个可落地的 Service Worker 更新流程，讲清缓存命名、skipWaiting、clients.claim、提示刷新和回滚检查。448 收藏