大白话前端性能优化，常见方法有哪些？
咱来唠唠前端性能优化，其实就是想办法让网页打开得更快、用起来更流畅，就跟给汽车做保养让它跑得更顺溜一样。下面详细说说常见的优化方法：
压缩代码
- CSS 压缩：CSS 代码里有好多空格、换行符啥的，这些东西对浏览器显示页面没啥用，还占地方。压缩 CSS 就是把这些多余的东西去掉，让代码变得更紧凑。比如说，把
body { font - size: 16px; line - height: 1.5; }变成body{font-size:16px;line-height:1.5}，这样文件变小了，浏览器下载起来就快多了。 - JavaScript 压缩：和 CSS 一样，JavaScript 代码里也有很多不必要的空格、注释。压缩 JavaScript 就是把这些东西去掉，还会把变量名换成更短的，像把
let myVeryLongVariableName换成let a。这样一来，代码文件小了，加载速度也就快了。
图片优化
- 图片格式选择：不同的图片格式适合不同的场景。像 JPEG 格式适合色彩丰富的照片，它能在保证一定质量的前提下把文件大小压得比较小；PNG 格式适合有透明效果的图片；SVG 格式适合图标和一些简单的图形，它是矢量图，放大缩小都不会失真，而且文件一般比较小。
- 图片压缩：用专门的图片压缩工具，把图片里一些人眼不太能察觉的细节去掉，这样图片文件就变小了。比如说，一张 2MB 的照片，经过压缩后可能就变成 500KB 了，下载速度就快多了。
- 响应式图片：现在的设备屏幕大小不一样，有的是手机，有的是电脑。响应式图片就是根据设备屏幕的大小，给它显示不同尺寸的图片。在手机上就显示小一点的图片，在电脑上就显示大一点的图片，这样既能保证图片在不同设备上都能清晰显示，又不会让手机下载太大的图片浪费流量和时间。
缓存机制
- 浏览器缓存：浏览器有个缓存功能，就像一个小仓库。当你第一次访问一个网页时，浏览器会把网页里的一些文件，像 CSS、JavaScript、图片等，存到这个小仓库里。下次你再访问这个网页时，浏览器会先看看小仓库里有没有这些文件，如果有，就直接从仓库里拿出来用，不用再从网上下载了，这样速度就快多了。
- CDN 缓存：CDN 就是内容分发网络，它在全国各地甚至全球都有服务器。当你访问一个网页时，CDN 会把网页里的文件缓存在离你最近的服务器上。这样，你下载文件的距离就短了，速度也就快了。比如说，你在北京，访问一个网站的图片，这个图片可能就从北京的 CDN 服务器上下载，而不是从远在国外的源服务器上下载。
减少 HTTP 请求
- 合并文件：把多个 CSS 文件合并成一个，多个 JavaScript 文件也合并成一个。比如说，你有三个 CSS 文件，合并成一个后，浏览器就只需要下载一次，而不是下载三次，这样就减少了 HTTP 请求的次数，速度也就快了。
- 雪碧图：把多个小图标合并成一张大图片，然后通过 CSS 来控制显示哪一部分。比如说，你网页上有很多小图标，每个图标都要发一个 HTTP 请求去下载，用雪碧图后，只需要下载一张大图片，然后通过 CSS 把需要的图标显示出来，这样就减少了请求次数。
懒加载
- 图片懒加载：网页上可能有很多图片，但有些图片在用户刚打开网页时是看不到的，要往下滚动页面才能看到。图片懒加载就是等用户滚动到能看到这些图片的位置时，再去下载这些图片。比如说，一个很长的图片列表，用户刚打开网页时只能看到前面几张图片，后面的图片就先不下载，等用户滚动到后面时再下载，这样可以节省带宽和时间。
- 组件懒加载：在单页应用里，有很多组件。组件懒加载就是等用户需要用到某个组件时，再去加载这个组件。比如说，一个电商网站，有商品列表页和商品详情页，用户刚打开网站时，只需要加载商品列表页的组件，等用户点击某个商品进入详情页时，再去加载商品详情页的组件，这样可以让网页打开得更快。
优化 HTML 结构
- 语义化标签：用 HTML5 里的语义化标签，像
<header>、<nav>、<main>、<article>、<footer>等，这些标签能让搜索引擎和浏览器更好地理解网页的结构。比如说，<header>标签一看就知道是网页的头部，搜索引擎可以根据这些标签更准确地抓取网页内容，浏览器也能更高效地渲染页面。 - 减少嵌套：HTML 标签的嵌套不要太深，太深的嵌套会让浏览器解析起来更费劲。比如说，不要搞很多层不必要的
<div>嵌套，尽量让 HTML 结构简单清晰。
除了上述方法，还有哪些其他的前端性能优化方法？
前面咱们说了压缩代码、图片优化、缓存机制这些前端性能优化的方法，其实还有不少其他实用的办法，下面接着给你唠唠：
渲染优化
- 服务端渲染（SSR）和静态站点生成（SSG）
- 服务端渲染（SSR）：一般情况下，普通的前端页面是在浏览器里把页面“拼”出来的。而服务端渲染呢，就像是饭店大厨提前把菜做好，直接端给你。服务器在收到请求后，就把完整的 HTML 页面生成好再发给浏览器，浏览器拿到后能直接显示内容，不用再花时间去“组装”页面，这样页面就能更快地展示给用户。比如新闻网站用服务端渲染，用户一点击链接，马上就能看到新闻内容，而不是先看到个空白页面再慢慢加载。
- 静态站点生成（SSG）：这就好比饭店提前准备好很多份一样的菜，等客人来的时候直接端上去。在项目构建的时候，就把所有页面的 HTML 文件都生成好，当用户访问时，服务器直接把这些静态的 HTML 文件发出去，响应速度超级快。像一些博客网站，内容更新不是特别频繁，就很适合用静态站点生成。
- 虚拟列表：假如你有一个很长的列表，里面有上千条数据，要是一下子把这些数据都渲染出来，浏览器肯定会“累坏”，加载速度变慢。虚拟列表就只渲染用户当前能看到的那部分数据，就像你看书的时候，眼睛只能看到当前这几页，其他页不用提前都翻开。当用户滚动页面时，再动态地加载和渲染新的数据，这样能大大减少渲染的工作量，提高性能。比如一些社交软件的聊天记录列表，用虚拟列表就能让滚动更流畅。
网络请求优化
- HTTP/3 协议：以前的 HTTP 协议在传输数据的时候可能会有一些问题，比如传输速度慢、容易丢包。HTTP/3 协议就像是给数据传输换了一条更宽敞、更平坦的高速公路。它采用了新的传输技术，能让数据传输得更快、更稳定。如果你的网站支持 HTTP/3 协议，用户访问时数据下载和上传的速度都会变快。
- 请求合并与分割
- 请求合并：有时候我们的页面需要从服务器获取好几个不同的数据，就像你去超市买东西，一趟一趟地跑很浪费时间，不如一次把所有东西都买齐。请求合并就是把多个小的请求合并成一个大的请求，这样可以减少网络连接的开销，提高请求效率。比如一个页面需要获取用户信息、商品列表和广告信息，就可以把这三个请求合并成一个。
- 请求分割：和请求合并相反，当一个请求的数据量特别大时，就像你要搬一个超级大的箱子，很难一下子搬走，不如把它分成几个小箱子，一次搬一个。请求分割就是把一个大的请求拆分成几个小的请求，分批次进行传输。这样可以避免因为一个大请求失败而导致整个数据都获取不到，也能让页面更快地展示部分内容。
字体优化
- 字体子集化：有些字体文件特别大，因为里面包含了很多我们用不到的字符。字体子集化就像是从一本大字典里挑出你需要的字，只保留页面中实际使用的字符。这样字体文件的大小就会大大减小，下载速度也就变快了。比如一个英文网站，就可以只保留英文字符，去掉其他语言的字符。
- 字体预加载：在浏览器开始渲染页面之前，就提前把字体文件下载好。就像你做饭之前先把食材准备好，等要用的时候就不用再去买了。字体预加载可以让字体在需要显示的时候马上就能用，避免出现字体闪烁或者显示不正常的问题。
动画优化
- 使用 CSS 动画：CSS 动画就像是给元素穿上了一件会动的衣服，它是由浏览器的渲染引擎直接处理的，性能比 JavaScript 动画要好。因为 JavaScript 动画需要不断地修改元素的样式，会触发浏览器的重排和重绘，比较消耗性能。而 CSS 动画在渲染时更高效，能让动画更流畅。比如一个简单的按钮点击动画，用 CSS 来实现就又简单又快。
- 硬件加速：让浏览器利用计算机的 GPU（图形处理器）来处理动画，就像给汽车装上了一个更强大的发动机。在 CSS 里可以通过设置
transform和opacity属性来触发硬件加速，这样动画的渲染速度会更快，尤其是在处理复杂动画时效果更明显。
咱接着唠唠除了之前说的那些，还有啥前端性能优化的招儿。
代码运行效率优化
- 减少重排和重绘
- 重排和重绘就像是你重新布置房间。重排就是把房间里的家具位置重新摆放，重绘就是给家具重新刷漆。在网页里，改变元素的布局信息（像宽高、位置）就会触发重排，改变元素的外观样式（像颜色、透明度）就会触发重绘。这俩操作都挺费时间的。
- 那怎么减少呢？比如说你要改一个元素的好多样式，别一次改一个，把要改的样式攒一块儿，一次性改完。就像你要重新布置房间，别搬一下家具刷一下漆，先把家具都摆好，再统一刷漆。
- 避免全局变量滥用
- 全局变量就像是公共仓库，谁都能去拿东西、放东西。在代码里用太多全局变量，就容易乱套，别人不知道谁改了这个变量的值，还可能会造成命名冲突。而且全局变量一直占着内存，不释放，会让网页变卡。
- 所以能用局部变量就用局部变量，局部变量就像你自己的小抽屉，只有在特定的地方能用，用完就扔了，不占地方。
事件处理优化
- 事件委托
- 假如你家里有一堆孩子，你要告诉他们一件事儿，一个个去说多麻烦。你可以把孩子们都叫到客厅，一次性告诉他们。在网页里，事件委托就是这个道理。比如说一个列表里有好多项，每个项都有点击事件，你不用给每个项都单独绑定事件，把事件绑定到列表这个大容器上就行。当点击列表里的某一项时，事件会冒泡到列表容器上，然后在容器上处理这个事件，这样能减少事件绑定的数量，提高性能。
- 及时解绑事件
- 就像你借了别人的东西，用完得还回去。在网页里，当一个元素不用了，或者一个组件销毁了，绑定在它上面的事件也得解绑。不然这些事件还占着内存，会让网页越来越慢。比如一个弹窗关闭后，就要把弹窗上的点击事件、滚动事件啥的都解绑。
浏览器渲染优化
- 优化关键渲染路径
- 关键渲染路径就像是做菜的步骤，浏览器拿到 HTML、CSS、JavaScript 这些材料后，要按照一定步骤把页面做出来。优化关键渲染路径就是让这个步骤更简单、更快。比如说，把重要的 CSS 代码放在 HTML 文件的
<head>标签里，让浏览器能尽快拿到并渲染样式；把 JavaScript 代码放在 HTML 文件的底部，避免它阻塞页面的渲染。
- 关键渲染路径就像是做菜的步骤，浏览器拿到 HTML、CSS、JavaScript 这些材料后，要按照一定步骤把页面做出来。优化关键渲染路径就是让这个步骤更简单、更快。比如说，把重要的 CSS 代码放在 HTML 文件的
- 利用浏览器的渲染特性
- 不同的浏览器有不同的渲染特性，就像不同的厨师有不同的做菜习惯。我们要了解这些特性，利用好它们。比如说，Chrome 浏览器对硬件加速支持得比较好，我们就可以多利用 CSS 的
transform和opacity属性来触发硬件加速，让动画更流畅。
- 不同的浏览器有不同的渲染特性，就像不同的厨师有不同的做菜习惯。我们要了解这些特性，利用好它们。比如说，Chrome 浏览器对硬件加速支持得比较好，我们就可以多利用 CSS 的
第三方资源优化
- 谨慎使用第三方插件和脚本
- 第三方插件和脚本就像你请别人来帮你做事儿，虽然能省点力气，但也可能带来麻烦。有些第三方插件和脚本代码质量不好，或者会加载很多不必要的资源，让网页变慢。所以用之前要好好选，选那些口碑好、性能高的。而且能用原生代码实现的功能，就别用第三方插件。
- 优化第三方资源加载顺序
- 假如你要做一顿饭，得先把米下锅，再炒菜。在网页里，加载第三方资源也有个顺序。把重要的、影响页面显示的资源先加载，比如字体文件、关键的 CSS 样式。把那些不那么重要的，像广告脚本、统计脚本，放在后面加载，或者用异步加载的方式，别让它们影响页面的初次加载速度。
除了前面提到的前端性能优化方法，还有以下几种有效的优化手段：
资源加载优化
- 预连接（Preconnect）：当浏览器访问一个网站时，它需要和服务器建立连接，这个过程会消耗一定的时间。预连接就是提前告诉浏览器要和哪些服务器建立连接，让浏览器在空闲的时候就把连接建立好。比如网站中有从第三方服务器加载的资源，像图片、字体等，就可以使用预连接提前建立与这些服务器的连接，等真正需要加载资源时，就能节省连接时间，加快资源加载速度。在 HTML 中可以使用
<link rel="preconnect" href="https://example.com">这样的标签来实现。 - 预渲染（Prerender）：预渲染就像是提前把下一场电影的画面准备好，等你想看的时候能马上开始播放。它会在后台提前加载并渲染某个页面，当用户访问该页面时，就可以直接显示已经渲染好的内容，大大减少等待时间。不过预渲染会消耗额外的资源，所以一般只针对用户很可能会访问的页面使用，比如电商网站的商品详情页、新闻网站的热门文章页等。在 HTML 中可以使用
<link rel="prerender" href="https://example.com/page">来实现。
框架与库优化
- 按需加载框架与库：很多前端框架和库功能丰富，但体积也比较大。按需加载就是只加载项目中实际用到的部分，而不是把整个框架或库都加载进来。比如使用 Vue 或 React 时，很多组件和功能可能用不到，就可以只引入必要的部分。像 Vue 的路由懒加载，就是在用户访问特定路由时才加载对应的组件，减少初始加载的代码量。
- 优化框架配置：不同的前端框架有不同的配置选项，合理配置这些选项可以提高性能。例如在 React 中，使用
shouldComponentUpdate或React.memo可以避免不必要的组件重新渲染；在 Vue 中，使用v-once指令可以让元素只渲染一次，后续数据变化时不再重新渲染，减少渲染开销。
数据处理优化
- 分页与无限滚动：当页面需要展示大量数据时，一次性加载所有数据会导致页面加载缓慢，而且用户也很难快速找到自己需要的信息。分页就是把数据分成若干页，每次只加载当前页的数据，用户可以通过点击页码切换页面。无限滚动则是当用户滚动到页面底部时，自动加载下一页的数据，给用户一种数据源源不断的感觉。这两种方式都能减少初始加载的数据量，提高页面性能，同时提升用户体验。比如社交媒体的动态列表、电商的商品列表等场景都经常使用这两种方式。
- 数据缓存：对于一些不经常变化的数据，可以将其缓存起来。当需要使用这些数据时，先检查缓存中是否存在，如果存在就直接从缓存中获取，而不是再次从服务器请求。这样可以减少网络请求，提高数据获取速度。例如，一些下拉列表中的选项数据，如果不经常更新，就可以在首次获取后进行缓存。
错误处理与监控
- 优雅降级与渐进增强：优雅降级是指在高端浏览器或设备上提供完整的功能和良好的体验，而在低端浏览器或设备上，虽然可能无法实现全部功能，但仍然能保证基本的可用性。比如在支持 CSS3 动画的浏览器中展示炫酷的动画效果，在不支持的浏览器中则以静态页面展示内容。渐进增强则相反，先确保在所有浏览器和设备上都能实现基本功能，然后在高端浏览器或设备上逐步添加额外的功能和效果。这两种策略都能让不同环境下的用户都能正常访问页面，同时避免在低性能设备上加载过多不必要的资源。
- 性能监控与分析：使用专业的性能监控工具，如 Google Analytics、New Relic 等，对网站的性能进行实时监控和分析。这些工具可以帮助你了解页面的加载时间、资源请求情况、用户行为等信息，找出性能瓶颈所在。例如，通过分析工具发现某个图片文件过大导致加载缓慢，就可以针对性地对该图片进行优化；或者发现某个脚本执行时间过长，就可以对脚本进行优化或重构。
