Javascript预加载iframe而不阻止浏览器 [英] Javascript preload iframe without blocking the browser

问题描述

我有几个iframe加载后面有一个巨大的3D模型。

I have several iframes to load with a huge 3D model behind.

当我在我的网站上显示我的iframe时，我的浏览器会阻止这个iframe加载（可能是20秒......）

When i display my iframe on my website, my browser block while this iframe is loading (maybe 20seconds..)

我正在寻找一种方法来预加载这些iframe而不会阻止浏览器。我尝试使用display none，ajax或者动态创建iframe但没有效果。

I'm looking for a way to preload these iframe without blocking the browser. I tried something with display none, ajax or by create iframe dynamically but no effect.

你有什么想法吗？谢谢！

Do you have any ideas ? Thanks !

推荐答案

AFAIK，没有干净的支持/标准方式预加载iFrame而不会阻止浏览器。

AFAIK, there is no clean supported/standard way of pre-loading iFrame without blocking the browser.

但是有一些方法可以最小化这个阻止。为了给你一些观点，这里是浏览器阻止的地方：

There are however ways you can minimize this "block". To give you some perspective, here's where the browser blocks:

• 加载脚本


• 加载大外部资源（脚本/图像/ css /其他媒体）


• 重型DOM操作


• 密集型计算

• loading scripts
• loading big external resources (scripts/images/css/other media)
• heavy DOM manipulation
• intensive computation

要减轻脚本加载，您可以使用加载脚本而不阻止。如果你可以正确地进行浏览器缓存，那么iFrame中的页面将花费时间下载脚本，因为它已经在缓存中。

To mitigate script loading, you can use techniques such as Loading Scripts Without Blocking. If you can get browser caching right, then the page in iFrame will spend no time downloading the script since its already in the cache.

对于其他资源，如果适用，您可以使用相同的预加载技术来填充浏览器缓存。

For other resources, if applicable, you can use the same pre-loading techniques to fill up browser cache.

重型DOM操作 - 您可以使用概述这里和这里将帮助您最大限度地减少重绘和回流。

Heavy DOM manipulation - you can use techniques outlined here and here which will help you minimize repaints and reflows.

如果可能，您可以调整ReactJs的功能，通过使用<来最小化浏览器DOM操作a href =https://facebook.github.io/react/docs/working-with-the-browser.html#the-virtual-dom =nofollow>虚拟DOM

If possible, you can maybe adapt what ReactJs does, to minimize browser DOM manipulation by using a virtual DOM

您提到了3D模型计算，它们往往是计算密集型的。你应该看一下使用网络工作者，这将从主要方面卸载阻塞方面浏览器线程进入后台线程。

You mentioned 3D model computation and they tend to be computationally intensive. You should look at using Web Workers which would offload the blocking aspect from the main browser thread into a background thread.

所有这些技术的结合将最大限度地减少阻塞。如果您能够隔离并识别出最大瓶颈的部分，则无需实施所有技术。

All of these techniques combined will minimize the block. You do not have to necessarily implement all of the techniques, if you can isolate and identify the part that's the biggest bottleneck.

希望这会有所帮助！

这篇关于Javascript预加载iframe而不阻止浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！