HTML Otimização acelera as páginas da web

A chave para reduzir o tempo de download das páginas da web é tentar reduzir o tamanho do arquivo. Quando várias páginas compartilham algum conteúdo de ingredientes, considere separar essas peças comuns separadamente. Por exemplo: podemos escrever scripts usados ​​por várias páginas HTML em arquivos .js independentes e depois chamá -los na página da seguinte forma:

<scriptsrc = myfile.js> </script>

Dessa forma, o arquivo público só precisa ser baixado uma vez e depois entra no buffer. Na próxima vez que ligar para a página HTML que contém o arquivo público novamente, o tempo de download será significativamente reduzido.

O CSS é um vestido HTML, e uma bela página da web não pode ficar sem ela. Existem muitas maneiras de fazer referência ao CSS nas páginas HTML, e a eficiência de diferentes métodos é diferente. Geralmente, podemos extrair o código de controle de estilo definido entre <estilo> </style>, salvá -lo em um arquivo .css separado e, em seguida, referenciá -lo na página HTML na tag <ink> ou tag @import:

<estilo>

@importurl (mysheet1.css);

</style>

Observe 2 pontos: 1. A tag <estilo> não precisa ser incluída no arquivo .css; 2. As tags @import e link devem ser definidas na parte principal da página HTML.

Minimizar o espaço de memória ocupado pelas páginas HTML é uma maneira eficaz de acelerar o downloads da página. Nesse sentido, há duas questões para prestar atenção:

As páginas HTML não podem ser separadas do suporte de programas de script. Muitas vezes, incorporamos vários idiomas de script nas páginas, como JavaScript e VBScript. No entanto, não sei se você percebe: essa mistura diminui a velocidade de acesso das páginas. O motivo é que, para interpretar e executar vários códigos de script, vários mecanismos de script devem ser carregados na memória. Portanto, tente escrever código na mesma linguagem de script na página.

Você já usou a tag <frame>? É uma característica maravilhosa. Se você deseja incluir o conteúdo da segunda página em um documento HTML, a maneira usual é usar a tag <FrameSet>. Mas com <frame>, tudo se torna simples. Por exemplo, para desenvolver uma página de visualização de documentos, você pode colocar uma série de tópicos à esquerda e um iframe à direita, que contém o documento a ser visualizado; Quando o mouse passar por cada link de tópico à esquerda, crie um novo iframe à direita para visualizar o documento. Ao fazer isso, a eficiência do código é, sem dúvida, eficiente, mas, ao mesmo tempo, leva a um processamento pesado e, finalmente, diminuir a velocidade.

Use apenas um único iframe. Quando o mouse aponta para um novo tópico, você só precisa modificar o atributo SRC do elemento iframe. Dessa forma, apenas um documento de visualização permanecerá na memória a qualquer momento.

Quando você navega na página on -line todos os dias, você definitivamente verá muitos efeitos de animação. Por exemplo, um pequeno coelho fofo está caminhando de um lado para o outro na página ... A tecnologia principal para alcançar esse efeito é o posicionamento do CCS. Geralmente, usamos element.style.left e element.style.top para alcançar o objetivo do posicionamento gráfico. No entanto, fazer isso cria alguns problemas: a propriedade esquerda retorna uma string e contém a unidade de medição (como 100px). Portanto, para definir uma nova coordenada de posição, você deve primeiro processar o valor de retorno da string antes de poder atribuir o valor, como segue:

Dimstringleft, Intleft

stringleft = element.style.left

intleft = parseint (stringleft)

Intleft = Intleft 10

element.style.left = intleft;

Você definitivamente sentirá que precisa escrever um código tão complexo para fazer uma coisinha. Existe uma maneira mais concisa? Veja estas 4 propriedades: Posleft, Postop, Poswidth e Posheight, que correspondem ao número de pontos do valor de retorno da string correspondente. OK, use essas propriedades para reescrever o código para implementar as funções implementadas pelo código acima:

element.style.posleft = 10

O código é mais curto, mas mais rápido!

Quando se trata de efeitos de animação, é claro, o uso de temporizadores é inseparável. O método usual é usar o Window.SetTimeout para localizar continuamente elementos na página. No entanto, se houver várias animações na página a ser exibida, você precisa definir vários temporizadores? A resposta é não! O motivo é simples: a função do timer consumirá muitos recursos valiosos do sistema. Mas ainda podemos controlar várias animações na página, e o truque é usar um loop. No loop, controle a posição da animação correspondente de acordo com diferentes valores variáveis, apenas uma chamada de função de janela.setTimeout () é usada em todo o loop.

Deixe a imagem aparecer e parecer ocasionalmente criar efeitos interessantes. Existem duas maneiras de conseguir isso: use o atributo de visibilidade ou o atributo de exibição do CSS. Para elementos de posição absoluta, diplay e visibilidade têm o mesmo efeito. A diferença entre os dois é que o elemento definido para exibir: nenhum não ocupará mais o espaço do fluxo de documentos, enquanto o elemento definido como visibilidade: Hidden ainda permanecerá em sua posição original.

Mas se você quiser lidar com elementos em posição absoluta, o uso da visibilidade será mais rápido.

Uma dica importante para escrever uma página da Web DHTML é: Iniciar pequeno. Ao escrever uma página DHTML pela primeira vez, certifique -se de não tentar usar todos os recursos DHTML que você conhece na página. Apenas um novo recurso pode ser usado por vez e as alterações resultantes podem ser cuidadosamente observadas. Se você achar que o desempenho diminuiu, poderá descobrir rapidamente o porquê.

A adiar é um herói desconhecido entre as poderosas funções dos programas de script. Você pode nunca ter usado, mas depois de ler a introdução aqui, acredito que você não pode viver sem ele. Ele diz ao navegador que o segmento de script contém código que não precisa ser executado imediatamente e, em conjunto com o atributo SRC, também pode permitir que esses scripts sejam baixados em segundo plano, e o conteúdo do primeiro plano é exibido ao usuário normalmente.

1. Não ligue para o comando document.write no bloco de script do tipo difer, porque o documento.write produzirá um efeito de saída direto.

2. Além disso, não inclua variáveis ​​ou funções globais a serem usadas para executar o script imediatamente no bloco de script de adiamento.

Todos sabemos que os servidores Unix são sensíveis ao minúsculo, mas você sabia que os buffers do Internet Explorer também tratam as seqüências de casos de maneira diferente. Portanto, como desenvolvedor da Web, você deve lembrar de manter a consistência do caso das seqüências de URL do mesmo link em locais diferentes. Caso contrário, os backups de arquivos diferentes no mesmo local serão armazenados no buffer do navegador, o que também aumentará o número de solicitações para baixar o conteúdo no mesmo local. Tudo isso, sem dúvida, reduz a eficiência de acesso à Web. Então, lembre -se: URLs no mesmo local, mantenha a consistência do caso das seqüências de url em diferentes páginas.

Ao escrever ou visualizar o código HTML de outras pessoas por nós mesmos, devemos ter encontrado situações em que as marcas não têm fim. por exemplo:

<p> Exemplo com cabeça e sem marcas de traseira

<ul>

<li> O primeiro

<li> O segundo

<li> O terceiro

</ul>

Obviamente, existem três tags finais </li> ausentes no código acima. Mas isso não impede que seja executado corretamente. No HTML, existem algumas tags, como quadro, IMG e P.

Mas, por favor, não seja preguiçoso. Por favor, escreva a marca final intacta. Isso não apenas produz o padrão de formato de código HTML, mas também acelera a velocidade de exibição da página. Porque o Internet Explorer não gastará tempo julgando e calculando onde o parágrafo ou o item da lista termina.

<p> Exemplo com marcas de cabeça e cauda </p>

<ul>

<li> Primeiro </li>

<li> Segundo </li>

<li> Terceiro </li>

</ul>

OK, o acima lista 10 técnicas de processamento para acelerar as páginas HTML. É simples descrevê -los, mas apenas entendendo e domina a essência e aprendendo com um exemplo ou de outro, você pode escrever programas mais rápidos e melhores.