Immaginate una pagina HTML con due elementi <script src="...">. Il parser vede il primo. Deve interrompere * l'analisi mentre recupera e poi esegue il javascript, perché potrebbe contenere chiamate al metodo document.write() che cambiano fondamentalmente il modo in cui deve essere analizzato il markup successivo. Recuperare le risorse su Internet è comparativamente molto più lento rispetto alle altre cose che fa il browser, quindi rimane in attesa senza nulla da fare. Alla fine il JS arriva, esegue e il parser può andare avanti. Quindi vede il secondo tag <script src="..."> e deve passare attraverso l'intero processo di attesa del caricamento della risorsa. È un processo sequenziale e questo è il blocco del parser.
Le risorse CSS sono diverse. Quando il parser vede un foglio di stile da caricare, invia la richiesta al server e prosegue. Se ci sono altre risorse da caricare, queste possono essere recuperate in parallelo (fatte salve alcune restrizioni HTTP). Ma solo quando le risorse CSS sono caricate e pronte, la pagina può essere dipinta sullo schermo. Questo è il blocco del rendering, e poiché i recuperi sono in parallelo, è un rallentamento meno serio.
* Il blocco del parser non è così semplice come in alcuni browser moderni. Hanno una certa capacità di analizzare provvisoriamente il seguente codice HTML nella speranza che lo script, quando viene caricato ed eseguito, non faccia nulla per rovinare l'analisi successiva, o se lo fa, che le stesse risorse devono ancora essere caricate . Ma possono ancora dover eseguire il lavoro se lo script fa qualcosa di imbarazzante.
Da documenti, _ "JavaScript può anche bloccare la costruzione di' DOM' e ritardare il rendering della pagina. ('Parser-blocking')" _ vs _ "Il CSS viene trattato come una risorsa di blocco del rendering, il che significa che il browser manterrà il rendering di qualsiasi contenuto processato fino a quando non verrà costruito il 'CSSOM'. (' render-blocking') "_ – Rayon