字节一面

数据开发
male
45min

1. 请尽可能详细地说明，cdn为什么能提高速度？cdn和http的关系是什么？你的回答中不要写出示例代码。

CDN（Content Delivery Network，内容分发网络）通过在全球范围内部署大量边缘节点，利用负载均衡、内容缓存等技术，能够显著提高网站访问速度。以下是CDN提高速度的原理以及CDN与HTTP的关系：

CDN提高速度的原理

静态内容缓存：CDN服务器将网站的静态内容（如图片、CSS和JavaScript等）缓存在多个分布式节点上。当用户请求这些静态资源时，CDN服务器会根据用户的地理位置和网络情况选择离用户最近的节点来响应请求，从而减少网络延迟。
带宽优化：CDN可以通过多种技术手段来优化带宽使用，例如采用压缩算法来减小文件大小，减少网络传输时间；使用并行连接来同时请求多个资源，提高下载速度；利用缓存和预加载技术来提前将资源传输到用户设备上，减少等待时间。
动态内容加速：对于动态生成的内容，CDN可以通过缓存和加速技术来提高访问速度。CDN服务器会将动态内容缓存在节点上，当用户请求时，CDN服务器会尽量避免重复访问源服务器，而是直接从缓存中返回数据。
负载均衡：CDN服务器会对用户的请求进行负载均衡，将请求分发到不同的服务器上进行处理。这样可以有效分担服务器的负载，提高网站的访问速度和稳定性。

CDN和HTTP的关系

HTTP缓存与CDN缓存：HTTP缓存是一种客户端缓存，当web浏览器向服务器发起资源请求时，服务器可以在响应报文头中包含缓存相关的信息。这些HTTP header会告诉浏览器是否以及如何缓存资源，再次请求时如果命中缓存将直接读取本地缓存不再发出请求。CDN缓存是一种服务端缓存，CDN服务商可以将源站上的资源缓到其各地的边缘服务器节点上。当用户访问该资源时，CDN再通过负载均衡将用户的请求调度到最近的缓存节点上，有效减少了链路回源，提高了资源访问效率及可用性，降低带宽消耗。
CDN在HTTP协议中的应用：CDN利用HTTP协议里的代理和缓存技术，用户在上网的时候不直接访问原网站，而是访问离他最近的一个CDN节点，节省了访问过程中的时间成本。

通过上述原理和关系，CDN能够显著提高网站的访问速度，优化用户体验，同时减轻源服务器的压力。

2. 请尽可能详细地说明，协商缓存会发送几次请求？第一次发送哪种请求？option请求是什么？你的回答中不要写出示例代码。

协商缓存机制涉及两次请求，第一次是正常请求资源，第二次是检查资源是否更新的条件请求。第一次请求是正常请求，第二次请求是条件请求，用于检查资源自上次请求以来是否发生了修改。

第一次请求

请求类型：第一次请求是正常请求，即客户端向服务器请求资源。
请求内容：客户端会发送一个GET请求来获取资源。
服务器响应：服务器会返回资源及其相关信息，如Last-Modified或ETag。

第二次请求

请求类型：第二次请求是条件请求，即客户端在本地缓存资源后，再次请求时会在请求头中携带If-Modified-Since或If-None-Match来询问服务器资源是否已更新。
请求内容：客户端会在请求头中包含If-Modified-Since（上次请求资源的最后修改时间）或If-None-Match（资源的ETag值）。
服务器响应：
- 如果资源自上次请求以来未发生修改，服务器返回状态码304（Not Modified），表示客户端可以继续使用缓存中的资源。
- 如果资源已修改，服务器返回状态码200，并返回新的资源内容以及新的Last-Modified或ETag值。

Option请求

定义：OPTIONS请求用于获取目的资源所支持的通信选项，可以检测服务器支持哪些HTTP方法，或在CORS中发起预检请求以检测实际请求是否可以被服务器所接受。
应用场景：
- 检测服务器所支持的请求方法。
- 在CORS中，使用OPTIONS方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。

协商缓存机制通过两次请求有效地减少了不必要的网络传输，提高了资源访问效率。第一次请求获取资源，第二次请求检查资源是否更新，从而决定是否需要从服务器重新获取资源。

3. 请尽可能详细地说明，script标签中async和defer的区别。script标签为什么要设计成阻塞html的渲染？你的回答中不要写出示例代码。

[](@replace=### async和defer的区别

执行时机：
- async：当<script>标签设置了async属性后，浏览器会在下载脚本的同时继续解析HTML文档。脚本下载完成后，浏览器会立即执行该脚本，无论它在文档中的位置如何。这意味着async脚本的执行顺序是不确定的，如果有多个async脚本，它们会按照下载完成的顺序执行。
- defer：当<script>标签设置了defer属性后，浏览器同样会在下载脚本的同时继续解析HTML文档。但是，所有带有defer属性的脚本会在整个HTML文档解析完成后，但在DOMContentLoaded事件触发之前，按照它们在文档中出现的顺序执行。
阻塞行为：
- async脚本不会阻塞HTML的解析，但会阻塞DOMContentLoaded事件的触发，因为它们会在下载完成后立即执行。
- defer脚本既不会阻塞HTML的解析，也不会阻塞DOMContentLoaded事件的触发，因为它们会在HTML解析完成后执行。

script标签阻塞HTML渲染的原因

<script>标签设计成阻塞HTML渲染的主要原因是为了确保脚本执行时的上下文环境（如DOM结构）是完整的。在早期的网页设计中，脚本经常用来操作DOM元素，如果在DOM元素还未完全加载时就执行脚本，可能会导致脚本运行错误。因此，浏览器默认会阻塞HTML的解析，直到<script>标签中的脚本执行完毕。

随着Web技术的发展，为了提高页面加载性能，引入了async和defer属性，允许开发者更精细地控制脚本的加载和执行时机，从而在不阻塞HTML解析的情况下执行脚本。