资源预加载

441 阅读1分钟

预加载

资源预加载是一种性能优化方案,预加载相当于是快用户一步,在浏览器空闲的时候就把即将用到的资源加载完,等用户实际需要使用时,资源已经缓存从而跳过资源加载的等待时间。

Resource Hints 是一种预加载相关的标准,它告诉浏览器进行一些预先连接或预先加载操作。Resource Hints 定义了 html link 标签的 DNS Prefetch、Preconnect、Prefetch 与 Prerender关系,用于协助用户端判定应该获取哪个源的数据及哪些资源应该被预加载或与处理。

link标签预加载

prefetch

prefetch定义了需要浏览器提前加载的资源,用在在之后的操作或浏览中。浏览器不会对提前加载的资源进行预处理,比如像CSS、JavaScript脚本这类资源加载完成后资源是不会自动执行的。as 属性表示资源类型注意:prefetch会阻塞fetch请求,如果使用prefetch预加载了多条资源同时,页面有其他的fetch请求,当出现请求排队的话后续fetch请求会被等待

<link rel="prefetch" href="//example.com/next-page.html" as="document" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

prerender

The prerender link relation type is used to identify a resource that might be required by the next navigation, and that the user agent SHOULD fetch and execute, such that the user agent can deliver a faster response once the resource is requested in the future.

preload

script标签预加载