太散了，其实抓住几个核心方向就行了，剩下的就是解决手段，性能无非是，资源加载问题、文件大小问题、代码逻辑问题、交互体验问题。然后按这4个方向不断的定优化指标的事

1.雪碧图

例子：background-position: -100px 0; 表示背景在横坐标上左移动100px

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="icon icon1"></div>
  <div class="icon icon2"></div>
  <div class="icon icon3"></div>
</body>
</html>

.icon {
  width: 50px;
  height: 50px;
  background-image: url("sprites.png");
  background-repeat: no-repeat;
  display: inline-block;
}

.icon1 {
  background-position: 0 0;
}

.icon2 {
  background-position: -50px 0;
}

.icon3 {
  background-position: -100px 0;
}

1.1缺点

雪碧图技术在HTTP1.0时代被用来解决TCP复用的问题，可以减少HTTP请求次数，从而提高页面加载速度。但随着HTTP协议的升级，如HTTP1.1和HTTP2.0等，TCP复用和其他优化手段得到了实现，这使得使用雪碧图可能导致请求不必要的图片内容（因为整张大图都需要被下载，即使只需要其中的一部分），降低了加载效率。所以，在新的HTTP协议下，不推荐使用雪碧图。

1.2 什么是keep alive

在HTTP/1.0时代，一个TCP连接默认只能发送一个HTTP请求。而在HTTP/1.1及以后的版本中，一个TCP连接可以发送多个HTTP请求，这种机制被称为持久连接（keep-alive）。

在HTTP/1.1中，keep-alive是默认启用的。当客户端（如浏览器）发送HTTP请求时，请求头部会包含一个"Connection: keep-alive"字段。服务器会在响应头中也添加"Connection: keep-alive"字段，表示同意维持连接。

服务器可以在响应头中添加"Keep-Alive: timeout=x"字段（x为秒数），告诉客户端连接的超时时间。

为什么要keep alive

减少连接建立和关闭的时间：在一个TCP连接上发送多个HTTP请求意味着客户端和服务器之间需要建立的TCP连接数量减少。每个TCP连接的建立和关闭过程需要时间，特别是在慢速网络环境下。通过减少连接数量，可以降低页面加载时间，提高用户体验。
减轻服务器负担：维护TCP连接需要服务器消耗一定的资源。当服务器需要同时处理大量的TCP连接时，这会占用大量的系统资源，如内存和CPU。在一个TCP连接上发送多个HTTP请求可以降低服务器的资源消耗，从而提高服务器的处理能力和性能。

1.3 http2.0的不同点

HTTP/2.0多路复用（multiplexing）、请求优先级（priority）和头部压缩（header compression）这三个特性

1.多路复用（multiplexing）：多路复用是HTTP/2.0中的一项重要特性，它允许在一个TCP连接上同时发送和接收多个请求和响应。在HTTP/1.x中，每个请求需要单独建立一个TCP连接，而在HTTP/2.0中，可以在一个TCP连接上并行发送和接收多个请求和响应，有效地减少了TCP连接的数量和延迟。

例如，在HTTP/1.x中，加载一个包含多个图片的网页需要建立多个TCP连接。而在HTTP/2.0中，浏览器可以在一个TCP连接上并行请求所有图片，减少了建立连接的时间，提高了页面加载速度。

2.请求优先级（priority）：请求优先级是HTTP/2.0中的一个特性，允许客户端为每个请求设置优先级。这样，服务器可以根据优先级来决定处理请求的顺序。请求优先级有助于提高页面加载速度，特别是在网络带宽有限的情况下。

例如，当加载一个网页时，浏览器可以为CSS和JS文件设置较高的优先级，而为图片和其他较不重要的资源设置较低的优先级。服务器会先处理高优先级的请求，确保关键资源尽快加载，从而提高用户体验。

3.头部压缩（header compression）：头部压缩是HTTP/2.0的另一个特性，它通过压缩HTTP头部信息来减少请求和响应的大小。在HTTP/1.x中，头部信息是以纯文本形式发送的，这会导致一定的传输开销。HTTP/2.0采用了HPACK压缩算法对头部信息进行压缩，减少了数据传输量。

例如，在HTTP/1.x中，一个典型的请求头部可能包括User-Agent、Accept、Cookie等多个字段，它们都是以纯文本形式发送的。在HTTP/2.0中，这些头部信息会被压缩成二进制格式，减少了传输大小，从而提高了传输速度。

gzip

gzip 是目前最流行和最有效的压缩方法，可以通过向 HTTP 请求头中的 Accept-Encoding 头添加 gzip 标识来开启这一功能。

使用缓存

详情见杂项。

强缓存。

协商缓存。

CDN

内容分发网络(CDN)是一组分布在多个不同地理位置的web服务器。这些服务器存储着数据的副本，因此服务器会根据哪些服务器离用户距离最近来满足数据的请求。 CDN的两个核心点：

缓存：就是指我们把资源复制一份到CDN服务器的这个过程
回溯：指CDN发现自己没有这个资源(一般是缓存的数据过期了)，转头向根服务器(或者上级服务器)去要资源的这个过程 CDN原理：CDN原理

防抖和截流

详情见JS手写：juejin.cn/post/721657…

开启TreeShaking

optimization 下 usedExport 设置为 true，则可实现 Treeshaking。

React中的钩子

useEffect

useCallBack

useMemo

import React, { useMemo } from 'react';

const MyComponent = ({ value1, value2 }) => {
  const computedValue = useMemo(() => {
    // 这里是计算函数，用于根据 value1 和 value2 计算结果
    console.log('重新计算结果');
    return value1 + value2;
  }, [value1, value2]);

  return (
    <div>
      <p>Value 1: {value1}</p>
      <p>Value 2: {value2}</p>
      <p>Computed Value: {computedValue}</p>
    </div>
  );
};

使用 requestAnimationFrame 来实现视觉变化

具体用法见：juejin.cn/post/721260…

性能优化相关