「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」。

当面试官问到性能优化的时候，很多面试者也比较苦恼。平时的实践太少，也很少主动接触，基本上就是为了应付面试，背的一些理论。不过还是需要了解的，有些方法平时写代码的时候用到可以省很多事。

前端性能优化的重点就是为了让用户的体验更友好，提升加载速度。最常用的方法就是减少文件大小并最大限度的减少页面加载所需的请求数量。

掘金个人主页的网络请求

需要注意的一点，加载时间分为用户感知的时间和实际的页面加载时间。优化用户感知时间可以提高用户的使用体验，优化页面的实际加载时间通常作为性能基准指标。

有以下几种方法可以提高网站的响应能力：

减少HTTP请求

加载网页时，浏览器必须为每个 HTTP 请求打开一个单独的 TCP 连接，这等于它需要下载的页面元素的数量。

问题是浏览器可以打开到单个主机的并发连接数是有限制的。存在此限制是为了防止服务器因大量 HTTP 请求而过载。然而，它也是一个潜在的瓶颈，经常迫使浏览器开始排队连接请求。

文件压缩

每个网站页面都是由一组 HTML、JavaScript、CSS 和（可能）其他代码文件构建的。页面越复杂，代码文件越大，加载时间越长。

通过文件压缩，这些文件可以缩小到其原始大小的一小部分，以提高站点响应能力。gzip因其快速的编码/解码时间和高压缩率而受到青睐，是最受欢迎的文件压缩选择。它可以将代码文件缩小多达 60% 甚至 80%。

几乎所有的CDN都提供自动文件压缩。

HTTP缓存标头在浏览器解析网站的方式中起着重要作用，因为它们决定了缓存哪些内容项以及缓存多长时间。

缓存是将静态文件存储在您的服务器之外——无论是在访问者的本地上还是在附近的 CDN PoP 上。极大地提高网站的加载速度。

缺点是手动缓存标头管理可能是一项乏味且效率低下的任务。此外，当页面开始加载时处理动态生成的内容（例如，AJAX 对象甚至动态生成的 HTML 文件）时，缓存机制经常会遇到问题。

减少代码体积有以下几种方法：代码分割、减少无用代码、按需加载等

一般是使用webpack的splitChunks。使用方法页很简单，通过简单的配置就可以，感兴趣的可以了解下

就是在代码层面的优化，如去掉无用的变量，优化循环，抽组件等优化方法。

简单来说，就是需要通过触发动作去加载资源。常见的例子，瀑布流列表的懒加载。

一般有以下几种方法：

注意：图片压缩时可以根据实际的显示大小来进行图片压缩，避免不重要的图片过大影响性能。