怎么进行站点内的图片性能优化？
进行站点内的图片性能优化可以通过以下几个方面来实现：
- 选择合适的图片格式： 根据不同的场景选择合适的图片格式，常见的图片格式有 JPEG、PNG 和 WebP。JPEG 适合保存照片或复杂的图像，PNG 适合保存具有透明背景或简单图形的图片，而 WebP 是一种现代化的图片格式，它通常可以在更小的文件大小下提供相同的视觉质量。
- 压缩图片文件大小： 使用压缩工具对图片进行无损或有损压缩，以减小图片文件的大小。常用的图片压缩工具有 Photoshop、TinyPNG、ImageOptim 等。注意在压缩过程中要权衡文件大小和视觉质量，避免过度压缩导致图片质量下降。
- 适当调整图片尺寸： 根据实际需要，在将图片应用于网站之前，根据显示尺寸要求对图片进行裁剪和缩放。不要使用过大的图片尺寸，以避免不必要的网络传输和浏览器渲染开销。
- 使用懒加载技术： 对于长页面或包含大量图片的页面，可以采用懒加载技术。懒加载在用户滚动到可见区域时才加载图片，而不是一次性加载所有图片。这样可以减少首次加载的数据量和加快页面加载速度。
- 使用图片 CDN 加速： 使用图片 CDN（内容分发网络）可以将图片资源分发到全球各地的服务器节点，从而实现更快的加载速度。CDN 可以通过就近访问最接近用户的服务器节点来提供图片，减少延迟并提高用户体验。
- 使用响应式图片： 对于不同屏幕大小和设备类型，使用适当的响应式图片。通过使用
元素和srcset属性，根据不同的屏幕分辨率和设备能力，为用户提供最合适的图片版本，减少不必要的下载和浪费。 - 缓存图片： 设置适当的缓存策略，使浏览器能够缓存图片文件，并在下次加载页面时从缓存中读取，减少网络请求和提高页面加载速度。
- 使用 CSS Sprites 或 SVG 图标： 将多个小图标合并成一个大图，或者使用矢量图标（如 SVG）来代替大量的图片请求。这样可以减少网络请求和图片文件大小。
总之，通过选择合适的图片格式、压缩图片、调整尺寸、懒加载、使用 CDN、响应式图片、缓存以及使用 CSS Sprites 或 SVG 图标等技术手段，可以有效地优化站点内的图片性能，提升页面加载速度和用户体验。
Blob，ArrayBuffer，Base64 分别有哪些使用场景？
Blob、ArrayBuffer 和 Base64 都是常用的数据格式或处理方式，它们具有不同的使用场景：
- Blob： Blob（二进制大对象）可以用来表示任意二进制数据。它常被用于处理文件或媒体数据，如上传文件、下载文件、录音、摄像等。Blob 对象通常与 File API 配合使用，
用于在浏览器中读取、操作和传输二进制数据。 - ArrayBuffer： ArrayBuffer 是一种固定长度的字节缓冲区，它可以存储各种类型的二进制数据。ArrayBuffer 提供了一个类似于数组的内存结构，可以直接对二进制数据进行处理和操作，如
读取、写入、修改等。它常用于处理底层的二进制数据，如网络请求、图像处理、音频处理等。 - Base64： Base64 是一种将二进制数据编码成 ASCII 字符串的方法。它通过使用 64 个字符（A-Z、a-z、0-9 和 + /）来代表二进制数据的各个字节，从而实现二进制数据的传输和存储。Base64 常用于将二进制数据嵌入到文本格式中，如在 HTML 或 CSS 中嵌入图片、在 JSON 数据中嵌入二进制数据等。
以下是它们的更具体的应用场景示例：
- 使用 Blob：将用户上传的文件存储为 Blob 对象，使用 File API 中的 FileReader 对象读取 Blob 数据，将图片转换为 Blob 对象后上传到服务器等。
// 创建 Blob 对象 var blob = new Blob([data], { type: 'image/jpeg' }); // 读取 Blob 数据 var reader = new FileReader(); reader.onload = function(event) { var data = event.target.result; // 处理数据 }; reader.readAsArrayBuffer(blob);
- 使用 ArrayBuffer：处理音频和视频文件、网络请求、图像处理等场景。
// 创建 ArrayBuffer 对象 var buffer = new ArrayBuffer(16); // 处理 ArrayBuffer 数据 var view = new DataView(buffer); view.setInt32(0, 42); // 将 ArrayBuffer 数据传输到服务器 fetch(url, { method: 'POST', body: buffer, });
- 使用 Base64：在 HTML 或 CSS 中嵌入图片、在 JSON 数据中嵌入二进制数据、通过 Data URL 方式加载图像等场景。
// 将图片以 Base64 编码格式嵌入到 HTML 或 CSS 中 <img src="data:image/png;base64,iVBORw0KG..."> // 将二进制数据编码为 Base64 字符串 var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer))); // 将 Base64 字符串解码为二进制数据 var arrayBuffer = Uint8Array.from(atob(base64String), c => c.charCodeAt(0));
综上所述，Blob、ArrayBuffer 和 Base64 在不同的场景下具有不同的用途和优势，正确地选择和使用它们可以更高效地处理二进制数据。
TCP和HTTP请求之间有什么关系？
TCP（传输控制协议）和 HTTP（超文本传输协议）是互联网中的两个不同的协议，它们在网络通信中扮演了不同的角色，具有以下关系：
- TCP 提供传输服务： TCP 是一种可靠的传输层协议，负责在网络中提供可靠的数据传输服务。它通过建立连接、分组传输、流量控制、拥塞控制等机制来确保数据的可靠性和顺序性。
- HTTP 基于 TCP 进行通信： HTTP 是一种应用层协议，用于在客户端和服务器之间传输超文本数据。HTTP 建立在 TCP/IP 协议栈之上，利用 TCP 协议提供的可靠传输服务，以传输 HTTP 请求和响应信息。
- HTTP 请求通过 TCP 连接发送： 在 HTTP 请求过程中，客户端首先与服务器建立 TCP 连接。建立连接后，客户端通过该 TCP 连接向服务器发送 HTTP 请求信息，请求中包含了请求方法（如 GET、POST）、URL、头部信息、可选的请求体等。
- TCP 进行可靠传输和流量控制： HTTP 请求被划分为多个数据包，并由 TCP 负责将这些数据包按序传输给服务器。TCP 使用序号和确认机制，确保数据的完整性和顺序性。同时，TCP 还通过流量控制和拥塞控制机制，动态调整发送数据的速率，以适应网络的状况，保证网络的稳定性和可靠性。
- HTTP 响应通过 TCP 连接返回： 服务器接收到 HTTP 请求后，根据请求进行处理，并生成对应的 HTTP 响应。服务器通过 TCP 连接将响应信息分割成多个数据包，按序发送给客户端。客户端接收到 TCP 数据包后，将其组装成完整的 HTTP 响应，并进行相应的处理。
总之，TCP 提供了可靠的传输服务，而 HTTP 则是在 TCP 的基础上定义了具体的应用层协议，用于在客户端和服务器之间传输超文本数据。通过 TCP 连接，HTTP 请求和响应可以在网络中进行可靠的传输，从而实现了 Web 页面的加载、数据交互等功能。
HTTP2中，多路复用的原理是什么？
HTTP/2 的多路复用是其核心特性之一，它通过共享同一个 TCP 连接来并发处理多个请求，提高了网络传输的效率。下面是 HTTP/2 多路复用的原理：
- 二进制分帧层： HTTP/2 将传输的数据分割为一个个的帧（Frame），每个帧都有一个唯一的标识符（Stream ID）。
- 多个流共享一个连接： HTTP/2 通过在同一个连接上创建多个独立的流（Stream）来处理多个请求和响应。每个流都有一个唯一的 Stream ID，并与一个或多个帧相关联。
- 并行处理和无序交付： 在 HTTP/2 中，多个流可以同时在同一个连接上进行并行处理。这意味着浏览器可以同时发送多个请求，服务器也可以并行返回多个响应。由于每个流都有自己的标识符，它们会被乱序发送，但通过 Stream ID 可以将它们正确地组装回原始的请求和响应。
- 头部压缩： 为了减少传输的开销，HTTP/2 使用了 HPACK 压缩算法对头部信息进行压缩。由于多个请求和响应共享同一个连接，相同的头部信息可以只发送一次，并通过索引表进行引用。
通过以上机制，HTTP/2 实现了多路复用的效果：
- 在同一个连接上，多个请求和响应可以并行发送和接收，无需等待前一个请求完成。
- 每个流都有独立的流 ID，保证了请求和响应的正确组装。
- 头部压缩减少了冗余的头部信息，进一步提高了传输效率。
多路复用显著提高了网络性能，减少了延迟，尤其在高延迟、高丢包的环境下效果更为明显。它允许浏览器同时发送多个请求，服务器也可以同时返回多个响应，从而更高效地利用网络带宽资源。
