前端
已收录文章：42篇
-
文章 · 前端 | 2星期前 | 前端 · javascript · 浏览器性能 · 交互优化 · 数据表格 · 前端 性能优化 requestAnimationFrame 布局抖动 表格列拖拽 Pointer Events表格列拖拽时出现指针跟不上、列宽抖动和松手后跳回，通常不是 Pointer Events 本身慢，而是每个 pointermove 都同步读写布局。本文用 120Hz 屏幕的可复现场景，比较直接写入与 requestAnimationFrame 合帧方案，并给出最终验收指标与边界。397 收藏
-
文章 · 前端 | 2星期前 | 前端 · javascript · css · 浏览器API · document.startViewTransition CSS View Transitions 页面切换动画用一个无框架商品列表示例，讲清 CSS View Transitions API 的最小接入、元素命名、同文档切换、降级处理和浏览器兼容边界。375 收藏
-
本文整理一套前端表单重复提交防护工作流，从按钮状态、加载提示、请求取消、幂等键、错误恢复到复查指标，帮助提交类页面减少重复订单和重复保存。374 收藏
-
WebSocket 上线后常见问题不是连接不上，而是断线后状态混乱、消息丢失、重复重连。本文按完整工作流拆解心跳检测、退避重试、恢复订阅和离线消息补发。365 收藏
-
用一个 10 万条数据的列表场景讲清楚前端虚拟列表的核心思路：不一次性渲染全部 DOM，而是根据 scrollTop 计算可视窗口，只保留屏幕附近的行。352 收藏
-
弹窗被导航、地图、页脚或抽屉遮住时，单纯调大 z-index 往往治标不治本。本文按完整工作流拆解层级现场、stacking context 定位、层级表设计、Portal 容器落地和回归验证。350 收藏
-
文章 · 前端 | 1个月前 | 前端 · javascript · URL参数 · 列表筛选 · 页面状态 · 前端 筛选条件 列表页 history.replaceState URLSearchParams 刷新还原列表页筛选后刷新又回到默认结果，通常不是接口错了，而是筛选状态只存在内存里。本文从复现现象开始，逐步验证状态来源、URL 参数和刷新还原流程，整理一套稳定写法。348 收藏
-
文章 · 前端 | 1个月前 | 前端 · vite · 运维手册 · 白屏排查 · CDN缓存 · 发布回滚 · React 前端 白屏 vite CDN缓存 index.html 发布回滚 JS 404Vite 或 React 前端发布后突然白屏，常见原因是 index.html 与带 hash 的 JS/CSS 产物不一致，CDN 或浏览器还命中了旧缓存。处理时先确认控制台和 Network 里的 JS 404，再回滚 HTML、清理 CDN、保留最近构建产物，并补上发布前后的检测与告警。342 收藏
-
CSS 容器查询让卡片组件根据自身可用宽度改变布局，而不是只看浏览器宽度。本文用商品卡片示例讲清 container-type、@container、断点选择和回归检查。339 收藏
-
文章 · 前端 | 1个月前 | 前端 · javascript · sourcemap · 错误监控 · 线上排查 · 前端 错误监控 告警 onerror sourcemap unhandledrejection本文用一个轻量前端错误监控方案，演示如何捕获运行时报错和 Promise 未处理拒绝，整理上报字段，并用 sourcemap 还原源码位置形成告警闭环。331 收藏
-
文章 · 前端 | 2星期前 | 表格 · 前端 · 性能优化 · javascript · ResizeObserver · ResizeObserver ResizeObserver loop completed 表格自适应列宽 前端防抖 ResizeObserverEntry表格列宽跟随容器变化时，ResizeObserver 回调里直接改尺寸，容易让观察回调再次触发，最终出现 ResizeObserver loop completed with undelivered notifications。本文比较同步改宽、requestAnimationFrame 合并和断点缓存三种方案，给出一个可复查的表格列宽实现。301 收藏
-
本文用搜索框快速输入后结果倒退的现象入手，逐步复现旧响应覆盖新结果的问题，并用 AbortController 取消旧请求、请求序号只认最新响应，保证前端列表状态稳定。295 收藏