Recentemente, estou aprendendo a otimização de desempenho do front-end. É necessário entender o processo de renderização da página para prescrever o medicamento certo e descobrir o gargalo do desempenho. A seguir, são apresentadas algumas coisas que eu vi, e eu as compartilharei com você.
Referência: Compreendendo o renderizador
A renderização da página tem as seguintes características :• Pesquisa de eventos de tiro único
• Operação claramente definida, contínua e ordenada (html5)
• Partição e construção de árvores DOM
• Solicitar recursos e pré -carga
• Construir árvores de renderização e desenhar páginas
Especificamente :Quando obtemos os bytes correspondentes do HTML da rede, a árvore Dom começa a ser construída. O tópico que atualiza a interface do usuário é responsável pelo navegador. A construção da árvore dom está bloqueada quando:
• O fluxo de resposta HTML está bloqueado na rede
• Existem scripts descarregados
• O nó de script foi encontrado, mas ainda havia um arquivo de estilo descarregado no momento
A árvore de renderização é construída a partir da árvore Dom e será bloqueada pelo arquivo de estilo.
Como é baseado em pesquisas de eventos de tiro único, mesmo que não haja bloqueio de scripts e estilos, a renderização da página será bloqueada quando esses scripts ou estilos forem analisados, executados e aplicados.
Alguns casos em que a renderização de páginas não bloqueia :• Atributos de adiamento definidos e atributos assíncronos
• O arquivo de estilo sem tipo de mídia correspondente
• Nenhum nó de script ou nó de estilo é inserido através do analisador
Aqui, vamos ilustrar isso com um exemplo (código completo) :Copie o código