Como fazer o WordPress carregar o JavaScript de forma lenta para acelerar a renderização da página?

WordPressCarregamento lento de JavaScript para acelerar os métodos de renderização de página.

O que é a propriedade Adiar do JavaScript?

Todos provavelmente já se depararam com esta situação:

Existem N scripts no head, e quando os scripts são carregados, a renderização da página é bloqueada, que geralmente fica em branco.

Claro, podemos contornar isso colocando o script no código-fonte no rodapé.

No entanto, alguns ambientes de desenvolvimento complexos podem tornar essa tarefa simples particularmente complexa.

Neste ponto, podemos usar a propriedade Defer, que é uma propriedade relativamente rara em JavaScript.

Você pode nunca usá-lo, mas depois de ler esta introdução, tenho certeza de que não o abandonará.

Sua principal função é permitir que o script analise depois que a página inteira for carregada, em vez de analisá-la durante o carregamento, o que fornece velocidade de carregamento de página completa para scripts que contêm apenas JavaScript acionado por evento.

Sim, se a tag de script tiver um atributo defer, ela será executada após a análise da página HTML, mesmo que seja colocada no cabeçalho, o que é semelhante a colocar o script na parte inferior da página.

Claro, o uso de atraso também é limitado, geralmente preste atenção a 2 pontos:

1) Não chame o comando document.write em um bloco de script do tipo deferida;

• Porque document.write produzirá um efeito de saída direto.

2) Não use variáveis ​​globais ou funções em scripts Defer, incluindo scripts de execução imediata.

Adicione o atributo Defer ao script usado no WordPress

No WordPress, como podemos adicionar automaticamente o atributo Defer aos scripts usados ​​pelo WordPress?

Podemos adicionar o seguinte código ao arquivo functions.php do tema atual ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• O código acima só funciona, de acordo comCódigo JavaScript introduzido pelo WordPressserá eficaz.

注意 事项

O gerenciamento de visualização ao vivo pode ser exibido em branco:

Se você usar o código acima, ao abrir o gerenciamento de visualização em tempo real (Aparência → Personalizar), ele poderá ser exibido em branco, portanto, use-o conforme apropriado.

Quando o gerenciamento de visualização em tempo real for necessário, comente o código acima e exclua o código comentado após a conclusão da personalização.

Exemplo de código de comentário PHP:

/*

这里是代码 

*/