学习前端性能优化

一提到前端性能优化，普遍的答案就是：
减少 HTTP 请求数
使用精灵图（Sprite 图）
压缩代码
图片懒加载
防抖与节流
使用 CSS 动画代替 JS 动画

这些方法本身没有错误，但为什么要这么做呢？我们不妨从用户的使用体验角度来理解性能优化的核心目标。
用户感知的性能指标

从用户体验角度来看，性能优化主要围绕以下三个关键指标展开：

1. 加载指标
   页面首次加载所需时间，直接影响用户留存率。
   如果页面加载过慢，用户可能会直接离开。
   关键资源加载延迟会导致“白屏”或“空白内容”。

2. 交互指标
   用户点击按钮后得到反馈的时间。
   这决定了用户操作是否流畅，是否有“响应感”。
   若响应延迟过高，用户会感到页面卡顿甚至无响应。

3. 视觉稳定性指标
   页面在渲染过程中元素布局变化的稳定性。
   典型问题如：准备点击某个元素时，突然弹出广告导致误触。
   这类问题会影响用户体验，甚至造成负面印象。

这三个指标本质上都指向了两个核心优化方向：
资源请求效率
浏览器渲染效率
一、加载过程分析与瓶颈点
当我们在浏览器中输入 URL 并按下回车后，整个加载流程如下：
检查本地缓存是否存在该网站；
若不存在，则向 DNS 服务器发起查询，获取 IP 地址；
建立 TCP 连接；
发起 HTTP 请求；
获取资源；
解析并渲染页面。

瓶颈点分析：

1. 资源获取阶段
   网络带宽限制
   资源大小影响加载速度
   并发请求限制（通常为 6~8 个）

2. 解析与渲染阶段
   HTML/CSS/JS 的解析耗时
   渲染树构建、布局计算（Reflow）、绘制（Repaint）

资源缓存策略

为了减少重复请求带来的性能损耗，可以利用 HTTP 缓存机制：
缓存字段 说明
Expires 设置资源过期时间（HTTP 1.0）
Cache-Control 更灵活的缓存控制策略（HTTP 1.1）
ETag / If-None-Match 强验证器，用于判断资源是否更改
Last-Modified / If-Modified-Since 弱验证器，基于时间戳

示例：Nginx 中设置静态资源缓存 30 天

nginx
深色版本

location ~ .(gif|jpg|jpeg|png|bmp|swf)$ {
expires 30d;
}

并发请求优化
由于浏览器对同一域名下的并发请求数有限制（一般为 6~8 个），可以通过以下方式优化：
合并请求：将多个小资源合并成一个文件（如精灵图、打包 JS/CSS）；
域名发散：使用多个子域名分担请求压力（注意 DNS 查询成本增加）；

资源压缩与构建工具
资源大小直接影响加载速度，因此应尽可能压缩资源：
使用 Gzip/Brotli 压缩文本资源（HTML、CSS、JS）；
使用 Webpack/Vite 等构建工具进行代码压缩、Tree Shaking、Splitting 等优化。
解析与渲染优化

在获取资源后，浏览器会依次进行以下处理：
解析 HTML 构建 DOM 树；
解析 CSS 构建 CSSOM；
合并 DOM + CSSOM 构建渲染树；
布局（Layout）与绘制（Paint）。

常见问题及优化建议：
HTML 结构不规范（如
少斜杠、

嵌套错误）会导致浏览器纠错，延长解析时间；
Script 标签阻塞解析：
推荐将 JS 放在 最后；
或使用 defer 和 async 属性避免阻塞 HTML 解析；
defer：等待 HTML 解析完成后再执行脚本；
async：异步加载脚本，加载时不阻塞 HTML 解析，加载完成后立即执行。

回流（Reflow）与重绘（Repaint）
回流：当元素位置或尺寸发生变化时触发，代价高昂；
重绘：仅颜色等样式变化时触发，代价较低；
优化建议：
尽量使用 transform 替代 top/left 改变位置；
批量修改样式，避免频繁触发回流；
对图片设置固定宽高，避免占位缺失引发布局偏移。

二、代码层面的性能优化
除了资源加载与渲染优化，代码本身的写法也对性能有显著影响。
时间复杂度优化 在数据量较大时，不同算法的性能差异尤为明显；

以前接过的一个老项目举例，里面有几个大数据量的数组，需要判断这个数组A中的每一个值是否存在另外一个数组B中，进行下一步的业务。大多第一反应就是循环遍历数组然后B.includes(aItem),确实可以实现需求 算法复杂度为（O(n × m)）：
A.forEach(item => {
if (B.includes(item)) {
}
});

如果把数组B转换成Set类型，使用B.has（aItem），算法复杂度为O(n)，在数据量变大时差别越大
const setB = new Set(B);
A.forEach(item => {
if (setB.has(item)) {
}
});
使用 Set 可显著提升查找效率。

内存管理优化
避免频繁创建临时对象；
注意内存泄漏问题（如事件监听未解绑、闭包引用过大对象）；
使用工具检测内存占用情况（如 Chrome DevTools 的 Memory 面板）。

总结
前端性能优化的核心在于：
提高资源加载效率：合理使用缓存、压缩、合并、懒加载；
提升渲染效率：避免不必要的回流与重绘，优化 DOM 操作；
优化代码结构与算法：降低时间复杂度，减少内存消耗。
最终目的只有一个：提供更快、更稳定、更流畅的用户体验。