前端
已收录文章:35篇
-
拖拽排序跳回原位,通常不是 CSS 位置算错,而是指针事件丢失、视觉顺序没有同步 DOM 顺序,或键盘回退路径没有共用同一套排序逻辑。本文用原生 Pointer Events 拆开定位、提交和验收边界。351 收藏
-
CSS :has() 让父元素可以根据子元素状态切换样式,适合表单错误提示、选中卡片和条件高亮。文章用 :user-invalid、:checked 与 @supports 说明最小写法、边界和旧浏览器降级。340 收藏
-
小报表可以由浏览器直接生成,大数据量报表则应交给后端异步任务,并通过进度事件和短时下载地址交付。关键不是文件后缀,而是浏览器内存、请求时限、失败重试和权限边界。331 收藏
-
Chrome 在 2026 年展示了 WebMCP 这一面向浏览器智能体的实验性能力。真正接入时,先把网页动作收敛成可授权、可校验、可回退的工具接口,再决定是否进入试验,而不是把现有 API 全部暴露出去。326 收藏
-
文章 · 前端 | 2个月前 | 前端 · 性能优化 · javascript · ResizeObserver ResizeObserver loop completed 表格自适应列宽 前端防抖 ResizeObserverEntry表格列宽跟随容器变化时,ResizeObserver 回调里直接改尺寸,容易让观察回调再次触发,最终出现 ResizeObserver loop completed with undelivered notifications。本文比较同步改宽、requestAnimationFrame 合并和断点缓存三种方案,给出一个可复查的表格列宽实现。301 收藏
-
拖拽排序松手后顺序回跳,通常不是 CSS 问题,而是指针位置、占位元素和最终数组没有在同一个时序里更新。本文用 Pointer Events、占位节点和单一提交点拆解竞态,并给出可复核的实现与验收方法。296 收藏
-
Fetch API 适合现代上传请求,但标准接口目前没有通用的上传进度事件。本文用一个可回退的前端上传流程,说明何时选择 XMLHttpRequest、如何显示进度,以及取消、失败和重复提交怎么验收。290 收藏
-
搜索框快速输入时,慢请求可能晚于新请求返回,旧结果就会覆盖当前关键词。本文用请求序号、AbortController 和有限并发预算拆解竞态边界,并给出取消、回收和键盘操作下的验收办法。260 收藏
-
从输入组件重构案例说明为什么不应默认把 DOM Event 传到业务层,并给出语义回调、原生事件保留边界、TypeScript 示例和测试判断清单。234 收藏
-
中文输入法候选词还没确认时,AI 聊天框把回车当成发送,会截断用户正在输入的句子。本文用 compositionstart、compositionend 和 InputEvent.isComposing 组合出稳定的回车发送规则,并补上移动端、粘贴和可访问性检查。217 收藏
-
CSS if() 可以在单个属性值中根据 style()、media() 或 supports() 条件选择结果,适合收拢主题和响应式分支,但它仍是实验性能力。本文用自定义属性示例说明条件顺序、else 回退、@media 与 @supports 的边界,并给出上线前的兼容检查。216 收藏
-
大文件上传卡顿,通常不是把请求并发数调大就能解决。前端需要先把 File 切成固定大小的分片,用 SHA-256 或服务端校验确认每片,再用有限并发窗口上传,失败时只重试缺失分片。本文用浏览器原生 API 拆出一套可回查、可暂停、可恢复的实现边界。211 收藏