Artigo Introdução de wulin.com (www.vevb.com): Muitas pessoas perguntam o que é HTML5? Dizemos que o método que podemos usar o HTML5 primeiro é alterar o Doctype primeiro, porque muitas páginas ainda estão da maneira tradicional atualmente. O método HTML5 é compatível com o navegador do IE e pode ser usado do IE6 ao IE10 e pode ser suportado por navegadores avançados.
[Nota do editor] O artigo a seguir foi escrito por um técnico de TI chamado Zhang Liming, publicado na página da InfoQ. Desta vez, ele analisou o desempenho do HTML5 de 9 aspectos diferentes no texto completo, que ainda vale a pena ler pelos desenvolvedores correspondentes.
Do ponto de vista do desempenho, o HTML5 primeiro reduz os documentos HTML, tornando isso mais simples. Primeiro, da perspectiva da legibilidade do usuário, havia muitas coisas que originalmente não eram entendidas pelos iniciantes pela primeira vez para ver essas coisas, e o método de declaração HTML5 é obviamente mais amigável para os usuários. Segundo, a declaração de codificação do documento é muito simples se estiver no HTML5. Muitas pessoas perguntam o que é HTML5? Dizemos que o método que podemos usar o HTML5 primeiro é alterar o Doctype primeiro, porque muitas páginas ainda estão da maneira tradicional atualmente. O método HTML5 é compatível com o navegador do IE e pode ser usado do IE6 ao IE10 e pode ser suportado por navegadores avançados. Portanto, a maneira mais fácil de adotar o HTML5 é mudar o Doctype.
1. Uma etiqueta mais simples
A próxima coisa pode não ser uma coisa muito comum, mas é algo que eu prefiro, usando um método de etiqueta mais simples. Como você pode dizer neste nome, o HTML5 é herdado do HTML4. HTML4 possui modo rigoroso e modo de transição. O HTML5 suporta esse modo de transição, o que significa que você não pode fechar algumas tags. No entanto, eu não recomendo todas as tags, por exemplo, a etiqueta corporal não está fechada, o que não recomendamos. Mas o p-label mais usado também é a tag li Li. Por que você diz isso? Primeiro de tudo, de uma perspectiva visual, esse método é um pouco mais simples. Então, a chave é que, durante o processo de transferência de documentos, haverá menos conteúdo.
A declaração de atributos de tag html5 suporta três maneiras: suportes únicos, colchetes duplos e colchetes não ramificados. Para reduzir o tamanho do documento, escolhi o método sem cotações duplas ou citações únicas. No entanto, deve -se notar que, assumindo que seja uma declaração de atributos de classe, porque os atributos podem incluir várias classes e, quando várias classes, elas devem ser fechadas entre colchetes. Nesse sentido, deixe -me mostrar a você uma prática do Google. O próprio Google possui uma página que pratica completamente o acima, reduzindo o tamanho do documento em 20%, reduzindo a transferência de documentos HTML em 20%. Se tudo for praticado, poderá obter uma diminuição entre 5% e 20%. Esta é a primeira etapa, reduzindo o tamanho do documento HTML.
2. Otimização de imagens
Em seguida, é sobre a otimização de imagens, que sempre são elementos que amam e ódio. Porque quando houver muitas fotos, isso arrasta seriamente a velocidade de carregamento de toda a página. Em relação aos métodos de otimização das imagens, há muitas apresentações no livro "High Performance Website". Para resumir, existem três pontos principais: usando elfos, otimizando o tamanho das imagens e usando o URI de dados. Não vou entrar em detalhes aqui.
Outra idéia de otimização da imagem é: sem imagem. Abandone as fotos e abraça o CSS3. Originalmente, eu precisava definir uma imagem com um efeito de canto arredondado, mas agora usei o radiato de fronteira no CSS3; Eu costumava definir um efeito de sombra, mas agora uso a Shadow Box no CSS3; Eu costumava definir uma imagem de fundo de gradiente, mas agora uso o gradiente no CSS3.
3. Pré-busca
Em seguida, vamos falar sobre pré -busca, que é outra maneira de otimização. Nossas idéias de otimização atuais nada mais são do que poucas. Muitos deles são da perspectiva de menos coisas, por exemplo, o tamanho do documento foi reduzido antes e o tamanho da imagem foi reduzido. Muitas fotos se tornam um elfos, a fim de reduzir o número de solicitações de envio. Para pré -busca, é outra maneira de pensar. Carregando recursos mais cedo. Quando o usuário vai direto ao ponto, ele realmente carregou, então definitivamente será mais rápido.
Existem duas partes para a pré-busca: uma é a pré-busca de recursos e a outra é a pré-resolução do DNS.
Há vários pontos a serem observados ao pré -carregamento de recursos:
A pré -carga só puxa quando o navegador estiver ocioso, mas não é garantido que o puxasse. Este é um ponto muito importante. Porque o navegador em si tem um ouvinte global, que é uma interface interna. Quando o ar de navegação estiver ocioso, ele executa o navegador quando estiver ocioso, mas esse retorno de chamada ocioso pode não ser acionado, portanto, não garante que a pré -carga seja executada.
O Chrome não suporta a pré -carga dos recursos HTTPS. Por exemplo, o Alipay é uma página HTTPS, o Chrome não será pré-pull.
Embora uma página pré-pulada não seja visível depois de existir, ela está realmente analisando normalmente. Se eu preceder a página de login, a página de login possui muitos recursos, como imagens, arquivos CSS e arquivos JS. Ele será analisado de cima para baixo normalmente. Durante o processo de análise, esta página não aparece, mas na verdade existe. No HTML5, você pode obter o status atual da página através do document.VisibilityState. Geralmente, a página tem dois estados, visíveis e invisíveis, mas agora existe um novo estado chamado estado de pré-renderização. Você pode determinar diretamente se a página está no estado de pré -renda, se document.VisibilityState é igual ao Prerender.