Página Inicial>Tutorial de web design>Tutorial HTML

Uma breve discussão sobre as regras básicas de otimização de desempenho de páginas da web

Autor：Eve Cole Data da Última Atualização：2025-03-12 06:32:01

Algumas regras de otimização para páginas da web do navegador

Otimização de página

Compressão de recursos estáticos

Use ferramentas de construção (webpack, gulp) para compactar adequadamente recursos estáticos de páginas da web, como imagens, scripts e estilos.

Imagens sprite CSS, imagens embutidas base64

Mesclar os pequenos ícones do site em uma imagem, usar CSS para posicionar e interceptar os ícones correspondentes, usar imagens embutidas de forma adequada;

Estilos na parte superior e scripts na parte inferior

A página é um processo de renderização passo a passo. Colar o estilo no topo pode apresentar a página ao usuário mais rapidamente. Colar a tag <script> no topo bloqueará o download dos recursos por trás da página.

Use css e js de links externos

Várias páginas fazem referência a recursos estáticos públicos e a reutilização de recursos reduz solicitações http adicionais.

Evite imagens com src vazio

Evite solicitações http desnecessárias. 

 <!-- Imagens com src vazio ainda iniciarão solicitações http--><img src= style="margin: 0px; padding: 0px; outline: none; line-height: 25,2px; font-size: 14px; width: 660px; overflow: oculto; claro: ambos; família de fontes: tahoma, arial, Microsoft YaHei;"> 
 <!-- O tamanho real da imagem é 600x300, que é dimensionado para 200x100 em html --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px; contorno: nenhum; altura da linha: 25,2px; tamanho da fonte: 14px largura: 660px; oculto; claro: ambos; família de fontes: tahoma, arial, Microsoft YaHei;"> 
 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Documento</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <link ref=stylesheet href=style.css></head><body> <script src=main.js></script></body></html>
 No exemplo, os arquivos css e js são pré-carregados e serão chamados imediatamente assim que forem usados ​​nas renderizações de página subsequentes.
 Você pode especificar o tipo de como para carregar diferentes tipos de recursos. 
  1.  estilo
  2.  roteiro
  3.  vídeo
  4.  áudio
  5.  imagem
  6.  fonte
  7.  documento
  8.  ...
 Este método também pode pré-carregar recursos entre domínios definindo o atributo crossorigin. 
 <link rel=preload href=fonts/cicle_fina-webfont.woff2 as=font type=font/woff2 crossorigin=anonymous>
 CSS
 seletor
 A prioridade dos seletores de alta para baixa é: 
  1.  Seletor de ID
  2.  seletor de classe
  3.  seletor de tags
  4.  seletor adjacente 
 h1 + p{ margem superior: 15px };
 Seleciona o parágrafo que aparece imediatamente após o elemento h1. Os elementos h1 e p têm um elemento pai comum.
 seletor filho 
 h1 > forte {cor:vermelho;}
 seletor descendente 
 h1 em {cor:vermelho;}
 seletor curinga
 seletor de atributos 
 *[title] {color:red;}img[alt] {borda: 5px vermelho sólido;}
 Seletor de pseudoclasse
 Experiência de uso do seletor: 
  1.  Priorize seletores de classe, que podem substituir seletores de rótulos multicamadas;
  2.  Use o seletor de ID com cuidado. Embora seja eficiente, ele é único na página e não favorece a colaboração e manutenção da equipe;
  3.  Faça uso razoável da herança do seletor;
  4.  Evite expressões CSS.
 Reduza o nível dos seletores
 Com base na prioridade do seletor anterior, você deve tentar evitar vários níveis de aninhamento do seletor, de preferência não mais que 3 níveis. 
 .container .text .logo{ cor: vermelho }/*Mudar para*/.container .text-logo{ cor: vermelho };
 Simplifique os arquivos de estilo de página e remova estilos não utilizados
 O navegador executará correspondência de estilo redundante, o que afetará o tempo de renderização. Além disso, arquivos de estilo excessivamente grandes também afetarão a velocidade de carregamento.
 Use herança CSS para reduzir o tamanho do código
 Usando as propriedades herdáveis ​​do CSS, o elemento pai define o estilo e os elementos filhos não precisam defini-lo novamente.
 Atributos herdáveis ​​comuns incluem: cor, tamanho da fonte, família da fonte, etc.; atributos não herdáveis ​​incluem: posição, exibição, flutuação, etc.;
 Quando o valor do atributo é 0, nenhuma unidade é adicionada.
 Quando o valor do atributo css é 0, nenhuma unidade pode ser adicionada para reduzir a quantidade de código. 
 .text{ largura: 0px; altura: 0px }/*Alterar para*/.text{ largura: 0;
 JavaScript
 Usar delegação de eventos
 Use a delegação de eventos para vincular eventos a vários elementos DOM semelhantes. 
 <ul id=container> <li class=list>1</li> <li class=list>2</li> <li class=list>3</li></ul> 
 // Maneira irracional: vincular o evento click a cada elemento $('#container .list').on('click', function() { var text = $(this).text(); console. log(text); });//Método de delegação de eventos: Use o mecanismo de bolha de eventos para delegar eventos ao elemento pai $('#container').on('click', '.list', function() { var text = $(this ).texto(); console.log(texto});
 Deve-se notar que, embora o evento possa ser delegado ao documento ao usar a delegação de eventos, isso não é razoável. Uma é que causa facilmente erros de julgamento do evento e a outra é que a eficiência da pesquisa da cadeia de escopo é baixa. O elemento pai mais próximo deve ser selecionado como delegado.
 Além de melhor desempenho, o uso da delegação de eventos também elimina a necessidade de vincular eventos a elementos DOM criados dinamicamente.
 DOMContentLoaded
 Você pode começar a processar a árvore DOM depois que os elementos DOM forem carregados (DOMContentLoaded), em vez de esperar até que todos os recursos de imagem sejam baixados. 
 // javascript nativo document.addEventListener(DOMContentLoaded, function(event) { console.log(DOM totalmente carregado e analisado);}, false);// jquery$(document).ready(function() { console.log(ready ! );});// Versão simplificada de $(document).ready()$(function() { console.log(ready!);});
 Pré-carregamento e carregamento lento
 pré-carregamento
 Use o tempo ocioso do navegador para pré-carregar recursos que poderão ser usados ​​no futuro, como imagens, estilos e scripts.
 Pré-carregamento incondicional
 Uma vez acionado o onload, os recursos que serão necessários no futuro são obtidos imediatamente.
 Os recursos de imagem são pré-carregados. (3 maneiras de implementar o pré-carregamento de imagens).
 Pré-carregamento com base no comportamento do usuário
 Julgue as possíveis operações de comportamento do usuário e pré-carregue recursos que podem ser necessários no futuro. 
  1.  Quando o usuário digita na caixa de entrada da pesquisa, os recursos que podem ser usados ​​na página de resultados da pesquisa são pré-carregados;
  2.  Quando o usuário opera uma Aba, uma delas será exibida por padrão. Ao clicar em outras opções, os recursos que serão utilizados futuramente poderão ser carregados primeiro quando o mouse passar;
 Carregamento lento
 Exceto o conteúdo ou componentes necessários para a inicialização da página, todo o resto pode ser carregado lentamente, como bibliotecas js que cortam imagens, imagens que não estão na faixa visível, etc.
 As imagens são carregadas lentamente. (Determine se a imagem está dentro da área visível; em caso afirmativo, atribua o caminho real à imagem)
 Evite pesquisa global
 Qualquer variável não local usada mais de uma vez em uma função deve ser armazenada como uma variável local. 
 função updateUI(){ var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = document.title + imagem + i; } var msg = document.getElementById(msg);
 A variável global do documento é usada muitas vezes na função acima, especialmente no loop for. Portanto, é uma solução melhor armazenar variáveis ​​globais de documentos como variáveis ​​locais e depois usá-las. 
 função updateUI(){ var doc = documento; var imgs = doc.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title + imagem + i; } var msg = doc.getElementById(msg);
 Uma coisa que vale a pena notar é que no código JavaScript, qualquer variável não declarada usando var se tornará uma variável global e o uso indevido causará problemas de desempenho.
 Evite consultas desnecessárias de atributos
 Usar variáveis ​​e arrays é mais eficiente do que acessar propriedades em um objeto porque o objeto deve procurar na cadeia de protótipos uma propriedade com esse nome. 
 //Usar array var valores = [5, 10];var soma = valores[0] + valores[1];alert(soma);//Usar objeto var valores = { primeiro: 5, segundo: 10 };var soma = valores.primeiro + valores.segundo;alert(soma);
 No código acima, as propriedades do objeto são usadas para calcular. Pesquisar propriedades uma ou duas vezes não causará problemas de desempenho, mas se forem necessárias várias pesquisas, como em um loop, o desempenho será afetado.
 Ao procurar vários atributos para obter um único valor, como: 
 var consulta = window.location.href.substring(window.location.href.indexOf(?));
 Pesquisas desnecessárias de atributos devem ser reduzidas e window.location.href deve ser armazenado em cache como uma variável. 
 var url = window.location.href;var consulta = url.substring(url.indexOf(?));
 limitação de função
 Suponha que haja uma caixa de pesquisa, vincule o evento onkeyup à caixa de pesquisa, para que uma solicitação seja enviada sempre que o mouse for levantado. O uso de funções de limitação pode garantir que múltiplas operações consecutivas do usuário dentro de um tempo especificado de entrada acionem apenas uma solicitação. 
 <tipo de entrada=texto id=valor de entrada= /> 
 // Evento de vinculação document.getElementById('input').addEventListener('keyup', function() {throttle(search);}, false);// Função lógica function search() { console.log('search. . .');}// Função de aceleração function acelerador(método, contexto) { clearTimeout(método.tId); }, 300);}
 Os cenários de aplicação da função de otimização não estão limitados à caixa de pesquisa. Por exemplo, rolagem da página, redimensionamento da janela esticada, etc., a função de otimização deve ser usada para melhorar o desempenho.
 Minimize o número de declarações
 O número de instruções também é um fator que afeta a velocidade de execução da operação.
 Combine múltiplas declarações de variáveis ​​em uma declaração de variáveis 
 // Use várias declarações var var count = 5; var color = blue var values ​​​​= [1,2,3]; , valores = [1,2,3], agora = nova data();
 Uma versão melhorada é usar apenas uma declaração var, separada por vírgulas. Quando há muitas variáveis, usar apenas uma declaração var é muito mais rápido do que declarar vars individuais separadamente.
 Usando arrays e objetos literais
 Use literais de array e objeto em vez de atribuição instrução por instrução. 
 var valores = new Array();valores[0] = 123;valores[1] = 456;valores[2] = 789;//Após melhoria, var valores = [123, 456, 789]; 
 var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){ alert(this.name);};//Após melhoria var person = { name : Jack, age : 28, sayName : function(){ alert(este.nome }});
 Otimização de strings
 Concatenação de strings
 Os primeiros navegadores não otimizaram a forma de concatenar strings com o sinal de mais. Como as strings são imutáveis, isso significa que strings intermediárias são usadas para armazenar resultados, portanto, a criação e destruição frequente de strings é a razão de sua ineficiência. 
 var text = Olá;text+= ;text+= Mundo!;
 Adicione a string ao array e, em seguida, chame o método join do array para convertê-la em uma string, evitando assim o uso do operador de adição. 
 var arr = [], i = 0;arr[i++] = Olá;arr[i++] = ;arr[i++] = Mundo!;var text = arr.join('');
 Os navegadores modernos otimizaram a concatenação de strings mais sinais, portanto, na maioria dos casos, o operador de adição ainda é a primeira escolha.
 Reduza refluxos e redesenhos
 No processo de renderização do navegador, estão envolvidos o refluxo e o redesenho, que é um processo que consome desempenho. Você deve prestar atenção à redução das ações que acionam o refluxo e o redesenho durante as operações do script. 
  1.  Refluxo: As propriedades geométricas do elemento foram alteradas e a árvore de renderização precisa ser reconstruída. O processo de alteração da árvore de renderização é chamado de refluxo;
  2.  Redesenhar: O tamanho geométrico do elemento não mudou, mas o estilo CSS (cor de fundo ou cor) de um elemento mudou.
 Quais operações acionam refluxo ou redesenho? 
  1.  Redimensionar janela
  2.  Modificar fonte
  3.  Adicionar ou remover folhas de estilo
  4.  Alterações de conteúdo, como o usuário inserindo texto na caixa <input/>
  5.  Manipular atributos de classe
  6.  Scripts para manipular DOM (adicionar, excluir ou modificar elementos DOM)
  7.  Calcular propriedades offsetWidth e offsetHeight
  8.  Defina o valor do atributo de estilo
 Como reduzir o refluxo e redesenhar e melhorar o desempenho da página da web?
 1. Manipulação de script de elementos DOM 
  1.  Defina o elemento DOM para display:none. Um refluxo será acionado durante o processo de configuração, mas você pode alterá-lo à vontade mais tarde e exibi-lo após a modificação;
  2.  Clone o elemento na memória antes de operá-lo e substitua o elemento novamente após a modificação.
 2. Modifique o estilo do elemento 
  1.  Tente fazer modificações em lote em vez de modificá-las uma por uma;
  2.  Defina o id e a classe com antecedência e, em seguida, defina o className do elemento.
 3. Ao adicionar animação a um elemento, defina o estilo CSS do elemento como position:fixed ou position:absolute. O elemento não causará refluxo após sair do fluxo do documento.
 4. Use a função de aceleração (já mencionada acima) ao ajustar o tamanho da janela, inserir na caixa de entrada, rolar a página, etc.
 HTTP
 cache do navegador
 Configurar corretamente o cache do navegador é um dos meios importantes de otimização de páginas da web.
 Expira e controle de cache
 Expires vem de HTTP1.0 e Cache-Control vem de HTTP1.1. Quando ambos são definidos ao mesmo tempo, Cache-Control substituirá Expires. 
  1.  Expires especifica a data de expiração real em vez do número de segundos. Mas o Expires tem alguns problemas, como o horário do servidor estar fora de sincronia ou impreciso. Portanto, é melhor expressar o tempo de expiração usando os segundos restantes em vez do tempo absoluto.
  2.  Cache-Control pode definir o valor máximo de idade em segundos e especificar o tempo de expiração do cache. Por exemplo: Cache-Control: max-age=3600.
 ETag e última modificação
 Tanto ETag quanto Last-Modified são retornados pelo servidor nos cabeçalhos de resposta. ETag tem prioridade mais alta que Last-Modified, o que significa que o servidor priorizará o valor de ETag. 
  1.  ETag é qualquer etiqueta anexada ao documento, que pode ser o número de série ou número de versão do documento, ou a verificação do conteúdo do documento, etc. Quando o documento muda, o valor da ETag também muda. Relacionado ao ETag está If-None-Match. Quando o navegador inicia uma solicitação, ele carrega o valor ETag no campo If-None-Match e o envia ao servidor;
  2.  Última modificação é a hora em que o documento foi modificado pela última vez no lado do servidor. Relacionado a Last-Modified está If-Modified-Since. Quando o navegador inicia uma solicitação, ele carregará o valor de Last-Modified no campo If-Modified-Since e o enviará ao servidor.
 Cache forte e cache negociado
 Os tipos de cache são cache forte e cache negociado. A diferença entre os dois é que o cache forte não enviará uma solicitação ao servidor, mas o cache negociado enviará uma solicitação. Se a correspondência for bem-sucedida, retornará 304 Não Modificado, se a correspondência não for bem-sucedida, retornará. 200; o navegador primeiro verificará o cache forte e, se o cache forte falhar, executará a verificação do cache de negociação.
 Como configurar o cache do navegador 
  1.  Adicione Expires e Cache-Control à resposta de retorno do servidor web;
  2.  Configure Expires e Cache-Control no arquivo de configuração nginx ou apache.
 Por que reduzir as solicitações HTTP
 Medidas para reduzir solicitações http respondem por grande parte na otimização de desempenho, como: usar imagens css sprite para substituir múltiplas solicitações de imagem, evitar imagens src vazias, usar imagens inline, usar link externo css e js, cache, etc.
 O processo desde a inserção do URL até a conclusão do carregamento da página inclui: 
  1.  Resolução DNS
  2.  Conexão TCP
  3.  Solicitação e resposta HTTP
  4.  Página de renderização do navegador
  5.  conexão próxima
 Uma solicitação http completa tem que passar por esses processos, o que consome tempo e recursos, por isso torna-se necessário reduzir o número de solicitações.
 Referências:
 "Guia avançado para construção de sites de alto desempenho versus construção de sites de alto desempenho"
 "Práticas recomendadas para acelerar seu site"
 O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.
Artigos Relacionados