Hoje, compartilho principalmente algumas soluções práticas para otimização de desempenho. Durante o estágio na empresa, há alguns meses, resumi alguns projetos reais por meio de revisão. Isto é para calçados infantis que acabaram de encontrar problemas de desempenho inicial. Espero fornecer a vocês Algumas orientações básicas.
Falando sobre o tópico de otimização de desempenho, é muito grande, não só a otimização de desempenho do front-end, mas também a otimização de desempenho de todo o link. Coordenação de front-end, back-end, servidor, rede e demais módulos.
Estou trabalhando na otimização de desempenho. Alguns dos pontos sobre a otimização de desempenho são que o autor de "Otimização de desempenho de front-end", palavras revisadas de Ali, me deu algumas dicas, além do aplicativo e feedback em combate real, o que me fez sentir algo. , Escreva o valor dele.
O escopo de otimização de desempenho compartilhado hoje também é baseado em alguns dos negócios e pilhas de tecnologia usadas por minha empresa anterior. Existem cenários de otimização específicos, e é mais interessante quando falamos sobre otimização de desempenho.
Enfrentando pilhas e cenários de tecnologia
Se não for para empresas que têm requisitos de pilha de tecnologia particularmente rígidos, essas pilhas de tecnologia são indispensáveis para o desenvolvimento de front-end. HTML5 + CSS3 + jQuery, algumas empresas ainda estão usando JSP, .Net para desenvolver, para essa tecnologia tradicional, precisamos usar alguns meios especiais de otimização.
Livrando-se de frameworks como o Vue, que está abandonando a manipulação tradicional do DOM e se concentrando apenas na otimização de desempenho tradicional, como começamos?
PS: Este artigo não fala muito sobre a otimização do desempenho da estrutura, apenas começando pelos pontos de otimização de desempenho tradicionais.
Comece com problemas de posicionamento
Certa vez, ocorreu um problema com um projeto online. Demorou muito para que uma determinada parte da página fosse renderizada. O que deu errado?
O problema de posicionamento, o que causou o carregamento lento de parte do conteúdo da página? É o processo de aquisição de dados, o processo de carregamento de JS da página ou outros processos de renderização e desenho?
Localize o problema por meio do Desempenho do artefato comumente conhecido como console do navegador.
Aqui, tomo um determinado site como um objeto de projeto, como uma demonstração.
Essa parte demora muito. Através deste diagrama, você pode analisar qual link tem mais tempo de renderização.
Depois de localizar o problema, comece a otimizar. Mas a premissa da otimização é especificar o conteúdo básico da otimização, caso contrário, não sabemos por onde começar a otimização.
O tempo de solicitação de dados é muito longo
Às vezes, quando estamos trabalhando em um projeto, a quantidade de dados é muito grande e o processo de obtenção dos dados do servidor demora muito. Para encurtar esse tempo, precisamos reduzir o número de solicitações e o tempo de uma única solicitação.
Para reduzir o número de solicitações, podemos obter os dados o máximo possível, em vez de dividi-los em várias solicitações. Se houver muitas solicitações, isso causará o bloqueio de thread.
Podemos fazer otimizações adequadas em combinação com negócios específicos e mesclar alguns dos dados retornados, de modo a reduzir o número de solicitações.
No entanto, o tempo necessário para uma única solicitação é muito longo e demorado. Quando transmitimos uma grande quantidade de dados, só podemos compactar os dados para que a solicitação única se torne mais rápida.
Existem outras soluções, como o carregamento lento, em que a página apresenta ao usuário parte do conteúdo, em vez de solicitar todo o conteúdo de volta de uma só vez. Em outro exemplo, o áudio usa um arquivo de streaming em vez de solicitar que todo o áudio seja reproduzido para o usuário, mas na forma de streaming, reprodução e solicitação ao mesmo tempo.
Evite redesenhar e refluir
Além disso, o mais importante é a otimização da página. Reveja primeiro o princípio de funcionamento do navegador.
Animação: como funciona um navegador?
Um dos links é o link de renderização, que renderiza a árvore de renderização sintetizada por meio das posições e estilos de pixel calculados para a página e, finalmente, apresenta ao usuário.
Embora a página que vemos no navegador não pareça, mas este processo é muito demorado, especialmente quando alteramos ligeiramente a posição, tamanho ou estilo de um elemento na página, isso fará com que a página inteira seja novamente renderizada.
Se houver muito conteúdo a ser renderizado na página, cada vez que o usuário mudar de lugar, isso causará toda a renderização, o desempenho é muito demorado e, finalmente, leva a uma experiência do usuário ruim e situações sérias fazem com que a página pare de responder.
É mencionado em muitos artigos que vimos que devemos tentar evitar a manipulação frequente do DOM, para evitar o refluxo e redesenho da página.
Descobrimos quais melhorias Vue fez. Como operar o DOM leva a um desempenho ruim, não irei operar o DOM, então Vue abandonou a operação tradicional do DOM e abriu o modo de visualização influenciado por dados. (PS: Na análise posterior do artigo de código-fonte do Vue, irei principalmente compartilhar esta parte de como ele é implementado engenhosamente e, em seguida, levarei todos a escreverem uma versão simples do Vue por si próprios)
Porém, muito desamparadas, algumas empresas não usam o Vue, existem muitas empresas desse tipo, e os líderes disseram que simplesmente não querem usá-lo. Só quero usar HTML5 + CSS3 + jQuery tradicional, então o que devemos fazer para otimizar?
Eu pessoalmente fiz alguns resumos de otimização de desempenho com base nisso. Como o Vue não é permitido, a cena específica decidida ainda envolve a operação do DOM. Embora eu não possa desistir do DOM tradicional, então tento reduzir a operação do DOM o máximo possível. Sim, pensando nesta direção, podemos resumir o seguinte Alguns pontos do conteúdo, o pequeno livro é focado.
1 、
Operações separadas de leitura e gravação
Nossas alterações frequentes na posição e no tamanho do estilo da página causarão o refluxo e o redesenho da página. Os navegadores contemporâneos fizeram uma pequena otimização para isso. Se a linha de código atual alterar o tamanho ou a posição do elemento, isso não causará imediatamente uma nova renderização da página e Determine se a próxima linha também altera o tamanho e o estilo do elemento.
div.style.background = '#fff'
div.style.color = 'red'
Nesse caso, esses códigos consecutivos serão contados em uma fila de renderização até que a próxima linha de código não seja o código que altera o estilo e, em seguida, a renderização da página é executada de maneira uniforme, o que reduz muito o refluxo e o redesenho da página.
De acordo com o mecanismo da fila de renderização do navegador, quando escrevemos código, separamos as operações de atributo de leitura e gravação, como a seguir.
var curLeft = div.offsetLeft;
var curTop = div.offsetTop ;
div.style.left = curLeft + 1 + 'px'
div.style.top = curTop + 1 + 'px'
Se você não separar as operações de leitura e gravação, mas misturar as operações de leitura e gravação para gravar, isso causará refluxo e redesenho contínuos.
2 、
Mudanças de estilo centralizado
Da mesma forma, quando usamos JS para alterar estilos em lotes, devemos alterar os estilos coletivamente.
box.style.cssText = 'width:200px;height:200px'；
box.className = 'aa'
3 、
Informações de layout de cache
Normalmente, passamos o tamanho do layout dinâmico JS, o que normalmente fazemos.
// 以下会引发两次回流
div.style.left = div.offsetLeft + 1 + 'px'
div.style.top= div.offsetTop + 1 + 'px'
Mas de acordo com o que resumimos acima, isso não é bom porque causará vários redesenhos.
Se fizermos isso, primeiro armazene em cache as informações de layout obtidas por meio de variáveis e, em seguida, altere o estilo uniformemente.
// 修改为：只会触发一次回流
var curLeft = div.offsetLeft;
var curTop = div.offsetTop ;
div.style.left = curLeft + 1 + 'px'
div.style.top = curTop + 1 + 'px'4 、
Modificação em lote de elementos
Se alterarmos os elementos em lotes, podemos retirá-los e alterá-los separadamente e, em seguida, colocá-los de volta na página, de modo que, não importa quantas vezes você altere, apenas um refluxo seja acionado.
// 文档碎片
let frg = document.createDocumentFragment();
for(let i = 0;i < 5;i++){
let newLi = document.createElement('li');
newLi.innerHTML = i;
frg.appendChild(newLi);
}Além disso, também podemos usar a emenda da janela de caracteres.
// 字符串拼接
for（let i= 0；i< 5;i++）{
str += `<li>${i}</li>`
}
box.innerHTML = str
5 、
Otimização de animação
Às vezes, queremos usar animação, o que frequentemente altera o estado dos elementos, causando refluxo e redesenho constantes.
Portanto, para melhorar o desempenho, aplicamos efeitos de animação aos atributos de posição absoluta ou fixa (fora do fluxo do documento).
Embora esteja em um novo plano, também causará refluxo, mas não afetará outros elementos, por isso tem uma aparência melhor.
6 、
Ativar aceleração de hardware CSS (aceleração GPU)
CSS3 pode usar transform para alterar o estilo e usar outros elementos localmente, porque transform permite a aceleração de hardware e evita [reflow] e [redesenho].
box.style.transform = 'translateX(200px)'
Outros atributos de aceleração de hardware: transform \ opacity \ filters. Portanto, você pode usar esses atributos tanto quanto possível para usar esses atributos para alterar o elemento.
7 、
Sacrificando a velocidade suave pela velocidade
Cada vez que a animação se move um pixel, o uso da CPU é de 100%, e a animação parece um pouco irregular porque o navegador está lutando contra o refluxo.
Se você mover 3 pixels por vez, a suavidade pode parecer reduzida, mas não fará com que a CPU fique instável em máquinas mais lentas.
resumo
O texto acima é um resumo de várias soluções de otimização para os problemas de desempenho de algumas páginas da web tradicionais. Mas esses pontos por si só não são suficientes.
Conforme mencionado no início, a otimização do desempenho não é apenas uma questão de engenheiros front-end ou back-end, mas também a otimização do desempenho de todo o link.
Seja a otimização de desempenho ou outros aspectos, como algoritmos e redes, deve formar uma espécie de sistema de conhecimento ideológico próprio. Ao encontrar e resolver problemas constantemente e, em seguida, melhorar constantemente esse sistema, essa é uma pequena meta que queremos perseguir.