Assunto
- #Carregamento de recursos
- #Carregamento de páginas
- #Otimização do navegador
Os navegadores geralmente fazem o renderização na seguinte ordem:
- Análise HTML (de cima para baixo, head -> body):
1. Análise HTML e criação do DOM
2. Carregamento e aplicação do arquivo CSS (bloqueia a renderização)
3. Carregamento e execução do script (bloqueia a renderização)
4. Renderização do conteúdo da seção <body> (imagem, texto, etc.)
Controlar a prioridade dos recursos do navegador pode otimizar a velocidade de carregamento da página.
Pretende-se registrar os principais atributos abaixo que podem melhorar a ordem de renderização.
- JavaScript: async, defer, module
- CSS: preload, media
- Imagem: loading="lazy", srcset, sizes
- Outros: prefetch, preconnect, dns-prefetch
JavaScript
async : é baixado em paralelo com a análise HTML e executado imediatamente após o download. Se algum recurso da página estiver relacionado a este js, é melhor remover a tag async.
defer : é baixado em paralelo com a análise HTML e executado após a conclusão da análise HTML. = A ordem é garantida. Se precisar executar após a renderização completa do html, é melhor adicionar a tag defer.
O navegador carrega o html primeiro por padrão, mas se houver uma fonte de script na tag head, a renderização será bloqueada. Adicionar as duas tags acima pode evitar o bloqueio da renderização html.
CSS
styleshee : É o valor padrão. É um elemento que bloqueia a renderização e é usado quando o css precisa ser carregado obrigatoriamente.
preload : Faz o download antecipadamente sem bloquear a renderização. É alterado para stylesheet no momento em que o evento onload ocorre e o estilo é aplicado.
media: Renderiza se corresponder à condição do tamanho da tela.
Imagem
loading="lazy" : Carrega a imagem quando ela aparece na tela. (Quando a posição da rolagem está próxima do elemento onde a imagem está localizada)
srcset : Seleciona a imagem ideal para o tamanho da tela. (Otimização do tamanho da imagem)
sizes : Fornece uma dica ao navegador para selecionar a imagem apropriada de acordo com o tamanho da viewport.
No caso da última tag img, quando há uma imagem com largura de 480px e uma imagem com largura de 1024px, o atributo size indica que, se o max-width for 600px, a imagem de 480px será exibida, caso contrário, a imagem de 1024px será exibida.
* No comércio eletrônico, como há dezenas de imagens em uma única página, reduzir o tamanho da imagem tem um grande impacto.
Por exemplo, na tela de resultados de pesquisa, existem pelo menos 20 imagens e a pesquisa é executada 100.000 vezes por dia...
Outros
rel="prefetch": Melhora a velocidade de carregamento na próxima página baixando antecipadamente os recursos antes de navegar para a página.
rel="preconnect": Configura antecipadamente a conexão de rede para um link específico. (Vídeos grandes, fontes, etc.)
rel="dns-prefetch": Consulta o DNS de recursos externos para carregar os recursos mais rapidamente. (Principalmente CDN externo)
* preconnect vs dns-prefetch
preconnect é uma conexão tcp (dns - handshake tcp - handshake tls), portanto, é uma operação pesada que ocupa os recursos do navegador. É usado quando os recursos externos precisam ser carregados rapidamente. (Quando o recurso é muito importante e sua renderização rápida é importante)
dns-prefetch apenas consulta o DNS, portanto, é uma operação mais leve. É adequado para recursos não importantes e para carregamento posterior.
Comentários0