代码之家 › 专栏 › 技术社区 › richardev Valter Lobo

页面完全加载后触发预取

prefetch css html javascript

richardev Valter Lobo · 技术社区 · 7 年前

我的设想是:

用户访问 域名.com (主页)
域.com/products 页面包含大型图像库和相当大的 CSS 和 JS 图书馆
当用户访问时 域名.com 以及 主页已完全加载 ,我们开始预取资源(如果可能的话),至少有%的图像来自存档。

当前在某些页面上 JS 在某些情况下,在页面加载期间触发预取并不是最佳答案,因为当用户与 JS 创建了事件和元素。

我的问题是:

是否有可能触发 <link rel="prefetch" href="image.png"> 或要添加到的CSS文件 <head> 所以它可以预取来自另一页的数据 当前页完全加载后 ?
我是否应该这样做,比如使用JS呈现附加样式表,在其中添加新标记 <头> 作为样式表文件,以便它可以呈现。还是有别的办法?

5 回复 | 直到 7 年前

Dmytro Nesteriuk 7 年前

你可以用 Cache Storage 预取(预取)资产。我在一个开源项目中工作,它使用 this approach . 尽管如此,要提供预先准备好的资产,您需要 service worker . 在我的项目中查找资产的逻辑如下 this .

这个项目的演示是 here . 另外,我写道 an article 它解释了项目的技术细节。

资产 get prefetched 一旦lib被加载,我就不需要等待整个页面加载了。也许我应该用 requestIdleCallback 等待浏览器空闲。

希望它能给你一些灵感。

Emeeus 7 年前

只需注意,您可以在页面加载完成后添加附加样式表,也可以随时使用类似这样的样式表:

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
});

加载第1页时, stylesOfAnotherPage2.css 是缓存的,所以当调用page2时, 样式其他网页2.css 如果page2调用同一文件,则已缓存。

Benjamin RD 7 年前

你可以用 HTTP Catching 和 Link prefetching 使用浏览器空闲时间下载或预取用户可能在不久的将来访问的文档。

预取提示

浏览器会观察所有这些提示,并将每个唯一的请求在浏览器空闲时预取。可能有每页多个提示,因为预取多个提示可能有意义文件。例如,下一个文档可能包含几个大的图像。

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
<link rel="next" href="2.html">

此外,您还可以阅读此线程: Preload, Prefetch And Priorities in Chrome 在这里,您可以阅读关于执行、加载和预加载时间的不同状态和优先级,以及一些改进它们的提示。

David 7 年前

preload 使用的CSS和JS https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content 在大多数现代浏览器中可能是一个很好的匹配和支持: https://caniuse.com/#search=preload

可能有更好的解决方案,例如@soulshined建议的解决方案,但另一种粗略的方法是,另一个包含etags或缓存控制头的页面将使用ajax向您希望加载的资源发送请求。这将导致浏览器请求这些资源并预先填充用户代理缓存,这样当用户请求另一页上的资源时,会有更高的更改,缓存将包含资源,并且加载速度比第一次获取所有内容要快。

Balu 7 年前

要预取资产,有一些预取方法,如DNS预取、预连接、预呈现和预取。根据需要,您可以适当地使用它们。每种方法都有自己的目的 this 特别了解每一个都很有用。