Skip to content

Commit

Permalink
Document blocking attribute for link,script,style tag
Browse files Browse the repository at this point in the history
  • Loading branch information
abinpaul1 committed Apr 4, 2022
1 parent 3b21c37 commit d3a7cfd
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 0 deletions.
12 changes: 12 additions & 0 deletions files/en-us/web/html/element/link/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,10 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
The common use of this attribute is to define the type of stylesheet being referenced (such as **text/css**), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the `type` attribute, but is actually now recommended practice.
It is also used on `rel="preload"` link types, to make sure the browser only downloads file types that it supports.

- {{HTMLAttrDef("blocking")}}
- : This attribute explicitly indicates that certain operations should be blocked on the fetching of an external resource. The operations that are to be blocked must be a space-separated list of blocking attributes listed below.
- `render`: The rendering of content on the screen is blocked

### Non-standard attributes

- {{HTMLAttrDef("methods")}} {{Non-standard_Inline}}
Expand Down Expand Up @@ -367,6 +371,14 @@ myStylesheet.onerror = function() {

You can find a number of `<link rel="preload">` examples in [Preloading content with `rel="preload"`](/en-US/docs/Web/HTML/Link_types/preload).

### Blocking rendering till a resource is fetched

You can include `render` token inside a `blocking` attribute;
the rendering of the page will be blocked till the resource is fetched. For example:
```html
<link blocking="render" href="critical-font.woff2" as="font">
```

## Technical summary

<table class="properties">
Expand Down
13 changes: 13 additions & 0 deletions files/en-us/web/html/element/script/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,10 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.
- **Any other value:** The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The `src` attribute will be ignored.

- {{htmlattrdef("blocking")}}
- : This attribute explicitly indicates that certain operations should be blocked on the fetching of the script. The operations that are to be blocked must be a space-separated list of blocking attributes listed below.
- `render`: The rendering of content on the screen is blocked.

### Deprecated attributes

- {{htmlattrdef("charset")}} {{Deprecated_inline}}
Expand Down Expand Up @@ -210,6 +214,15 @@ You can also use the `<script>` element to embed data in HTML with server-side r
</script>
```

### Blocking rendering till a script is fetched and executed

You can include `render` token inside a `blocking` attribute;
the rendering of the page will be blocked till the script is fetched and executed. In the example below, we block rendering on an async script,
so that the script doesn’t block parsing but is guaranteed to be evaluated before rendering starts.
```html
<script blocking="render" async src="async-script.js"></script>
```

## Specifications

{{Specifications}}
Expand Down
3 changes: 3 additions & 0 deletions files/en-us/web/html/element/style/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
- : A cryptographic nonce (number used once) used to allow inline styles in a [style-src Content-Security-Policy](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src). The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.
- {{htmlattrdef("title")}}
- : This attribute specifies [alternative style sheet](/en-US/docs/Web/CSS/Alternative_style_sheets) sets.
- {{htmlattrdef("blocking")}}
- : This attribute explicitly indicates that certain operations should be blocked on the fetching of the script. The operations that are to be blocked must be a space-separated list of blocking attributes listed below.
- `render`: The rendering of content on the screen is blocked

### Deprecated attributes

Expand Down

0 comments on commit d3a7cfd

Please # to comment.