问题描述：
iframe 阻塞问题会阻塞页面的加载，因为 iframe 中的内容需要在父页面加载完成后才能被加载和渲染。这意味着在 iframe 内容完全加载和渲染之前，用户无法看到页面的其他部分。这种行为不仅降低了用户体验，因为用户会看到页面的一部分空白，而且还会影响页面的 SEO（搜索引擎优化），因为搜索引擎可能在等待所有内容加载完成后才评估页面内容的相关性。
阻塞原因：
-
浏览器的渲染机制：浏览器解析 HTML 文档并构建 DOM 树的过程是逐步进行的。当遇到
iframe标签时，浏览器会停止当前文档的解析，转而加载iframe指定的 URL。只有等到iframe的内容完全加载完毕后，浏览器才会继续解析父页面的剩余内容。 -
资源下载顺序：
iframe中的资源（如图片、脚本等）需要按照它们在文档中出现的顺序下载。如果iframe中的内容在父页面的其他内容之前下载完成，这将导致父页面的其他内容被延迟显示，从而阻塞页面的加载。 -
同步加载：默认情况下，
iframe的内容是同步加载的，这意味着它们会阻塞父页面的渲染。直到iframe的内容完全加载，父页面的渲染才能继续。 -
性能考虑：
iframe中的内容可能会占用大量的网络带宽和 CPU 资源。如果不加以控制，大量iframe的内容同时加载可能会对用户的设备产生显著的性能影响，从而阻塞页面的加载。
解决方案：
异步加载：将iframe的加载改为异步加载，使用JavaScript动态创建和插入iframe元素，这样可以避免页面加载时阻塞。
延迟加载：将iframe的加载延迟到页面其他内容加载完成后再进行，可以通过设置iframe元素的src属性或使用JavaScript的setTimeout方法来延迟加载。
预加载：提前加载iframe的内容，可以通过设置iframe元素的src属性为一个空白页面或一个预加载页面，当需要显示iframe时再修改src属性为真正需要加载的页面。
分片加载：将iframe的内容分成多个片段，可以将每个片段作为独立的iframe加载，这样即使其中一个片段加载慢或发生错误，不会影响其他片段的加载。
压缩内容：对于iframe中加载的内容，可以对其进行压缩，减小文件大小，从而提高加载速度。使用懒加载：只有在需要显示iframe时才加载其内容，可以通过监听页面滚动事件或其他触发条件来延迟加载iframe。（比如点击按钮，我才将iframe元素动态插入于页面）
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
