blocks|key|2682582|text|使用https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content的CSS和JS的preload可能非常适合，并且在大多数现代浏览器中都有很好的支持：https://caniuse.com/#search=preload|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2682583|可能还有更好的解决方案，例如@soulshined建议的解决方案，但另一种粗糙的方法是，如果另一个页面包含etags或缓存控制标头，则可以使用AJAX向您期望加载的资源发送请求。这将导致浏览器请求这些资源并预先填充用户代理缓存，因此当用户请求另一个页面上的资源时，缓存将包含资源，并且它将比第一次获取所有内容时加载得更快。|2682584|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content|1|https://caniuse.com/#search=preload^0|26|7|2|1W|0|34|Z|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]|$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

<code>preload</code> of CSS and JS using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content</a> might be a good fit and has good support in most modern browsers: <a href="https://caniuse.com/#search=preload" rel="nofollow noreferrer">https://caniuse.com/#search=preload</a>

There are probably better solutions, such as the one suggested by @soulshined, but another crude way to do this is the other page contains etags or cache control headers would be to use AJAX to send requests to the resources you expect to load. This would cause the browser to request those resources and prefill the user agent cache so that when the user requests that resource on the other page there is a higher change the cache would contain the resources and it'd load faster than if it had to fetch everything for the first time.

blocks|key|2472238|text|您可以使用Cache+Storage预取(预缓存)资源。我在做一个使用this+approach的开源项目。不过，要提供预先缓存的资源，您需要一个service+worker。在我的项目中查找资产的逻辑看起来像this。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2472239|这个项目的演示是here。此外，我还编写了an+article，解释了该项目的技术细节。|2472240|一旦库被加载，Assets+get+prefetched，所以我不需要等待整个页面加载。也许我应该使用requestIdleCallback等待，直到浏览器空闲。|2472241|希望它能给你一些启发。|2472242|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage|1|https://github.com/sirko-io/client/blob/master/src/sirko/barn.js#L60-L70|2|https://github.com/sirko-io/client/blob/master/src/sirko_sw.js#L57-L70|3|https://github.com/sirko-io/client/blob/master/src/sirko/barn.js#L20-L36|4|https://demo.sirko.io/home|5|https://nesteryuk.info/2018/04/08/automate-precaching-resources.html|6|https://github.com/sirko-io/client/blob/master/src/sirko.js#L38|7|https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback^0|5|D|0|Z|D|1|21|E|2|2X|4|3|0|8|4|4|L|A|5|0|E|E|6|1F|J|7|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]|$A|19|B|1A|1|1B]|$A|1C|B|1D|1|1E]|$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]|$A|1M|B|1N|1|1O]]|C|$]]|$1|F|3|G|5|6|7|1P|8|@]|9|@$A|1Q|B|1R|1|1S]|$A|1T|B|1U|1|1V]]|C|$]]|$1|H|3|I|5|6|7|1W|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]|T|$5|M|N|O|C|$P|U]]|V|$5|M|N|O|C|$P|W]]|X|$5|M|N|O|C|$P|Y]]|Z|$5|M|N|O|C|$P|10]]|11|$5|M|N|O|C|$P|12]]|13|$5|M|N|O|C|$P|14]]]]

You might use <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage" rel="noreferrer">Cache Storage</a> to prefetch (precache) assets. I work on an open-source project which uses <a href="https://github.com/sirko-io/client/blob/master/src/sirko/barn.js#L60-L70" rel="noreferrer">this approach</a>. Although, to serve precached assets you need a <a href="https://github.com/sirko-io/client/blob/master/src/sirko_sw.js#L57-L70" rel="noreferrer">service worker</a>. The logic of finding assets in my project looks like <a href="https://github.com/sirko-io/client/blob/master/src/sirko/barn.js#L20-L36" rel="noreferrer">this</a>.

The demo of this project is <a href="https://demo.sirko.io/home" rel="noreferrer">here</a>. Also, I wrote <a href="https://nesteryuk.info/2018/04/08/automate-precaching-resources.html" rel="noreferrer">an article</a> which explains technical details of the project.

Assets <a href="https://github.com/sirko-io/client/blob/master/src/sirko.js#L38" rel="noreferrer">get prefetched</a> once the lib is loaded, so I don't wait for the entire page load. Maybe I should use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback" rel="noreferrer">requestIdleCallback</a> to wait until the browser is idle.

Hopefully, it gives you some inspiration.

blocks|key|2472248|text|只需注意，您可以在页面加载完成后或任何时候添加附加样式表，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2472249|document.addEventListener("DOMContentLoaded",+function(event)+{+
++++++var+script+=+document.createElement("link");
++++++script.rel+=+"stylesheet";
++++++script.href=+"stylesOfAnotherPage2.css";

++++++document.getElementsByTagName("body")[0].appendChild(script);//or+head
});|code-block|syntax|javascript|2472250|加载page1时，将缓存stylesOfAnotherPage2.css，因此当调用page2时，如果page2调用相同的文件，则stylesOfAnotherPage2.css已被缓存。|offset|length|style|CODE|2472251|entityMap^0|0|0|C|O|1T|O|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Just to note that you could add aditional stylesheet after the page load completly or whenever you want with somethig like this:

<pre><code>document.addEventListener("DOMContentLoaded", function(event) { 
 var script = document.createElement("link");
 script.rel = "stylesheet";
 script.href= "stylesOfAnotherPage2.css";

 document.getElementsByTagName("body")[0].appendChild(script);//or head
});
</code></pre>

When you load page1, <code>stylesOfAnotherPage2.css</code> is cached, so when page2 is called, <code>stylesOfAnotherPage2.css</code> is already cached if page2 call the same file.

blocks|key|20247|text|预取资产的方法有DNS预取、预连接、预渲染和预取。根据要求，您可以适当地使用它们。每种方法都有自己的用途，了解每种方法的具体用途this会很有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|20248|entityMap|0|LINK|mutability|MUTABLE|url|https://medium.com/@soorajchandran/speeding-up-your-website-using-prefetching-techniques-8077058b7418^0|1S|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

To prefetch assets there are some prefetching methods such as DNS-prefetch, pre-connect, pre-render &amp; prefetch. As per the requirement, you may use them appropriately. Each method has its own purpose <a href="https://medium.com/@soorajchandran/speeding-up-your-website-using-prefetching-techniques-8077058b7418" rel="nofollow noreferrer">this</a> would be useful to know each one specifically.

My scenario is:

<ul>
<li>user visits domain.com (home page)</li>
<li>domain.com/products page contains large image library and quite large CSS and JS libraries</li>
<li>when user visits domain.com and the home page has fully loaded, we start to prefetch resources &amp; if possible at least some % of images from the archive.</li>
</ul>

Currently on some pages JS "eats" quite a lot of resources therefor triggering prefetch in some cases during page load is not the best answer - as it will cause a small lag when user interacts with JS created events and elements.

My questions are:

<ol>
<li>Is it even possible (will it work) to trigger <code>&lt;link rel="prefetch" href="image.png"&gt;</code> or CSS file to be added to <code>&lt;head&gt;</code> so it can prefetch data from another page after current page is fully loaded?</li>
<li>Should I do it similar like rendering additional stylesheet using JS where I add new tag within <code>&lt;head&gt;</code> as a stylesheet file so it can then render.. or is there another way?</li>
</ol>

Trigger prefetching after page is fully loaded

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我的场景是：用户访问domain.com ( page)domain.com/products主页包含大型图像库以及相当大的CSS和JS库当用户访问domain.com并且主页已完全加载时，我们将开始预取资源&如果可能，至少从归档中预取某些%的图像。目前在一些页面上，JS“吃掉”了相当多的资源，因此在某些情况下，在页面...

问页面完全加载后触发预取
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面完全加载后触发预取EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面完全加载后触发预取
EN