前端技术文章
-
WebGPU 的计算结果不会自动出现在 JavaScript 里：本文用 output 与 stagingBuffer 两个 GPUBuffer，串起 copyBufferToBuffer、mapAsync、getMappedRange、unmap，并补上 GPUDevice.lost 的恢复边界。381 收藏 -
IntersectionObserver 的 scrollMargin 会扩展 root 内嵌套滚动容器的裁剪边界，适合处理轮播、虚拟列表和懒加载的提前观察。本文说明它与 rootMargin、threshold 的分工，以及重建观察器和兼容性回退方法。380 收藏 -
React Suspense 的 fallback 只负责等待态，数据 Promise reject 后要由 Error Boundary 展示失败态。本文用一个可重试的 Promise 状态说明如何接入 Try again、resetKeys 和缓存边界。379 收藏 -
页面关闭、跳转或切后台时，上报请求容易被浏览器中断。本文对比 navigator.sendBeacon 与 fetch keepalive 的适用边界，给出请求体、响应处理、幂等键和重复提交验收方法，帮助把离开页面前的轻量数据上报做得更可靠。379 收藏 -
structuredClone 并不是任何对象都能复制。本文用最小示例说明函数、DOM 节点、Symbol、WeakMap 等失败边界，并解释 ArrayBuffer 的 transfer 转移、原型链和属性描述符变化。377 收藏 -
文章 · 前端 | 2个月前 | 前端 · javascript · css · 浏览器API · document.startViewTransition CSS View Transitions 页面切换动画
用一个无框架商品列表示例，讲清 CSS View Transitions API 的最小接入、元素命名、同文档切换、降级处理和浏览器兼容边界。375 收藏 -
长列表不要让 ResizeObserver 覆盖所有组件。本文用 IntersectionObserver 控制可见范围，再用 requestAnimationFrame 和尺寸缓存合并通知，最后补上离开视口与组件卸载时的清理方式。373 收藏 -
CSS anchor positioning 可以把提示浮层和目标元素建立布局关系，再用 position-try-fallbacks 处理靠近视口边缘时的换位。本文从一个可运行的提示菜单例子出发，说明锚点声明、浮层定位、溢出回退和兼容降级的验证方法。373 收藏 -
文章 · 前端 | 1个月前 | 浏览器 · javascript · scheduler.postTask Prioritized Task Scheduling TaskController 前端任务调度
用 scheduler.postTask 把用户可见工作与后台任务分开，讲清优先级、TaskController 取消、能力检测和不支持时的 setTimeout 降级边界。372 收藏 -
CSS subgrid 的关键是让嵌套网格继承父级列或行轨道。本文从最小配置、轴向继承、网格线映射和隐式轨道四个方面，排查卡片与表单对不齐的常见原因。371 收藏 -
文章 · 前端 | 1个月前 | 前端 · 性能优化 · javascript · JavaScript ArrayBuffer structuredClone Web Worker transfer
把 ArrayBuffer 交给 Web Worker 或异步校验流程时，structuredClone 默认会复制数据；在 transfer 中传入原始 buffer 才会转移底层资源。本文用 byteLength 和失败分支验收转移后的状态，并说明 DataCloneError 与旧环境降级边界。371 收藏 -
讲清 TypeScript satisfies、泛型返回值与 as const 的分工，用路由配置示例保留 kind 和 path 的字面量，并说明 readonly 与运行时校验边界。368 收藏 -
用 container-type: inline-size 建立卡片查询容器，再通过 @container 和 container-name 按组件自身宽度切换单列与并排布局，覆盖嵌套容器、回退样式和验收边界。367 收藏 -
CSS :has() 的难点在匹配范围而不是语法。本文用复杂列表说明锚点元素、直接子代、任意后代、相邻兄弟与 :not() 的组合，并给出 @supports 降级和性能边界。367 收藏 -
围绕 Vite import.meta.glob 的路径基准、字面量模式、默认懒加载、eager、import 与 query 选项，整理匹配为空和取值异常的排查方法。367 收藏