Processo de carregamento do navegador
Desde o momento em que inserimos a URL até o carregamento da página, o processo experimentado pelo navegador é o seguinte:
1. O navegador analisa o endereço da URL que inserimos
2. O DNS resolve o nome de domínio em um número IP
3. O navegador obtém o número da porta
4. De acordo com o endereço IP, através do TCP Handshake triplo para estabelecer uma conexão entre o servidor e o navegador
5. Enviar uma solicitação HTTP
6. O servidor processa a solicitação e retorna um resultado de resposta 7. Desconecte a conexão acenando quatro vezes
através do TCP 8. O navegador carrega, analisa e renderiza
análise do navegador
O mecanismo de renderização do navegador executa o código de cima para baixo e o navegador analisa três coisas.
1.analisando HTML, analise HTML em uma árvore DOM.
2.analisando CSS: analisa CSS em CSSOM. Depois que o mecanismo de renderização do navegador recebe CSS, ele analisa CSS em folhas de estilo que o navegador pode entender. Há três maneiras de introduzir estilos CSS (1) CSS externo importado por meio de link ou importação (2) CSS
incorporado
interno
( 3) A ordem de análise de CSS no estilo CSS embutido adicionado na tag de atributo
: estilo do navegador -> estilo definido pelo usuário -> CSS externo introduzido por link ou importação -> estilo embutido da tag de estilo
3.Análise JavaScript. Depois que o script JavaScript for carregado, opere a árvore DOM e a árvore de regras CSS por meio da árvore DOM e do CSSOM.
Nota :
(1) CSS não bloqueará a análise do DOM, mas bloqueará a renderização da página
(2) JS bloqueará a análise do DOM, os navegadores encontrarãoroteiroguia, aciona a renderização da página
O mecanismo de renderização do navegador
1. O navegador analisa tags HTML e constrói uma árvore DOM
2. O navegador analisa CSS e gera uma árvore CSSOM
3. O navegador combina a árvore DOM e a árvore CSSOM para gerar uma árvore de renderização
4. O navegador calcula a posição de cada nó, de acordo com a renderização da árvore para o layout
5. Desenhe os nós após o layout na tela