摘要 今天小编跟大家讲解下有关让页面更早的渲染：使用 preload 提升资源加载优先级 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到

今天小编跟大家讲解下有关让页面更早的渲染：使用 preload 提升资源加载优先级 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关让页面更早的渲染：使用 preload 提升资源加载优先级 的相关资料，希望小伙伴们看了有所帮助。

preload是一个新的 Web 标准 旨在提高性能以及提供给 web 开发者更多的细粒度加载控制。它可以使开发者自定义加载逻辑而避免以script标签加载资源所带来的性能损耗。

preload可以指明哪些资源在页面加载的生命周期的早期阶段就开始获取 在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用 且更不易阻塞页面的初步渲染 进而提升性能。

preload提供的好处主要是：

将加载和执行分离 可不阻塞渲染和document的onload事件。提前加载指定资源 不再出现依赖的font字体隔了一段时间才刷出。可以去更早地加载晚出现的资源。哪些类型的资源可以使用 preload vaudio: 音频文件。document: 一个将要被嵌入到<frame>或<iframe>内部的 html 文档。embed: 一个将要被嵌入到<embed>元素内部的资源。fetch: 那些将要通过fetch和 XHR 请求来获取的资源 比如一个 ArrayBuffer 或 jsON 文件。font: 字体文件。image: 图片文件。object: 一个将会被嵌入到<embed>元素内的文件。script: JavaScript 文件。style: 样式表。track: WebVTT 文件。worker: 一个 JavaScript 的 web worker 或 shared worker。video: 视频文件。如何使用 preload 使用 link 标签<!-- 使用 link 标签静态标记需要预加载的资源 --><link rel="preload" href="http://www.aidi.net.cn/path/to/style.css" as="style"><!-- 或使用脚本动态创建一个 link 标签后插入到 head 头部 --> <script> const link = document.createElement('link'); link.rel='preload'; link.as='style'; link.href='http://www.aidi.net.cn/path/to/style.css'; document.head.appendChild(link);</script>

使用as来指定将要预加载的内容的类型 将使得浏览器能够：

更精确地优化资源加载优先级。匹配未来的加载需求 在适当的情况下 重复利用同一资源。为资源应用正确的内容安全策略。为资源设置正确的 Accept 请求头。使用 HTTP 响应头的 Link 字段创建Link:<https://example.com/other/styles.css>; rel=preload;as=style更早的加载

使用preload前 在遇到资源依赖时才会进行加载：

使用preload后 浏览器会进行资源调度 将link指定的资源优先加载 不管资源是否使用：

但使用preload时需要注意以下几点。

1. 不要滥用 preload。

若不确定资源是必定会使用的 则不要无意义的使用preload 在移动端则需要特别慎重 因为可能会浪费用户的带宽。

2. preload 会使资源优先加载 但不一定会提升优先级（Priority）。是否相同优先级 是否使用 preload ? preload 指定的资源先加载 : 根据 Queue 顺序加载 : 根据优先级权重加载

使用preload会减少线程的 Queueing 时间 但是不一定会提高资源优先级。

3. 不要混淆 preload 和 prefetch。<!-- 预测 --><link rel="preload" href="http://www.aidi.net.cn/article/detial/9260/a.css"><!-- 确认 --> <link rel="prefetch" href="http://www.aidi.net.cn/article/detial/9260/b.css">

prefetch是一种期望 预测会加载指定的资源 以备下一个导航或者下一屏页面使用 但对当前的页面并没有什么帮助。如果prefetch使用不得当 还会造成资源重复加载的问题。页面不一定会使用prefetch指定的资源。

preload是一种肯定 确认会加载指定资源 在页面加载的生命周期的早期阶段就开始获取 不区分下一屏。页面一定会使用preload指定的资源（不使用将会报警告）。

4. 使用 preload 预加载跨域资源时 需要设置 crossorigin 属性。

如果你需要获取的是font文件 那么即使是非跨域的情况下 也需要设置crossorigin。

<linkrel="preload"href="https://mdn.github.io/html-examples/link-rel-preload/fonts/fonts/cicle_fina-webfont.woff2 "as="font"crossorigin="anonymous">

若不指定crossorigin属性 则会采用匿名模式的 CORS 去加载。这样可能会导致因为优先级的不同而重复加载资源文件的问题。

更多preload示例介绍。

总结资源优先级 Priority 会随着浏览器进程的不同阶段动态变化的。更早的加载意味着更早的渲染。prefetch和preconnect都属于预加载机制 但preload在大多数情况下更符合需求和预期。

来自：https://segmentfault.com/a/1190000022839874

来源：爱蒂网