如何使用优先级提示来优化浏览器的资源加载?
为了使网站更快的展示在用户面前,我们可以让浏览器优先加载更重要的资源。
img
, iframe
, script
, and link
等标签的新属性fetchpriority
可以通过标记html的优先级来实现这一想法。
什么是优先级提示?
浏览器加载资源的时候,会尝试猜测资源的重要程度,例如,加载css具有高优先级,而异步脚本可以以低优先级加载。
但是有时浏览器并不清楚资源的重要性,例如,默认情况下,加载图片具有较低的优先级,但有时候这并不是我们想要的,因为主页内容的图片应该被更加快速的加载。
通过给这些资源添加一些信息,能够帮助识别资源的重要程度。例如fetchpriority
这个属性能够标记这个图片作为高优先级被浏览器加载。
<img src="photo.jpg" fetchpriority="high">
点击链接Largest Contentful Paint.可以查看能够提高图片加载优先级的常见案例。
一个真实的优先级案例
看这个网站主要图片的请求瀑布
- 页面首次呈现后,优先级由Low变为High
- 瀑布流中有一条长长的灰色条,表示浏览器知道这个资源,但是并没有开始加载。
然后我们给两张图片设置 fetchpriority=high
, 使他们称为LCP元素。
现在这个优先级不再变化了,当请求页面的时候,图片会立即被加载。
因此, LCP从 4.2s 变成了1.9s。
picture
标签 和 优先级提示
HTML 的 picture
标签允许开发者指定可能的图像文件,然后浏览器根据文件类型和分别率选择最合适的图片加载。
通过给 picture 标签内的 img 标签添加 fetchpriority 属性,能够实现给 picture 标签添加优先级。
<picture>
<source srcset="/image-small.png" media="(max-width: 600px)">
<img src="/image.png" fetchpriority="high">
</picture>
什么元素支持fetchpriority属性?
可以给下面的元素设置优先级,来控制请求资源的优先。
- img
- script
- link
- iframe
例如,你想给页面预加载一个背景图片,默认这个图片的请求是低优先级的,可以通过设置fetchpriority
来改变
<link rel="preload" as="image" href="/background.webp" fetchpriority="high" />
如何在http请求头中设置优先级提示?
除了在html 中使用 link 标签来 预加载资源外,还可以在文档的请求头中设置 fetchpriority 提示
Link: </background.webp>; rel=preload; as=image; fetchpriority=high
如何在fetch中设置优先级提示?
fetch 允许开发人员从后端请求 json 格式的数据
默认这些请求都是高优先级的,你也可以给它设置成低优先级的。
const req = new Request("/data.json", { priority: "low" });
fetch(req).then(res => res.json).then(res => console.log("Response", res));
浏览器的支持情况?
自2022年4月101版本以来,Chrome一直支持优先级提示。Edge也支持优先级提示。
怎么验证优先级提示让你的网站加载的更快了?
如何查看网站请求优先级,一级他们初始化渲染后是否发生变化?
跑一个数据看看free website speed test。
在请求流中包含每个资源加载的详细情况
翻译原文 www.debugbear.com/blog/priori…
下一篇: 资源分享平台
推荐阅读
-
如何使用优先级提示来优化浏览器的资源加载?
-
Java 类加载器的作用 - 简介:类加载器是 Java™ 中一个非常重要的概念。类加载器负责将 Java 类的字节码加载到 Java 虚拟机中。本文首先详细介绍了 Java 类加载器的基本概念,包括代理模型、加载类的具体过程和线程上下文类加载器等。然后介绍了如何开发自己的类加载器,最后介绍了类加载器在 Web 容器和 OSGi™ 中的应用。 类加载器是 Java 语言的一项创新,也是 Java 语言广受欢迎的重要原因之一。它允许将 Java 类动态加载到 Java 虚拟机中并执行。类加载器从 JDK 1.0 开始出现,最初是为了满足 Java Applets 的需求而开发的,Java Applets 需要从远程位置下载 Java 类文件并在浏览器中执行。现在,类加载器已广泛应用于网络容器和 OSGi。一般来说,Java 应用程序的开发人员不需要直接与类加载器交互;Java 虚拟机的默认行为足以应对大多数情况。但是,如果遇到需要与类加载器交互的情况,而您又不太了解类加载器的机制,就很容易花费大量时间调试异常,如 ClassNotFoundException 和 NoClassDefFoundError。本文将详细介绍 Java 的类加载器,帮助读者深入理解 Java 语言中的这一重要概念。下面先介绍一些基本概念。 类加载器的基本概念 顾名思义,类加载器用于将 Java 类加载到 Java 虚拟机中。一般来说,Java 虚拟机以如下方式使用 Java 类:Java 源程序(.java 文件)经 Java 编译器编译后转换为 Java 字节代码(.class 文件)。类加载器负责读取 Java 字节代码并将其转换为 java.lang 实例。每个实例都用来表示一个 Java 类。通过该实例的 newInstance 方法创建该类的对象。实际情况可能更加复杂,例如,Java 字节代码可能是由工具动态生成或通过网络下载的。 基本上,所有类加载器都是 java.lang.ClassLoader 类的实例。下面将详细介绍这个 Java 类。 java.lang.ClassLoader 类简介 java.lang.ClassLoader 类的基本职责是根据给定类的名称为其查找或生成相应的字节码,然后根据这些字节码定义一个 Java 类,即 java.lang.Class 类的实例。除此之外,ClassLoader 还负责加载 Java 应用程序所需的资源,如图像文件和配置文件。不过,本文只讨论它加载类的功能。为了履行加载类的职责,ClassLoader 提供了许多方法,其中比较重要的方法如表 1 所示。下文将详细介绍这些方法。 表 1.与加载类相关的 ClassLoader 方法