Blokowanie wyświetlania <link "stylesheet" blocking, script blocking, style blocking>
W jaki sposób załadować skrypt JavaScript (JS) asynchronicznie, ale zatrzymać wyświetlanie (renderowanie) strony, dopóki nie skończy on generować dynamicznej zawartości?
- Zewnętrzny arkusz stylów CSS:
<link rel="stylesheet" href="style.css" blocking="render">
- Skrypt JavaScript:
<script blocking="render"></script>
- Wewnętrzny arkusz stylów CSS:
<style blocking="render">...</style>
- style.css
- Lokalizacja zewnętrznego arkusza stylów CSS
Przeglądarka internetowa może wykonywać niektóre operacje równocześnie. Czasami mogłoby to jednak prowadzić do nieoczekiwanych rezultatów. Dlatego na przykład osadzenie zewnętrznego skryptu JavaScript na stronie zwykle powoduje, że przeglądarka przestaje wykonywać inne operacje, dopóki go nie załaduje i nie uruchomi. Możemy jednak pozwolić na wykonywanie niektórych czynności równolegle - np. ładowanie innych zasobów zewnętrznych osadzonych w dokumencie - a zablokować jedynie samo wyświetlanie strony (ang. render), dopóki kod skryptu nie zakończy swojego uruchomienia i nie wygeneruje dynamicznej treści na stronie:
<script src="skrypt.js" async blocking="render"></script>
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
<link blocking> | 105 2022-09-02 | ❌ | 105 2022-09-01 | 91 2022-09-14 | 18.2 2024-12-11 |
<script blocking> | 105 2022-09-02 | ❌ | 105 2022-09-01 | 91 2022-09-14 | 18.2 2024-12-11 |
<style blocking> | 105 2022-09-02 | ❌ | 105 2022-09-01 | 91 2022-09-14 | 18.2 2024-12-11 |