归档 标签 友链 关于

使用 preload 资源预加载

如果有前后关联的异步 XHR 请求通常会在回调函数中按顺序先后加载,但这样会比较耗时,所以我们有 Promise.all() 来并行请求,最后再处理。

在编写小型前端项目尽可能考虑兼容且不依赖第三方库时,可以使用在 html 的 <head> 中添加 <link> 通过 rel="preload" 进行内容预加载。

<link> 元素的 rel 属性的属性值 preload 能够让你在你的 HTML 页面中 <head>元素内部书写一些声明式的资源获取请求,可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。
--引用自 MDN

简单来说,就是添加这种特定的 head 后我们就可以在文档加载后就提前请求一部分内容,留待之后的网络请求直接使用,不需要额外的处理。

串行请求:
xhr_serial

并行请求:
xhr_parallel

为了动态的添加 "preload",还可以通过 js 代码实时写入到 DOM 中,以下是我封装的函数。

  function preload(url) {
   var preloadLink = document.createElement('link')
   preloadLink.href = url
   preloadLink.rel = 'preload'
   preloadLink.as = 'fetch'
   preloadLink.crossOrigin = 'anonymous'
   document.head.appendChild(preloadLink)
 }

· 转载请注明 https://tangkaichuan.cn/use-preload/