Optimize load of exactly identical iframes

I need to display several exactly identical iframes. This iframes have javascript that reads from the # of the URI and then perform different request but the source code of the iframe and the fetched ressources are exactly identical.

1 iframes, including javascript, stylesheets and image is approximately 10 mb. Now imagine that I need to display up to 10 iframes on the same page. That's a page of up to 100 mb !

The problem is that neither the iframes themselves or the content they are loading are being directly cached. (not on Google Chrome at least, which is my principal target).

Here is an example of what my code looks like :

<iframe src="myiframe#1">
<iframe src="myiframe#2">
<iframe src="myiframe#3">
...

Each iframe is loading the same huge javascript file and the same request is being fired for as many iframe as I have :

We can clearly see that when the first js file finished to download, the other one (even the connections that weren't initiated yet!) are not using the cache but rather downloading it all over again. And it goes the same with every file.

What have I tried ?

• Sending caching headers. Currently replying with cache-control: public, max-age=31536000 but I've even tried the more restrictive such as Cache-Control: immutable

• First loading only one iframe and then, onload, loading all the other iframes. It still doesn't use the cache even though the first iframe has fully loaded and should have saved the ressources in the cache !

• Cloning iframes but, and as described by the RFC, it fully reloads the iframe hence firing the requests again.

On the second load of my page however, the browser does fetch the ressources in the cache but that's not enough for me.

The desperate (and only ?) solution I can think of :

Load all the ressources and the iframe source code, then dynamically create an iframe element and inject everything in it. It would be possible but very hard. Also, probably not very performance friendly.

Note : The iframe are not on my domain but I'm doing some reverse proxy thing so I have controls over the iframes. It means I can possibly modify the source code of the iframe but since everything is minified and all it's not an easy thing to do.

from Optimize load of exactly identical iframes