我有几个要加载的 iframe，后面有一个巨大的 3D 模型。
当我在我的网站上显示我的 iframe 时，我的浏览器会在加载此 iframe 时阻塞(可能需要 20 秒......)
我正在寻找一种在不阻塞浏览器的情况下预加载这些 iframe 的方法。我尝试了不显示、ajax 或动态创建 iframe 但没有效果。
你有什么想法吗？谢谢!
最佳答案
据我所知，在不阻塞浏览器的情况下，没有干净的支持/标准预加载 iFrame 的方法。
但是，您可以通过多种方式最小化此“ block ”。为了让您了解一些情况，浏览器会在此处阻止:
- 加载脚本
- 加载大型外部资源(脚本/图像/css/其他媒体)
- 大量的 DOM 操作
- 密集计算
要减轻脚本加载，您可以使用 Loading Scripts Without Blocking 等技术.如果您可以正确设置浏览器缓存，那么 iFrame 中的页面将不会花时间下载脚本，因为它已经在缓存中。
对于其他资源，如果适用，您可以使用相同的预加载技术来填充浏览器缓存。
重度 DOM 操作 - 您可以使用概述的技术 here和 here这将帮助您最大限度地减少重绘和回流。
如果可能，您可以调整 ReactJs 的功能，通过使用 virtual DOM 来最小化浏览器 DOM 操作。
您提到了 3D 模型计算，它们往往是计算密集型的。你应该看看使用 Web Workers这会将阻塞方面从主浏览器线程卸载到后台线程中。
所有这些技术的结合将最大限度地减少阻塞。如果您可以隔离并确定最大瓶颈的部分，则不必实现所有技术。
希望这对您有所帮助!
关于Javascript 预加载 iframe 而不会阻塞浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31320816/