javascript - How to preload an ENTIRE web page - Stack Overflow

admin管理员组

文章数量:1291014

How can you preload an entire web page using JavaScript so that I can get that page cached in the users browser?

I know how to preload images with JS but what I would like to do is preload the entire page.

Use case: On my website, I have a google maps page with a lot of other content (images, css, JS) and it takes a long time (about 10 seconds) to load from a non-cached browser.

It's a subpage to my home page and users typically visit this page. So what I want to do is preload the entire page with all of the loaded content (images, JS) as much as possible so that it's cached in the users browser so that when they e to that page - it loads up much quicker. Loading the page from a cached browser cuts the time from around 10 second to 2 second.

Thanks in advance for any help.

How can you preload an entire web page using JavaScript so that I can get that page cached in the users browser?

I know how to preload images with JS but what I would like to do is preload the entire page.

Use case: On my website, I have a google maps page with a lot of other content (images, css, JS) and it takes a long time (about 10 seconds) to load from a non-cached browser.

It's a subpage to my home page and users typically visit this page. So what I want to do is preload the entire page with all of the loaded content (images, JS) as much as possible so that it's cached in the users browser so that when they e to that page - it loads up much quicker. Loading the page from a cached browser cuts the time from around 10 second to 2 second.

Thanks in advance for any help.

• javascript
• html
• preload
• yslow

Share Improve this question Follow edited May 8, 2009 at 18:34 Adam Jaskiewicz 11k33 gold badges3636 silver badges3737 bronze badges asked May 8, 2009 at 17:48 MrDoAlotMrDoAlot 1

• This browser feature (not supported by all) developer.mozilla/en/Link_prefetching_FAQ is relevant. Personally I see it as an advantage that it takes no JS at all to implement, but it does not match the question exactly. – Christian Commented Nov 30, 2011 at 2:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Create an invisible or very small <iframe src="second_page.html"> on the main page.

Hidden <iframe/>'s are avoidable with either of two available javascript APIs: fetch or new XMLHttpRequest() .

Fetch is the most modern API at the moment and can be used like so:

<script>
  const url = './second_page.html';
  fetch(url, {credentials: `include`});
</script>

The alternative is to use XMLHttpRequest:

<script>
  const url = './second_page.html';
  req = new XMLHttpRequest();
  req.open(`GET`, url);
  req.send();
</script>

Either API returns the provided HTML file as a string. Going one step further, the returned HTML document can be traversed to precache images, videos, scripts, stylesheets, etc. too.

---

The source code for the javascript libraries instantclick and quicklink might be worth reviewing for ideas on how to optimize precaching html files:

• https://github./dieulot/instantclick
• https://github./GoogleChromeLabs/quicklink/

本文标签： javascriptHow to preload an ENTIRE web pageStack Overflow