HTML5 - HTML
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?
(interpretuje: Opera 91, Chrome 105)
- 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>