#性能优化

图片往往是页面里最大的资源,也是拖慢 LCP 的头号嫌疑。这篇从选对格式、用 srcset 适配屏幕、懒加载、到防止布局抖动,给一套能直接落地的图片优化清单。

监听元素是否进入视口,过去要靠 scroll 事件加 getBoundingClientRect,既卡又难写。IntersectionObserver 把这件事交给浏览器异步处理。这篇用三个真实场景讲透它的用法和参数。

事件委托是前端最实用的性能技巧之一,但要真正用对,得先搞懂事件流的三个阶段、target 和 currentTarget 的区别。这篇把事件冒泡、捕获讲透,再落到动态列表、阻止冒泡等真实场景。

防抖和节流是前端最常被问、也最常写错的两个工具函数。这篇从搜索框、滚动监听这些真实场景出发,把两者的差别、几种实现变体,以及可取消、Promise 化等进阶写法一次讲清。

同样是刷新页面,为什么有的资源直接命中本地、有的要回服务器问一句、有的又重新下载?这篇把 Cache-Control、ETag、Last-Modified 串成一条决策链路,并给出一套静态资源 + HTML 的实战缓存策略。

性能优化不应该只在页面变慢后救火,更应该提前设定预算、持续测量并接入发布流程。本文介绍如何围绕 LCP、INP、CLS、资源体积和接口耗时建立一套可执行的前端性能预算。

慢查询优化不要一上来就加索引。本文按现象确认、SQL 定位、EXPLAIN 分析、索引改造和回归验证的顺序,梳理一套 MySQL 慢查询排查流程。