性能优化
已收录文章：55篇
-
本文用完整工作流讲解前端图片懒加载：首屏主图优先加载，视口外图片延后请求，并通过 LCP、网络请求和滚动体验验证优化效果。105 收藏
-
本文从表单联动字段使用旧状态校验、用户连点导致重复提交的现场出发，排查原因并给出派生规则、同步校验和提交锁的修复方案。285 收藏
-
本文用完整工作流讲解前端长列表虚拟滚动：计算可视区、设置上下占位、只渲染窗口数据，并用卡顿排查清单验证优化效果。111 收藏
-
图片懒加载如果没有预留尺寸，页面会在图片加载后发生布局抖动。本文按完整工作流拆解占位比例、IntersectionObserver 按需加载、骨架状态和 CLS 指标复查。128 收藏
-
列表页滚动到中间，点进详情再返回却回到顶部，这是很多前端项目都会遇到的体验问题。本文从复现现象开始，逐步验证浏览器默认恢复、组件重建和列表数据时机，最后用位置记录和渲染完成后恢复来解决。458 收藏
-
文章 · 前端 | 1星期前 | 前端 · 性能优化 · javascript · 图片优化 · IntersectionObserver · 前端 性能优化 图片懒加载 IntersectionObserver Web性能 首屏优化本文用商品列表图片场景，演示图片为什么会拖慢首屏，并用 IntersectionObserver 实现占位、进入视口、替换地址和加载完成的懒加载流程。184 收藏
-
本文用订单列表查询场景，演示普通二级索引为什么需要回表，以及如何通过覆盖索引减少回表，并用 EXPLAIN 的 Extra 验证优化结果。381 收藏
-
本文用商品详情缓存同时过期的场景，演示 Redis 缓存雪崩的形成过程，并给出 TTL 抖动、热点预热、互斥重建和降级保护的落地方案。139 收藏
-
本文用后台订单列表总数统计场景，演示为什么大表每次 COUNT 会拖慢接口，并按精确总数、条件筛选、缓存和汇总表给出优化方案。336 收藏
-
本文用一次 MySQL 连接数告警场景，演示如何区分连接池突增、慢 SQL 堵塞和长事务占用，并给出排查命令和上线兜底建议。404 收藏
-
本文用订单列表深分页场景，演示为什么 LIMIT 大偏移会变慢，并通过覆盖索引、延迟关联和游标式分页减少无效扫描。339 收藏
-
本文从一次商品详情接口抖动出发，演示如何发现 Redis 热 Key、判断访问倾斜，并通过过期时间抖动、本地短缓存、singleflight 合并加载和拆分 Key 降低热点冲击。111 收藏