加载iframe为什么会阻塞页面的渲染？ ​

前端面试常问的问题就是从用户输入URL到页面加载的过程，中间就会涉及到JS、iframe阻塞页面渲染的问题，如果是JS的话，因为JS会涉及到DOM操作，暂停render Tree的生成，等待JS执行完毕之后继续执行render Tree的生成，所以JS的下载会阻塞页面的渲染，那么iframe阻塞页面渲染到底是怎么回事呢？

主要原因 ​

iframe 可能导致页面加载出现白屏现象，这通常与其加载机制和资源加载优先级有关。以下是一些原因：

1. 资源加载阻塞：iframe 通常会加载另一个 HTML 页面，这意味着浏览器需要处理额外的 HTTP 请求。如果这些请求被阻塞或延迟，或者 iframe 中的内容非常庞大，它们可能会影响到整个页面的加载时间，导致白屏现象。

2. 渲染阻塞：如果 iframe 中的内容在加载和解析时消耗大量资源，这可能会阻塞主页面的渲染。这种情况通常发生在 iframe 加载了复杂的应用或大量的媒体内容时。

3. 同步加载：默认情况下，iframe 的加载是同步的，这意味着浏览器会停止解析主文档，直到 iframe 完全加载和解析完成。这可以导致主页面出现明显的白屏时间。

4. 网络延迟：如果 iframe 的源服务器响应时间慢，或者网络状况不佳，这也会增加页面的加载时间。

5. 无内容展示：在某些情况下，如果 iframe 的内容由于权限问题（如跨域限制）或者错误而无法加载，它可能会显示为空白，给用户造成整个页面还未加载完成的错觉。

优化方案 ​

为了减少 iframe 对页面加载性能的影响，可以考虑以下优化措施：

• 异步加载：使用 JavaScript 动态地加载 iframe，以避免阻塞主页面的渲染。
• 懒加载：只在用户滚动到 iframe 附近时才加载它，这样可以确保主页面先加载完毕。
• 优化 iframe 内容：减少 iframe 中加载的资源数量和大小，优化其内部的 HTML、CSS 和 JavaScript。
• 预加载技术：使用预加载技术来优先加载关键资源。
• 监控性能：使用浏览器的性能监控工具来检测 iframe 的加载对页面性能的影响。