https://frederic-wang.fr

Frédéric Wang · Yet another non-exponentially growing weblogFrédéric Wang · Yet another non-exponentially growing weblog Frédéric Wang Yet another non-exponentially growing weblog About Me  Blog Archive My recent contributions to Gecko (3/3) 05 Sep 2024 Note: This blog post was written on June 2024. As of September 2024, final work to ship the feature is still in progress. Please follow bug 1797715 for the latest updates. Introduction This is the final blog post in a series about new web platform features implemented in Gecko, as part as an effort at Igalia to increase browser interoperability. Let’s take a look at fetch priority attributes, which enable web developers to optimize resource loading by specifying the relative priority of resources to be fetched by the browser. Fetch priority The web.dev article on fetch priority explains in more detail how web developers can use fetch priority to optimize resource loading, but here’s a quick overview. fetchpriority is a new attribute with the value auto (default behavior), high, or low. Setting the attribute on a script, link or img element indicates whether the corresponding resource should be loaded with normal, higher, or lower priority 1: The priority can also be set in the RequestInit parameter of the fetch() method: await fetch("high.txt", {priority: "high"}); The element has some interesting features. One of them is combining rel=preload and as to fetch a resource with a particular destination 2: You can even use Link in HTTP response headers and in particular early hints sent before the final response: 103 Early Hint Link: ; rel=preload; as=script; fetchpriority=high These are basically all the places where a fetch priority attribute can be used. Note that other parameters are also taken into account when deciding the priority to use for resources, such as the position of the element in the page (e.g. blocking resources in ), other attributes on the element (

ماذا تفعل؟