前端技术文章
-
Vue computed getter 不应修改自己读取的响应式依赖，否则会把派生值和源状态连成循环。本文用最小示例解释回写原因，并给出事件处理器、纯 computed、watch 和 writable computed 的分工边界。352 收藏 -
讲清 Fetch 配合 AbortController 传递 abort reason 的写法，区分用户取消、超时与网络异常，并说明组合信号、兼容处理和 signal 一次性边界。351 收藏 -
通过稳定的 id、aria-describedby 和 aria-invalid 关联表单帮助文本与错误提示，说明动态校验、可见状态和复杂内容边界。349 收藏 -
Web Locks API 能让同源标签页和 Worker 围绕同一锁名协调任务，但默认排队只避免并发，不会自动消除顺序重复。本文讲清 ifAvailable、锁内完成标记、长期持锁和服务端幂等的组合方式。348 收藏 -
Promise.all 失败只代表聚合结果不可用，不会自动取消其他请求。本文用 AbortController、共享 AbortSignal 和请求代次，处理并发请求失败、切页、重试与迟到响应。347 收藏 -
fetchpriority 是浏览器的图片获取优先级提示。本文说明如何识别首屏关键图片，只给 LCP 候选设置 high，并处理 lazy、CSS 背景、preload、srcset 与验证边界。343 收藏 -
WebSocket close code 排查不要只盯着数字：浏览器主动关闭只能使用 1000 或 3000–4999，1006 等保留码只表示观测到的异常；结合 reason、wasClean、readyState 和重连退避，才能定位协议、消息大小、服务端和网络问题。341 收藏 -
Fetch API 的 Response.json() 失败后不能直接再读同一个响应体。本文用 text() 与 clone() 解释 bodyUsed 边界，并给出保留原始文本、记录状态码和控制日志内容的实用写法。339 收藏 -
讲清 HTML dialog 模态关闭后读取 returnValue 的正确时机，比较 close(value)、按钮 value 与 method=dialog，并处理 Esc 取消和旧值残留问题。339 收藏 -
CSS :is() 自身不增加权重，但会采用参数列表中最高 specificity。本文通过计算示例说明 ID 分支如何抬高整条规则，并给出同权重分组、:where()、拆分例外与 cascade layer 的控制方法。327 收藏 -
content-visibility: auto 会让屏外内容使用尺寸占位，进入视口后真实高度变化就可能引起滚动跳动。本文说明 contain-intrinsic-size、auto 记忆尺寸、图片比例和三个排查观测值的用法。325 收藏 -
Fetch 的 Response body 是一次性可读流。response.json() 消费后，response.text()、blob() 或第二次 json() 都可能因 body 已使用而失败。本文解释 bodyUsed、clone 和单次解析的边界，给出可维护的响应处理方式。323 收藏 -
CSS Anchor Positioning 可以让 tooltip、菜单等浮层直接关联触发元素，并通过 position-try 配置靠近视口边缘时的回退位置。316 收藏 -
CSS scroll anchoring 通常用于抵消异步内容插入造成的页面位移；如果它与自定义滚动逻辑冲突，可用 overflow-anchor: none 在局部容器关闭，再检查父子滚动框和尺寸预留。313 收藏 -
TypeScript 项目遇到 structuredClone 类型缺失时，按浏览器与 Node.js 宿主分别检查 target、lib、types 和 noLib，再区分编译期声明、运行时支持与 DataCloneError 数据边界。310 收藏