Introdução detalhada ao processo de carregamento e análise de página HTML

1. A ordem dos downloads do IE é de cima para baixo, e a ordem de renderização também é de cima para baixo. Download e renderização são realizados simultaneamente.

2. Ao renderizar para uma parte da página, todas as partes acima foram baixadas (nem todos os elementos associados foram baixados).

3. Se você encontrar um arquivo incorporado de tag interpretativo semântico (script JS, estilo CSS), o processo de download do IE permitirá uma conexão separada para download.

4. Depois que o download da folha de estilo for concluído, ela será analisada com todas as folhas de estilo baixadas anteriormente. Após a conclusão da análise, todos os elementos anteriores (incluindo aqueles que foram renderizados antes) serão renderizados novamente.

5. Se houver alguma redefinição em JS e CSS, a função de definição posterior substituirá a função de definição anterior.

1. Não é possível baixar e analisar em paralelo (download de bloqueio).

2. Quando o JS é referenciado, o navegador envia uma solicitação JS e aguarda a devolução da solicitação. Como o navegador precisa de uma estrutura estável em árvore dom, é muito provável que haja

O código altera diretamente a estrutura da árvore Dom, como usar document.write ou ApndendChild, ou mesmo usando diretamente o local.href para saltos. Para impedir que os reparos de JS ocorram, o navegador

Para modificar a árvore Dom, é necessário reconstruir a árvore Dom, para bloquear outros downloads e renderizações.

1. Perda de peso da página:

um. O peso da página é o fator mais importante que afeta a velocidade de carregamento.

b. Exclua espaços e comentários desnecessários.

c. Mova o script embutido e o CSS para arquivos externos.

d. Você pode usar o HTML Tidy para perder peso para HTML e também pode usar algumas ferramentas de compactação para perder peso para JavaScript.

2. Reduza o número de arquivos:

um. Reduzir o número de arquivos referenciados na página pode reduzir o número de conexões HTTP.

b. Muitos arquivos JavaScript e CSS podem ser mesclados e é melhor mesclá -los. Caibangzi fundiu seu JavaScript. funções e prototype.js em um arquivo base.js.

3. Reduza a consulta de nomes de domínio:

um. Os nomes de domínio de consulta e análise DNS também consomem tempo, por isso precisamos reduzir a referência a JavaScript externo, CSS, imagens e outros recursos. Quanto menos você usa nomes de domínio diferentes, melhor.

4. Dados de cache reutilizados:

um. Dados reutilizados em cache.

5. Otimize a ordem de carregamento dos elementos da página:

um. Primeiro, carregue o conteúdo exibido originalmente na página e o JavaScript e o CSS relacionados a ele e, em seguida, carregue coisas relacionadas a HTML, como as que não são exibidas nas imagens originais, flash, vídeos etc. e depois carregam-os.

6. Reduza o número de JavaScript embutido:

um. O analisador do navegador assumirá que o JavaScript embutido alterará a estrutura da página; portanto, o uso de javascript embutido é caro.

b. Não use document.Write (), um método de saída de conteúdo, use os métodos modernos do W3C DOM para processar o conteúdo da página para navegadores modernos.

7. Use CSS moderno e tags legais:

um. Use CSS moderno para reduzir rótulos e imagens. Por exemplo, o uso de texto CSS+ moderno pode substituir completamente algumas imagens somente de texto.

b. Use tags legais para evitar a correção de erros e outras operações quando o navegador analisar o HTML. Você também pode usar o HTML Tidy para perder peso para HTML.

8. Coloque seu conteúdo:

um. Não use tabelas aninhadas, mas tabelas ou divs não aninhadas. Decomponha o layout da tabela com base em grandes pedaços de tabelas aninhadas em várias tabelas pequenas, para que você não precise esperar até que o conteúdo inteiro (ou tabela grande) seja carregado antes de ser exibido.

9. Especifique o tamanho da imagem e da tabela:

um. Se o navegador puder determinar imediatamente o tamanho da imagem ou tabela, poderá exibir imediatamente a página sem refazer algum arranjo de layout.

b. Isso não apenas acelera a exibição da página, mas também impede algumas alterações inadequadas no layout após o carregamento da página.

c. A imagem usa altura e largura.

1. O usuário insere o URL (assumindo que seja uma página HTML e é a primeira vez que você o acessar), o navegador emite uma solicitação ao servidor e o servidor retorna o arquivo HTML.

2. O navegador começa a carregar o código HTML e descobre que existe uma tag <ink> na tag <ad Head> referenciando o arquivo CSS externo.

3. O navegador emite uma solicitação para o arquivo CSS e o servidor retorna o arquivo CSS.

4. O navegador continua a carregar a parte <cody> do código no HTML, e o arquivo CSS foi obtido, para que você possa começar a renderizar a página.

5. O navegador encontrou uma tag <mg> no código que referenciou uma imagem e fez uma solicitação ao servidor. No momento, o navegador não esperará até que a imagem seja baixada, mas continuará a renderizar o código subsequente.

6. O servidor retorna o arquivo de imagem. Como a imagem ocupa uma determinada área, afeta o arranjo dos parágrafos subsequentes, o navegador precisa voltar e renderizar essa parte do código.

7. O navegador encontrou uma tag <cript> contendo uma linha de código JavaScript e executa -a rapidamente.

8. O script JavaScript executa esta afirmação, que comanda o navegador para ocultar um <estilo> (style.display = nenhum) no código. É uma pena, de repente, existe esse elemento, e o navegador precisa renderizar essa parte do código.

9. Finalmente, esperei a chegada de </html>, e o navegador explodiu em lágrimas ...

10. Espere, ainda não acabou. O usuário clicou no botão Skinning na interface e o JavaScript pediu ao navegador que alterasse o caminho CSS da tag <ink>.

11. O navegador reuniu todos aqui, todos embalaram sua bagagem, temos que fazê-lo novamente ... o navegador solicitou um novo arquivo CSS do servidor e renderizou novamente a página.