页面完全加载后触发预取

Question

我的情况是:

目前在某些页面上JS "吃掉"相当多的资源,因此在页面加载期间在某些情况下触发预取并不是最好的答案 - 因为当用户与JS创建的事件和元素交互时会导致一个小的延迟.

我的问题是:

甚至可以(将它可以)触发<link rel="prefetch" href="image.png">或添加CSS文件,<head>以便它可以在当前页面完全加载后从另一个页面预取数据吗？
我应该这样做类似于使用JS渲染其他样式表,我在其中添加新标记<head>作为样式表文件,以便它可以渲染..还是有另一种方式？

Answer 1

您可以使用缓存存储来预取(预缓存)资产.我在一个使用这种方法的开源项目上工作.虽然,要提供预先缓存的资产,您需要一名服务工作者.在我的项目中查找资产的逻辑就像这样.

这个项目的演示就在这里.另外,我写了一篇文章,解释了该项目的技术细节.

加载lib后,资产会被预取,因此我不会等待整个页面加载.也许我应该使用requestIdleCallback来等待浏览器空闲.

希望它能带给你一些灵感.