前端面试题

1.缓存

前端缓存

前端缓存是Web开发中用于提高页面加载速度和减轻服务器负担的一种技术。它主要指的是资源（如HTML、CSS、JavaScript、图片等）在客户端（浏览器）的存储和复用。当浏览器再次请求相同的资源时，如果缓存中存在且未过期，浏览器将直接从缓存中加载资源，而不是向服务器发送请求。

前端缓存主要分为以下几种类型：

1. 浏览器缓存：
   • Memory Cache（内存缓存）：这是浏览器为了加快读取缓存速度而进行的优化行为，主要存储当前会话中的资源。它的生命周期通常较短，一般只存在于当前标签页或窗口的浏览过程中。
   • Disk Cache（磁盘缓存）：也称为HTTP Cache，是存储在硬盘上的缓存，因此它是持久存储的。Disk Cache会严格根据HTTP头信息中的各类字段来判定哪些资源可以缓存，哪些资源不可以缓存。它是前端缓存中最常用的一种类型。
2. Service Worker Cache：
   • Service Worker允许开发者控制缓存策略，可以定义哪些文件被缓存，以及在什么情况下取出这些文件。这种缓存是永久性的，即使关闭标签页或浏览器，下次打开时缓存依然存在。

强缓存（强制缓存）

强缓存是指在缓存过期前，浏览器直接从本地缓存中加载资源，而不需要向服务器发送请求。强缓存的判断依据是缓存响应头中的Cache-Control和Expires字段。

• Cache-Control：在HTTP 1.1版本中引入，提供了更灵活的缓存控制机制。例如，Cache-Control: max-age=3600表示资源在3600秒内有效。
• Expires：在HTTP 1.0版本中通过Expires响应头来实现强制缓存。它指定了资源过期的具体时间点（GMT格式）。

协商缓存

协商缓存是指在缓存过期后，浏览器发送一个请求到服务器，检查本地缓存的资源是否仍然有效。这是通过在请求头中包含一个条件标签（如If-None-Match或If-Modified-Since）来实现的。

• If-None-Match：携带上一次请求时服务器返回的ETag值。如果ETag值匹配，服务器返回304 Not Modified响应，表示资源未发生变化，浏览器可以继续使用本地缓存。
• If-Modified-Since：携带上一次请求时服务器返回的资源最后修改时间。如果这个时间早于服务器上的最后修改时间，服务器会返回新的资源；否则，返回304 Not Modified响应。

总结

• 前端缓存是Web开发中用于提高页面加载速度和减轻服务器负担的技术，主要包括浏览器缓存（Memory Cache和Disk Cache）和Service Worker Cache。
• 强缓存（强制缓存）通过Cache-Control和Expires字段控制，在缓存过期前直接从本地缓存中加载资源。
• 协商缓存在缓存过期后，通过条件请求头（如If-None-Match和If-Modified-Since）与服务器进行交互，以确认资源是否仍然有效。如果资源未发生变化，则继续使用本地缓存；否则，从服务器获取新资源。

CDN详解

CDN（Content Delivery Network，内容分发网络）是一种通过在网络各处放置节点服务器所构成的智能虚拟网络，旨在提高互联网内容传输的速度和稳定性。其基本原理是尽可能避开互联网上的瓶颈和环节，使用户能够就近取得所需内容，从而解决网络拥挤的问题，提高用户访问网站的响应速度。

CDN的主要特点：

1. 分布式存储：CDN通过在全球范围内的多个节点服务器上存储内容的副本，实现内容的分布式存储。
2. 智能调度：CDN系统能够实时地根据网络流量、节点连接状况、负载情况、用户距离和响应时间等信息，将用户的请求导向最优的服务节点。
3. 负载均衡：通过负载均衡技术，CDN能够将网络中的流量尽可能平均分配到多个服务器或网络节点，避免单个节点过载。
4. 内容缓存：CDN节点上的缓存服务器会缓存用户请求的内容，以便后续请求能够快速响应。

CDN的工作原理：

当用户访问一个使用CDN服务的网站时，CDN系统会首先解析用户的请求，并根据用户的地理位置、网络状况等因素，选择最近的CDN节点来响应用户的请求。然后，CDN节点上的缓存服务器会检查是否缓存了用户请求的内容。如果缓存了，就直接将内容返回给用户；如果没有缓存，就向源服务器请求内容，并将其缓存到本地，同时返回给用户。

CDN的优势：

1. 提高访问速度：CDN通过减少数据传输的距离和时间，显著提高了用户访问网站的速度。
2. 减轻服务器压力：CDN将大量用户的访问请求分散到各个节点服务器上，有效减轻了源服务器的压力。
3. 提高网站可用性：CDN的分布式架构和负载均衡技术，使得即使某个节点服务器出现故障，也不会影响整个CDN服务的正常运行。
4. 增强安全性：CDN可以隐藏源服务器的真实IP地址，防止恶意攻击者直接攻击源服务器。

CDN的潜在缺点：

1. 成本较高：特别是对于小型网站或初创企业，部署CDN需要购买或租用服务器，并支付带宽费用，成本相对较高。
2. 配置和维护复杂：CDN的配置和维护需要专业知识，对于非技术人员来说可能是一个挑战。
3. 内容更新可能不实时：CDN节点上的缓存内容可能不会立即更新，导致用户看到过时信息。

一句大白话讲述CDN：

CDN就像是互联网上的“快递小哥”，它把网站的内容“打包”好，然后放在离用户最近的地方，这样用户访问网站时就能更快地拿到内容了。

 浏览器多页面之间的通讯

Cookie、web storage、token

 WebSocket

WebSocket是一种在Web应用程序中实现全双工通信的协议。它允许客户端和服务器之间建立一个持久的连接，双方可以在这个连接上相互发送数据，而不需要通过传统的HTTP请求/响应模式。以下是对WebSocket的详细解析：

一、WebSocket的特点

1. 双向通信：WebSocket实现了服务器与客户端之间的双向通信，即服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。
2. 持久连接：一旦WebSocket连接建立，它将持续存在，直到被显式关闭。这种持久连接避免了HTTP请求/响应模式中的频繁握手和断开连接的开销。
3. 高效性：WebSocket使用较少的开销来维持连接，并且数据格式轻量，性能开销小，通信高效。
4. 兼容性和灵活性：WebSocket与HTTP协议有着良好的兼容性，默认端口也是80和443，并且握手阶段采用HTTP协议。此外，WebSocket可以发送文本和二进制数据，并且没有同源限制。

二、WebSocket的工作原理

1. 握手阶段：WebSocket连接的建立从一个HTTP请求开始，这个请求通常被称为“握手”请求。在请求中，客户端通过Upgrade和Connection头字段表示希望将协议从HTTP升级到WebSocket。服务器如果同意升级，会返回一个状态码为101 Switching Protocols的响应，表示协议升级成功。
2. 数据传输：一旦WebSocket连接建立，客户端和服务器之间的通信就使用WebSocket帧（frame）进行。WebSocket帧有不同的类型，包括文本帧、二进制帧、关闭帧、Ping帧和Pong帧等。这些帧用于传输数据和维持连接的活跃状态。
3. 关闭连接：WebSocket连接可以由客户端或服务器任意一方关闭。关闭连接的过程通过发送一个关闭帧来实现，另一方收到关闭帧后会响应一个关闭帧并关闭连接。

三、WebSocket的应用场景

WebSocket特别适用于需要实时通信、实时推送数据、实时同步编辑等场景。以下是一些具体的应用示例：

1. 实时聊天：WebSocket可以用于实现即时通讯功能，如在线聊天室、多人游戏等。
2. 实时数据更新：WebSocket可以用于实时地推送数据更新，如实时股票行情、实时天气预报等。
3. 协同编辑：WebSocket可以用于实现多人协同编辑功能，如在线文档协作、团队代码编辑等。
4. 实时监控：WebSocket可以用于实时监控系统，如监控设备的运行状态、实时监测交通流量等。
5. 游戏开发：WebSocket可以用于开发实时多人在线游戏，如棋牌游戏、角色扮演游戏等。

四、WebSocket的优缺点

优点：

• 实时性：WebSocket能够实时地双向通信。
• 减少网络流量：WebSocket连接只需要进行一次握手，之后就可以保持长连接，减少了网络流量和延迟。
• 跨平台支持：WebSocket协议可以在多种平台上使用。

缺点：

• 兼容性问题：WebSocket协议在一些旧版本的浏览器上不被支持。
• 服务器资源占用：由于WebSocket的长连接特性，服务器需要维护大量的连接，可能会占用较多的服务器资源。
• 安全性问题：WebSocket连接需要特殊的安全设置以防止恶意攻击和数据泄漏。

综上所述，WebSocket是一种强大的实时通信协议，它的双向通信和持久连接特性使得它在许多实时应用场景中发挥着重要作用。然而，在使用WebSocket时也需要注意其兼容性和安全性问题，并合理评估其对服务器资源的占用情况。