前端技术文章
-
本文整理一套前端 CORS 预检失败的排查流程，从浏览器请求头、OPTIONS 预检、服务端响应、网关转发到 Cookie 场景逐步定位，帮助接口联调更快闭环。422 收藏 -
本文从 position sticky 写了却不吸顶的现场出发，按滚动容器、top 值、父级 overflow、高度限制和表格/弹窗布局逐步排查，并给出修复与复查清单。449 收藏 -
本文用完整工作流讲解前端图片懒加载：首屏主图优先加载，视口外图片延后请求，并通过 LCP、网络请求和滚动体验验证优化效果。105 收藏 -
本文从表单联动字段使用旧状态校验、用户连点导致重复提交的现场出发，排查原因并给出派生规则、同步校验和提交锁的修复方案。285 收藏 -
本文用完整工作流讲解前端长列表虚拟滚动：计算可视区、设置上下占位、只渲染窗口数据，并用卡顿排查清单验证优化效果。111 收藏 -
文章 · 前端 | 2天前 | 定时器 · 前端 · 性能排查 · 接口请求 · 轮询 · setInterval · setInterval 页面可见性 clearInterval 前端轮询 请求堆积 定时器清理
本文从前端页面切换后轮询接口越打越多的现象开始，逐步排查重复定时器、未清理请求和页面隐藏仍轮询的问题，并用单例 timer、请求锁、隐藏暂停和卸载清理恢复稳定。490 收藏 -
本文用完整工作流梳理前端表单重复提交治理：先做表单校验，再锁定按钮和请求状态，配合唯一 key 让后端识别重复请求，最后恢复状态并给出可复用清单。253 收藏 -
本文用搜索框快速输入后结果倒退的现象入手，逐步复现旧响应覆盖新结果的问题，并用 AbortController 取消旧请求、请求序号只认最新响应，保证前端列表状态稳定。295 收藏 -
图片懒加载如果没有预留尺寸，页面会在图片加载后发生布局抖动。本文按完整工作流拆解占位比例、IntersectionObserver 按需加载、骨架状态和 CLS 指标复查。128 收藏 -
WebSocket 上线后常见问题不是连接不上，而是断线后状态混乱、消息丢失、重复重连。本文按完整工作流拆解心跳检测、退避重试、恢复订阅和离线消息补发。365 收藏 -
弹窗被导航、地图、页脚或抽屉遮住时，单纯调大 z-index 往往治标不治本。本文按完整工作流拆解层级现场、stacking context 定位、层级表设计、Portal 容器落地和回归验证。350 收藏 -
文章 · 前端 | 3天前 | 前端 · javascript · URL参数 · 列表筛选 · 页面状态 · 前端 筛选条件 列表页 history.replaceState URLSearchParams 刷新还原
列表页筛选后刷新又回到默认结果，通常不是接口错了，而是筛选状态只存在内存里。本文从复现现象开始，逐步验证状态来源、URL 参数和刷新还原流程，整理一套稳定写法。348 收藏 -
列表页滚动到中间，点进详情再返回却回到顶部，这是很多前端项目都会遇到的体验问题。本文从复现现象开始，逐步验证浏览器默认恢复、组件重建和列表数据时机，最后用位置记录和渲染完成后恢复来解决。458 收藏 -
本文从登录接口成功但用户信息接口仍返回未登录的现场开始，带你一步步检查浏览器是否保存 Cookie、请求是否携带 Cookie、fetch 凭证配置、CORS 响应头、SameSite/Secure 与域名路径，最后给出修复和验证清单。124 收藏 -
文章 · 前端 | 5天前 | 前端 · javascript · sourcemap · 错误监控 · 线上排查 · 前端 错误监控 告警 onerror sourcemap unhandledrejection
本文用一个轻量前端错误监控方案，演示如何捕获运行时报错和 Promise 未处理拒绝，整理上报字段，并用 sourcemap 还原源码位置形成告警闭环。331 收藏