With iframe you will be fetching all static resource which is already a win
But unless page-b is static with longer lived expiration, e.g. no `Pragma: no-cache` and so on, the browser may decide to fetch it again
Additionally you'll be rendering in a smaller frame, so re-rendering will likely be required. You can work around by sizing the iframe to match the window size, but that gets hacky. And you don't know what type of rendering work the browser may decide to do when you have display: none
But the iframe approach you suggest can be beneficial when:
* page-b's html depends on page-a's. HTML may be different but static resources are likely unchanged. Example: page-a is login screen and page-b is a members area.
* browser other than chrome
The iframe shouldn't be page-b , but some other page-c.html that only loads css, js, img and has no other content
But unless page-b is static with longer lived expiration, e.g. no `Pragma: no-cache` and so on, the browser may decide to fetch it again
Additionally you'll be rendering in a smaller frame, so re-rendering will likely be required. You can work around by sizing the iframe to match the window size, but that gets hacky. And you don't know what type of rendering work the browser may decide to do when you have display: none
But the iframe approach you suggest can be beneficial when: * page-b's html depends on page-a's. HTML may be different but static resources are likely unchanged. Example: page-a is login screen and page-b is a members area. * browser other than chrome
The iframe shouldn't be page-b , but some other page-c.html that only loads css, js, img and has no other content