ice-next icon indicating copy to clipboard operation
ice-next copied to clipboard

资源预加载

Open chenjun1011 opened this issue 3 years ago • 2 comments

原计划将页面依赖的 JS 资源,通过 preload 的方式进行预加载

image

https://github.com/ice-lab/ice-next/pull/229

但实时上,浏览器在下载完 HTML 后,HTML 中声明的 link 和 script 资源会被立即发起请求,且是并行的,而非按顺序边解析,边加载。

所以将 body 中的 script 内容前置到 head 中,使用 preload,并不会提前资源的加载时机。

通过 preload 可能带来较大收益的场景是:

  • 提前发起 CSS 资源内依赖的 fonts / images
  • 大的图片或视频资源
  • 异步加载的 js 资源

chenjun1011 avatar May 26 '22 08:05 chenjun1011

除了当前页面资源之外,是否还可以考虑闲时其他页面资源的预加载策略,比如 https://github.com/GoogleChromeLabs/quicklink 中的一些逻辑策略

ClarkXia avatar May 27 '22 02:05 ClarkXia

@chenjun1011

  1. 08 年之后的大多数浏览器都实现了预先扫描 html 文件去提早并行下载资源 js/css/image 的逻辑
  2. 以上逻辑对于动态下载的资源是不生效的, 比如 react-router 匹配分包后的资源
  3. 看下能否通过 loader 去收集这些资源, 并按需地去预加载

wssgcg1213 avatar Jun 21 '22 09:06 wssgcg1213