How can you preload an entire web page using JavaScript so that I can get that page cached in the users browser?
如何使用JavaScript预加载整个web页面，以便将该页面缓存在用户浏览器中?
I know how to preload images with JS but what I would like to do is preload the entire page.
我知道如何用JS预加载图像，但我想做的是预加载整个页面。
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.
用例:在我的网站上，我有一个谷歌地图页面，上面有很多其他内容(图像、css、JS)，从非缓存浏览器加载需要很长时间(大约10秒)。
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 come 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.
它是我主页的一个子页面，用户通常会访问这个页面。所以我想做的是尽可能多地用所有加载的内容(图像，JS)预加载整个页面，这样它就会被缓存到用户浏览器中，这样当用户到达页面时，加载速度就会快得多。从缓存的浏览器加载页面可以将时间从10秒缩短到2秒。
Thanks in advance for any help.
谢谢你的帮助。
2 个解决方案
#1
8
Create an invisible or very small <iframe src="second_page.html"> on the main page.
创建一个不可见的或非常小的
#2
2
Maybe there are some wrong concepts. Seperating real contents from fancy stuffs may help reducing the loading cost a lot. You may choose solutions that delay the immediately loading things on document load. (For example, I have a concept demo called PlayMaps, that displays only a static Google Maps image until the user clicks on it, and only loads the interactive version of it after then.)
也许有一些错误的概念。将真正的内容与花哨的内容分开使用可以帮助降低加载成本。您可以选择一些解决方案来延迟文档加载的立即加载。(例如，我有一个名为PlayMaps的概念演示，它只显示静态的谷歌映射图像，直到用户单击它，然后才加载它的交互版本。)
CSS and JS files should be compressed and minified, and try to serve all content statically.
CSS和JS文件应该被压缩和缩小，并尝试静态地服务于所有内容。
Furthermore, you can analyze your website's performance with Firebug and YSlow to get the bottlenecks.
此外，您可以通过Firebug和YSlow来分析网站的性能，从而获得瓶颈。
#1
8
Create an invisible or very small <iframe src="second_page.html"> on the main page.
创建一个不可见的或非常小的
#2
2
Maybe there are some wrong concepts. Seperating real contents from fancy stuffs may help reducing the loading cost a lot. You may choose solutions that delay the immediately loading things on document load. (For example, I have a concept demo called PlayMaps, that displays only a static Google Maps image until the user clicks on it, and only loads the interactive version of it after then.)
也许有一些错误的概念。将真正的内容与花哨的内容分开使用可以帮助降低加载成本。您可以选择一些解决方案来延迟文档加载的立即加载。(例如，我有一个名为PlayMaps的概念演示，它只显示静态的谷歌映射图像，直到用户单击它，然后才加载它的交互版本。)
CSS and JS files should be compressed and minified, and try to serve all content statically.
CSS和JS文件应该被压缩和缩小，并尝试静态地服务于所有内容。
Furthermore, you can analyze your website's performance with Firebug and YSlow to get the bottlenecks.
此外，您可以通过Firebug和YSlow来分析网站的性能，从而获得瓶颈。