-
围绕 Web Performance Long Tasks 讲清 50ms 判定边界、PerformanceObserver 记录方式、任务归属分析,以及用批次和让出主线程拆分同步工作的实用方法。
-
JavaScript 的 getClientRects() 返回多个矩形,通常是因为元素是跨多行的行内元素,每一行都有自己的 CSS border box。本文说明 DOMRect 的视口坐标、滚动影响、空列表与零尺寸矩形的区别,并给出与 getBoundingClientRect() 的选择方法。
-
在 async 函数中,直接在 finally 块内使用 await 不会阻塞 Promise 的拒绝/解决流程;若未妥善协调 try/catch/reject/resolve 的时序,清理逻辑将被忽略或导致未处理异常。 在 async 函数中,直接在 finally 块内使用 await 不会阻塞
-
用 Vite mode 管理 development、staging、production 环境变量文件,说明 .env 覆盖关系、VITE_ 客户端边界,以及在 vite.config.js 中使用 loadEnv 的配置方法。
-
通过 navigator.locks.request 为同源多标签页使用稳定锁名,把刷新或同步任务放进异步回调;本文说明排队等待、自动释放、ifAvailable 和 AbortSignal 的边界。
-
field-sizing: content 可以让 input 和 textarea 按内容伸缩,但实际使用还要配合 min-width、max-width、maxlength,并为未支持的浏览器保留固定尺寸回退。
-
用一个可重复运行的列表切换示例,验证 View Transitions 并发导航、skipTransition、finished 和失败回滚的边界。
-
CSS :is() 自身不增加权重,但会采用参数列表中最高 specificity。本文通过计算示例说明 ID 分支如何抬高整条规则,并给出同权重分组、:where()、拆分例外与 cascade layer 的控制方法。
-
用 Promise.withResolvers 将一次事件转换为可 await 的结果,结合 AbortSignal 处理预先取消,并在成功、取消与注册异常时移除监听器,避免只用 once 或 race 留下订阅。
-
content-visibility: auto 会让屏外内容使用尺寸占位,进入视口后真实高度变化就可能引起滚动跳动。本文说明 contain-intrinsic-size、auto 记忆尺寸、图片比例和三个排查观测值的用法。
-
讲清 Web Animations API 的 Animation.commitStyles() 如何把动画当前计算值写入目标元素的 style 属性,并说明 finished、fill: forwards、cancel() 与兼容策略。
-
Fetch 的 Response body 是一次性可读流。response.json() 消费后,response.text()、blob() 或第二次 json() 都可能因 body 已使用而失败。本文解释 bodyUsed、clone 和单次解析的边界,给出可维护的响应处理方式。
-
CSS text-emphasis 是给文字添加着重标记的简写属性。本文从最小用法开始,说明 filled、open、dot、circle、sesame 和自定义单字符的选择,再解释颜色、位置、继承、行高影响以及保留普通文本可读性的降级思路。
-
页面滚动时让目录进度条、卡片和提示状态跟着视口变化,不必为每次 scroll 事件写一套节流脚本。本文用 animation-timeline: view() 绑定视图进度,说明关键帧顺序、最近滚动容器、@supports 降级和 reduced-motion 验收。
-
用 Blob.slice 把大文件切成固定分片,配合稳定恢复标识、单片重试和已完成分片查询,实现刷新页面后继续上传的前端方案。