javascript
已收录文章:35篇
-
Web Worker 处理大数组或文件切片时,结构化克隆会复制数据,Transferable 则转移底层内存。本文用 ArrayBuffer 实验说明两者的边界、发送后原对象为何被清空,以及如何用生命周期和回收检查避免主线程内存持续上涨。273 收藏
-
从触底加载重复请求的现场出发,拆开 rootMargin、哨兵节点和请求状态之间的关系,给出可验收的去重实现与异常处理边界。462 收藏
-
文章 · 前端 | 1个月前 | html · 前端 · javascript · css · 表单校验 Web Components ElementInternals form-associated custom elements setValidity把日期选择器、验证码框等自定义元素接入原生 form,不必再在提交事件里重复拼装校验。本文用 ElementInternals、setFormValue 和 setValidity 做一个可提交、可校验的 custom element,并说明浏览器能力不足时如何降级。134 收藏
-
HTML inert 是一个全局布尔属性,可以让元素及其后代暂时不能获得焦点、点击或进入辅助技术的可访问性树。本文用一个可关闭弹窗说明如何切换 inert、保留弹窗内焦点、处理 Escape 和旧浏览器降级,并列出容易把 aria-hidden、pointer-events 与 inert 混用的边界。103 收藏
-
原生 HTML dialog 关闭后,焦点恢复、Esc 取消和按钮结果经常被混在一起。本文用一个可复现的确认框拆开 showModal、returnValue、cancel/close 事件和焦点恢复的边界。128 收藏
-
页面关闭、跳转或切后台时,上报请求容易被浏览器中断。本文对比 navigator.sendBeacon 与 fetch keepalive 的适用边界,给出请求体、响应处理、幂等键和重复提交验收方法,帮助把离开页面前的轻量数据上报做得更可靠。379 收藏
-
搜索框连续输入时,较早发出的慢请求可能晚于新请求返回并覆盖结果。用 AbortController 取消上一轮 fetch,再用请求序号做最后一道验收,就能同时降低无效请求和旧数据回写风险。497 收藏
-
前端表单重复提交通常不是单纯把按钮 disabled 就能解决。本文从 submit 事件、form.submit()、requestSubmit() 和原生校验的差异出发,给出一次提交门闩、异步恢复与键盘回车场景的可验证写法。200 收藏
-
拖拽排序跳回原位,通常不是 CSS 位置算错,而是指针事件丢失、视觉顺序没有同步 DOM 顺序,或键盘回退路径没有共用同一套排序逻辑。本文用原生 Pointer Events 拆开定位、提交和验收边界。351 收藏
-
Popover API 的弹层如果只给 :popover-open 写过渡,首次打开和关闭时常会出现闪现或瞬间消失。本文从最小示例出发,说明 @starting-style、transition-behavior、overlay 与 reduced motion 的配合边界。307 收藏
-
文章 · 前端 | 1个月前 | 前端 · 浏览器 · javascript · css · 交互体验 · CSS过渡 dialog popover CSS @starting-style 首次显示动画元素第一次进入页面或从 display:none 变为可见时,普通 transition 没有起始帧,popover 和 dialog 尤其容易出现硬切。CSS @starting-style 可以补上首次显示状态,但仍要处理 overlay、关闭动画、浏览器降级和 prefers-reduced-motion。171 收藏
-
用户连续点击提交按钮,常见结果是重复请求、重复订单或失败后无法恢复。本文从 HTML formdata 事件切入,拆开提交锁、请求取消、失败恢复和键盘回车的边界,给出可核对的前端实现。190 收藏