前端技术文章
-
WebGPU 的计算结果不会自动出现在 JavaScript 里：本文用 output 与 stagingBuffer 两个 GPUBuffer，串起 copyBufferToBuffer、mapAsync、getMappedRange、unmap，并补上 GPUDevice.lost 的恢复边界。381 收藏 -
页面关闭、跳转或切后台时，上报请求容易被浏览器中断。本文对比 navigator.sendBeacon 与 fetch keepalive 的适用边界，给出请求体、响应处理、幂等键和重复提交验收方法，帮助把离开页面前的轻量数据上报做得更可靠。379 收藏 -
文章 · 前端 | 1个月前 | 前端 · javascript · css · 浏览器API · document.startViewTransition CSS View Transitions 页面切换动画
用一个无框架商品列表示例，讲清 CSS View Transitions API 的最小接入、元素命名、同文档切换、降级处理和浏览器兼容边界。375 收藏 -
本文整理一套前端表单重复提交防护工作流，从按钮状态、加载提示、请求取消、幂等键、错误恢复到复查指标，帮助提交类页面减少重复订单和重复保存。374 收藏 -
文章 · 前端 | 6天前 | 前端 · css · 浮层 · 浏览器布局 · CSS anchor positioning anchor-name position-area position-try-fallbacks
CSS anchor positioning 可以把提示浮层和目标元素建立布局关系，再用 position-try-fallbacks 处理靠近视口边缘时的换位。本文从一个可运行的提示菜单例子出发，说明锚点声明、浮层定位、溢出回退和兼容降级的验证方法。373 收藏 -
文章 · 前端 | 1星期前 | 浏览器 · javascript · 前端性能 · scheduler.postTask Prioritized Task Scheduling TaskController 前端任务调度
用 scheduler.postTask 把用户可见工作与后台任务分开，讲清优先级、TaskController 取消、能力检测和不支持时的 setTimeout 降级边界。372 收藏 -
文章 · 前端 | 6天前 | 前端 · 性能优化 · javascript · Web API · JavaScript ArrayBuffer structuredClone Web Worker transfer
把 ArrayBuffer 交给 Web Worker 或异步校验流程时，structuredClone 默认会复制数据；在 transfer 中传入原始 buffer 才会转移底层资源。本文用 byteLength 和失败分支验收转移后的状态，并说明 DataCloneError 与旧环境降级边界。371 收藏 -
WebSocket 断线后，如果每个页面都立即重连，网络抖动会迅速变成重连风暴。本文从连接状态、指数退避、随机抖动和页面可见性恢复入手，给出一套可观察、可停止、能回滚的前端重连方案。366 收藏 -
用 CSS @scope 给卡片组件划定样式边界，讲清嵌套 scope、to() 限制、scoping proximity 与不支持浏览器的降级检查。366 收藏 -
content-visibility:auto 可以跳过屏幕外内容的绘制，但尺寸估计不准时会让滚动条和滚动位置抖动。本文用 contain-intrinsic-size、auto 记忆尺寸和渐进校验拆开性能收益与布局稳定性的取舍。366 收藏 -
WebSocket 上线后常见问题不是连接不上，而是断线后状态混乱、消息丢失、重复重连。本文按完整工作流拆解心跳检测、退避重试、恢复订阅和离线消息补发。365 收藏 -
用 CSSStyleSheet 构造共享样式，通过 adoptedStyleSheets 挂载到多个 ShadowRoot，并验证 replaceSync 更新、文档归属与兼容边界。365 收藏 -
前端表单用 blur 做逐字段校验时容易出现提示抖动。用 focusout 事件委托、relatedTarget 判断焦点是否仍在字段组内，再配合 requestId 丢弃过期结果，可以让校验状态稳定下来。356 收藏 -
TypeScript 为 React 开发提供完整的类型支持，提高代码可靠性。 使用 TypeScript 可以让 React 组件、Props、State 等都有完整的类型检查，减少运行时错误。 React 教程查看：https://www.runoob.com/vue3/react-tutori354 收藏 -
用 CSS text-wrap: balance 处理中文卡片标题和文章标题的断行，配合 max-width、@supports 和可访问性检查，避免标题一行孤零零或切换时跳动。353 收藏