blocking="render": Bloqueando a Renderização sob Demanda

Scripts e folhas de estilo sempre tiveram um comportamento meio implícito em relação à renderização: um <script> no <head> bloqueia o parser inteiro até terminar de baixar e executar, enquanto um <link rel="stylesheet"> bloqueia só a pintura da página. O atributo blocking="render" cria uma terceira opção declarativa: bloquear apenas a primeira pintura, sem travar o parsing do resto do HTML.

Os dois comportamentos que já existiam

<script src="critico.js"></script>

Um <script> comum no <head> é parser-blocking: o navegador para de processar o restante do documento até o script terminar. Já um script inserido dinamicamente via document.createElement('script') nunca bloqueia nada, nem o parser nem a renderização — ele só executa quando chega, independentemente do que já foi pintado na tela.

O problema aparece quando esse segundo caso é exatamente o errado: um script pequeno que precisa rodar antes da primeira pintura (por exemplo, para aplicar uma classe de tema ou definir uma variável usada no CSS crítico), mas que foi inserido dinamicamente e por isso corre o risco de rodar tarde demais, gerando um flash de conteúdo errado.

Como funciona o atributo

Adicionando blocking="render" em um script inserido dinamicamente, ele passa a bloquear a primeira pintura da página até terminar de executar — sem bloquear o parser, que continua processando o restante do HTML normalmente:

const script = document.createElement('script');
script.src = 'tema.js';
script.blocking = 'render';
document.head.appendChild(script);

O mesmo efeito é obtido declarativamente em HTML, para os casos em que o script já está no documento mas precisa desse comportamento intermediário:

<script src="tema.js" blocking="render"></script>

Usando em link e style

O atributo também vale para <link rel="stylesheet"> e <style>, tornando explícito um bloqueio que hoje já acontece por padrão nesses elementos — útil principalmente quando a folha de estilo é inserida dinamicamente e precisaria do mesmo comportamento de bloquear a pintura:

<style blocking="render">
    .oculto-ate-hidratar { display: none; }
</style>

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'critico.css';
link.blocking = 'render';
document.head.appendChild(link);

Timeout de segurança

Para evitar que um recurso lento trave a página indefinidamente, o navegador aplica um timeout curto (na casa de alguns segundos) depois do qual o bloqueio é liberado mesmo que o recurso ainda não tenha carregado. Isso significa que blocking="render" é uma prioridade forte, mas não uma garantia absoluta — o ideal é reservá-lo para recursos realmente pequenos e rápidos.

Quando usar

Scripts inseridos dinamicamente que precisam definir tema, feature flags ou classes críticas antes da primeira pintura.
Folhas de estilo ou blocos <style> injetados via JavaScript que precisam do mesmo bloqueio de renderização que um <link> estático já teria.
Substituir truques manuais como esconder o <body> com visibility: hidden até um script terminar de rodar.

Cuidados

Bloquear a renderização adia a primeira pintura, então o atributo deve ser usado com moderação — o objetivo é evitar um flash visual incorreto, não criar um novo gargalo de performance. Vale medir o impacto no LCP e no FCP antes e depois de adicionar o atributo em produção.

Compatibilidade

Suportado no Chrome desde a versão 105 e no Safari desde a 18.2. O Firefox ainda não implementou, apesar de sinalizar posição favorável ao recurso. Como é um atributo progressivo, navegadores que não o reconhecem simplesmente o ignoram, mantendo o comportamento padrão de cada elemento.

caniuse

Conclusão

O blocking="render" preenche uma lacuna real entre o bloqueio total do parser e a ausência completa de bloqueio, dando controle fino sobre quando a página pode ser pintada sem recorrer a gambiarras de CSS ou JavaScript para esconder conteúdo até um recurso crítico carregar.