No48.精选前端面试题，享受每天的挑战和学习-阿里云开发者社区

怎么进行站点内的图片性能优化？

进行站点内的图片性能优化可以通过以下几个方面来实现：

选择合适的图片格式： 根据不同的场景选择合适的图片格式，常见的图片格式有 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 实现了多路复用的效果：