前端技术文章
-
文章 · 前端 | 2星期前 | 定时器 · 前端 · 性能排查 · 接口请求 · 轮询 · setInterval · setInterval 页面可见性 clearInterval 前端轮询 请求堆积 定时器清理
本文从前端页面切换后轮询接口越打越多的现象开始，逐步排查重复定时器、未清理请求和页面隐藏仍轮询的问题，并用单例 timer、请求锁、隐藏暂停和卸载清理恢复稳定。490 收藏 -
本文用完整工作流梳理前端表单重复提交治理：先做表单校验，再锁定按钮和请求状态，配合唯一 key 让后端识别重复请求，最后恢复状态并给出可复用清单。253 收藏 -
本文用搜索框快速输入后结果倒退的现象入手，逐步复现旧响应覆盖新结果的问题，并用 AbortController 取消旧请求、请求序号只认最新响应，保证前端列表状态稳定。295 收藏 -
图片懒加载如果没有预留尺寸，页面会在图片加载后发生布局抖动。本文按完整工作流拆解占位比例、IntersectionObserver 按需加载、骨架状态和 CLS 指标复查。128 收藏 -
WebSocket 上线后常见问题不是连接不上，而是断线后状态混乱、消息丢失、重复重连。本文按完整工作流拆解心跳检测、退避重试、恢复订阅和离线消息补发。365 收藏 -
弹窗被导航、地图、页脚或抽屉遮住时，单纯调大 z-index 往往治标不治本。本文按完整工作流拆解层级现场、stacking context 定位、层级表设计、Portal 容器落地和回归验证。350 收藏 -
文章 · 前端 | 2星期前 | 前端 · javascript · URL参数 · 列表筛选 · 页面状态 · 前端 筛选条件 列表页 history.replaceState URLSearchParams 刷新还原
列表页筛选后刷新又回到默认结果，通常不是接口错了，而是筛选状态只存在内存里。本文从复现现象开始，逐步验证状态来源、URL 参数和刷新还原流程，整理一套稳定写法。348 收藏 -
列表页滚动到中间，点进详情再返回却回到顶部，这是很多前端项目都会遇到的体验问题。本文从复现现象开始，逐步验证浏览器默认恢复、组件重建和列表数据时机，最后用位置记录和渲染完成后恢复来解决。458 收藏 -
本文从登录接口成功但用户信息接口仍返回未登录的现场开始，带你一步步检查浏览器是否保存 Cookie、请求是否携带 Cookie、fetch 凭证配置、CORS 响应头、SameSite/Secure 与域名路径，最后给出修复和验证清单。124 收藏 -
文章 · 前端 | 2星期前 | 前端 · javascript · sourcemap · 错误监控 · 线上排查 · 前端 错误监控 告警 onerror sourcemap unhandledrejection
本文用一个轻量前端错误监控方案，演示如何捕获运行时报错和 Promise 未处理拒绝，整理上报字段，并用 sourcemap 还原源码位置形成告警闭环。331 收藏 -
文章 · 前端 | 2星期前 | 前端 · javascript · 缓存治理 · localStorage · Web性能 · 前端 本地缓存 localStorage 过期时间 版本迁移 异常兜底
本文用搜索筛选条件缓存场景，演示 localStorage 如何封装过期时间、版本号、迁移逻辑和异常兜底，避免旧缓存影响页面状态。480 收藏 -
文章 · 前端 | 2星期前 | 前端 · 性能优化 · javascript · 图片优化 · IntersectionObserver · 前端 性能优化 图片懒加载 IntersectionObserver Web性能 首屏优化
本文用商品列表图片场景，演示图片为什么会拖慢首屏，并用 IntersectionObserver 实现占位、进入视口、替换地址和加载完成的懒加载流程。184 收藏 -
本文从用户连续点击提交按钮的真实场景出发，讲解前端如何用请求锁、按钮禁用、幂等请求头和失败回滚来减少重复订单、重复保存和重复消息。273 收藏 -
用一个 10 万条数据的列表场景讲清楚前端虚拟列表的核心思路：不一次性渲染全部 DOM，而是根据 scrollTop 计算可视窗口，只保留屏幕附近的行。352 收藏 -
通过搜索框实时请求场景，演示如何用 AbortController 取消过期 fetch 请求，避免旧接口结果覆盖新输入结果，并给出 React/Vue 通用封装思路。178 收藏