面试前端性能优化八股文十问十答第一期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

CDN（Content Delivery Network，内容分发网络）是一种分布式的网络架构，旨在提高网站内容传输的效率和性能。它通过将内容分发到全球各地的多个节点，使用户能够从距离更近的服务器获取所需的内容，从而加快内容加载速度，减少网络延迟。

CDN 的主要作用包括：

CDN 的工作原理通常包括以下几个步骤：

内容缓存和分发：CDN 提供商在全球范围内部署了大量的缓存服务器（也称为边缘节点或 PoP 点），这些服务器位于各个地理位置的网络边缘。当用户请求访问某个网站时，CDN 会将网站的静态内容（如图片、视频、样式表等）缓存在距用户最近的边缘节点上。
智能路由：当用户请求访问网站内容时，CDN 会通过智能路由技术将用户的请求引导到距离最近的边缘节点，从而减少数据传输的延迟和网络拥塞。
内容传输：边缘节点在接收到用户请求后，会根据请求的内容是否存在于缓存中来进行相应的处理。如果请求的内容已经缓存，则直接从缓存中返回给用户；如果内容未缓存，则边缘节点会向源服务器请求内容，并将内容缓存到本地，然后再返回给用户。
缓存更新：CDN 会定期检查源服务器上的内容是否发生了变化，如果发生了变化，则会更新缓存中的内容，以确保用户获取的是最新的内容。

通过以上方式，CDN 可以实现内容的快速分发和高效传输，从而提高了网站的性能和用户体验。

CDN 的使用场景广泛，特别适用于以下情况：

懒加载是一种延迟加载的策略，它指的是在页面初始加载时，并不加载所有的资源，而是只加载用户当前可见区域的资源。懒加载可以应用于图片、脚本、样式表等资源，以提高页面加载性能和用户体验。

懒加载具有以下特点：

懒加载的实现原理通常涉及以下步骤：

识别加载时机：确定何时加载延迟加载资源。通常是当用户滚动页面或者其他事件触发时，检测到元素进入了可视区域。
加载资源：一旦确定了加载时机，就开始加载延迟加载资源，这可以通过异步加载资源的方式来实现，比如 JavaScript 动态创建 <script> 或 <link> 标签，或者使用 AJAX 请求数据。
替换占位符：在资源加载完成之前，可以使用占位符（比如 loading 动画或者占位图片）来暂时代替延迟加载的内容，以确保页面布局不会因为资源加载延迟而发生错乱。
触发加载：根据具体的实现方式，可能需要监听滚动事件或者其他用户操作，以触发加载延迟加载资源的逻辑。

懒加载和预加载是两种不同的资源加载策略：

懒加载：延迟加载，只有当需要使用某个资源时才加载它。懒加载可以减少页面的初始加载时间和带宽消耗，提高页面加载性能和用户体验。
预加载：在页面加载完成后，提前加载将来可能需要使用的资源。预加载可以在用户实际需要资源之前就将其加载到浏览器缓存中，以降低后续加载时的延迟，但可能会增加初始页面加载时间和带宽消耗。

回流（Reflow）：指的是浏览器重新计算元素的位置和大小，并重新绘制页面的过程。当页面布局或者 DOM 结构发生变化时，会触发回流。回流可能会导致页面的重新排版和重绘，是较为昂贵的操作。
重绘（Repaint）：指的是浏览器重新绘制页面元素的过程，但不涉及布局的改变。当元素的样式发生变化，但不影响其在文档流中的位置和大小时，会触发重绘。

触发回流和重绘的条件包括：

改变 DOM 结构：比如添加、删除或者修改 DOM 元素。
改变样式：比如修改元素的尺寸、位置、颜色等样式属性。
获取某些属性：比如 offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 等，因为这些属性需要返回最新的布局信息，可能会触发回流。