[vue] Sobre a otimização de desempenho

Prefácio

A parte de otimização de desempenho examina principalmente a compreensão do programador sobre a otimização de desempenho de sites.
Como fazer um bom trabalho de otimização de desempenho, quais operações causarão problemas de otimização de desempenho, quais são os indicadores de otimização de desempenho, etc., todos merecem a atenção do programador

1. Compreensão da reconstrução

Refatoração de site refere-se ao comportamento de simplificar a estrutura, adicionar legibilidade e manter a consistência no front-end do site sem alterar o comportamento externo. Em outras palavras, sem alterar a IU, otimize o site para manter uma IU consistente durante a expansão.

Para sites tradicionais, a refatoração geralmente inclui os seguintes aspectos:

• Altere o layout da tabela para DIV + CSS.
• Torne o front-end do site compatível com navegadores modernos.
• Otimize a plataforma móvel.
• Otimize para mecanismos de pesquisa.

A refatoração aprofundada de sites deve considerar os seguintes aspectos:

• Reduza o acoplamento entre os códigos
• Mantenha o código flexível.
• Escreva o código em estrita conformidade com as especificações.
• Projete uma API extensível.
• Substitua a antiga estrutura e linguagem (como VB)
• Aprimore a experiência do usuário.
• Otimize para velocidade.
• Compacte recursos de front-end, como JavaScript, CSS e imagens (geralmente resolvidos pelo servidor).
• Otimize o desempenho do programa (como leitura e gravação de dados).
• Use o CDN para acelerar o carregamento de recursos.
• Otimize JavaScript DOM.
• Arquivos de cache do servidor HTTP.

2. Se houver um grande número de imagens em uma página (grande site de comércio eletrônico) e a página carregar muito lentamente, quais métodos podem ser usados ​​para otimizar o carregamento dessas imagens para melhorar a experiência do usuário?

• Para carregamento lento de imagens, você pode adicionar um evento de barra de rolagem à página para determinar se a imagem está na área visível ou prestes a entrar na área visível e carregar primeiro.

• Se for uma apresentação de slides, arquivo de álbum, etc., a tecnologia de pré-carregamento de imagem pode ser usada e a imagem anterior e a próxima imagem exibida no momento são baixadas primeiro.

• Se a imagem for CSS, você pode usar CSS Sprite, SVG sprite, fonte Icon, Base64 e outras tecnologias.

• Se a imagem for muito grande, você pode usar uma imagem especialmente codificada. Ao carregar, uma miniatura muito pequena será carregada primeiro para melhorar a experiência do usuário. Por exemplo, usando a imagem no formato webp do Google, o tamanho da imagem no formato WebP é 40% menor do que a imagem no formato JPEG com a mesma qualidade.

• Se a área de exibição da imagem for menor do que o tamanho real da imagem, a imagem deve ser compactada no lado do servidor de acordo com as necessidades do negócio.Após a compactação da imagem, o tamanho da imagem será o mesmo da imagem exibida.

3. Problemas de otimização de desempenho.

O desempenho pode ser otimizado nos seguintes níveis:

• Utilização do cache: cache Ajax, usar CDN , JavaScript externo e cache de arquivo CSS, adicionar cabeçalho Expires , configurar Etag no lado do servidor , reduzir pesquisas de DNS, etc.
• Número de solicitações: Combine estilos e scripts, use sprites de imagem CSS, carregue recursos de imagem fora da primeira tela sob demanda e retarde o carregamento de recursos estáticos.
• Solicitar largura de banda: Compactar arquivos, abrir GZIP.
• Código CSS: evite usar expressões CSS, seletores avançados e seletores curinga.
• Código JavaScript: use tabelas hash para otimizar a pesquisa, use menos variáveis ​​globais, use innerHTML em vez de operações DOM, reduza o número de operações DOM, otimize o desempenho do JavaScript, use setTimeout para evitar a perda de resposta da página, armazene em cache os resultados da pesquisa de nó DOM, evite usar com (com criará seu próprio escopo, aumente o comprimento da cadeia de escopo), mescle várias declarações de variáveis.
• Código HTML: evite atributos src vazios, como imagens e iFrames. Se o atributo src estiver vazio, a página atual será recarregada, o que afetará a velocidade e a eficiência. Tente evitar escrever o atributo Style na tag HTML

4. Como otimizar o desempenho do terminal móvel?

• Tente usar animações CSS3 e ative a aceleração de hardware.
• Use eventos de toque em vez de eventos de clique, conforme apropriado.
• Evite usar efeitos de sombra gradiente CSS3.
• Você pode usar transform: translateZ (0) para ativar a aceleração de hardware.
• Não abuse de Float. Float tem uma quantidade relativamente grande de cálculo ao renderizar, então use-o o mínimo possível.
• Não abuse das fontes da Web. As fontes da Web precisam ser baixadas, analisadas e redesenhadas na página atual, portanto, use-as o menos possível.
• Use razoavelmente a animação requestAnimation Frame em vez de setTimeout.
• Use corretamente as propriedades CSS (transições CSS3, transformações CSS3 3D, Opacidade, Canvas, WebGL , Vídeo) para acionar a renderização da GPU. O uso excessivo aumentará o consumo de energia do telefone.

5. Como otimizar os arquivos do site?

Os arquivos podem ser mesclados e compactados para minimizar os arquivos; o CDN pode ser usado para hospedar arquivos, permitindo que os usuários tenham acesso mais rápido; vários nomes de domínio podem ser usados ​​para armazenar arquivos estáticos em cache.

Seis, várias maneiras de reduzir o tempo de carregamento da página.

O método específico é o seguinte.

(1) Otimize as fotos

(2) Escolha o formato de armazenamento de imagem (por exemplo, GIF fornece menos cores, o que pode ser usado em alguns lugares onde os requisitos de cor não são altos)

(3) Otimizar CSS (compactar e mesclar CSS)

(4) Adicionar uma barra após o URL

(5) Marque a altura e largura da imagem (se o navegador não encontrar esses dois parâmetros, ele precisa calcular o tamanho durante o download da imagem. Se houver muitas imagens, o navegador precisa ajustar constantemente a página. Isso não afeta apenas a velocidade, mas também afeta a experiência de navegação Quando o navegador conhece os parâmetros de altura e largura, mesmo que a imagem não possa ser exibida temporariamente, o espaço para a imagem será desocupado na página e, em seguida, continue a carregar o conteúdo subsequente , otimizando assim o tempo de carregamento e melhorando a experiência de navegação).

Sete, melhore o desempenho de front-end do site

O mapa sprite mescla para reduzir solicitações HTTP; comprimir arquivos HTML, CSS e JavaScript; usar CDN para hospedar arquivos estáticos; usar cache de armazenamento local e cache de aplicativo mainfest.

8. Métodos para otimizar o desempenho

(1) Reduzir o número de solicitações HTTP, controlar o tamanho do CSS Sprite, JavaScript e código-fonte CSS e imagens e usar a página da web Gzip, hospedagem CDN, armazenamento em cache de dados e servidor de imagens

(2) Por meio do template de front-end JavaScript e dados, reduza o desperdício de largura de banda causado por tags HTML, salve os resultados da solicitação Ajax com variáveis ​​no front-end, e cada vez que as variáveis ​​locais são manipuladas, nenhuma solicitação é necessária, reduzindo o número de solicitações.

(3) Use innerHTML em vez de operações DOM para reduzir o número de operações DOM e otimizar o desempenho do JavaScript.

(4) Quando houver muitos estilos que precisam ser definidos, defina o className em vez de operar diretamente o estilo.

(5) Use menos variáveis ​​globais, armazene em cache os resultados da pesquisa de nó DOM e reduza as operações de leitura de I / O

(6) Evite usar expressões CSS, que também são chamadas de propriedades dinâmicas,

(7) Pré-carregue a imagem, coloque a folha de estilo no topo, coloque o script na parte inferior e adicione um carimbo de data / hora.

(8) Evite usar tabelas no layout principal da página, pois as tabelas não serão exibidas até que o conteúdo seja completamente baixado, pois a velocidade de exibição é mais lenta que o layout DIV + CSS.

Nove, liste alguns métodos de otimização de desempenho da Web

(1) Compactar o código-fonte e as imagens (JavaScript usa compactação ofuscada, CSS executa compactação comum, imagens JPG são compactadas em 50% ~ 70% de acordo com a qualidade específica e imagens PNG são compactadas de 24 cores a 8 cores para remover alguns PNG informações de formato, etc.).

(2) Escolha o formato de imagem apropriado (o número de cores é principalmente no formato JPG, mas raramente no formato PNG. Se o servidor puder julgar que o navegador suporta WebP, use o formato WebP ou SVG).

(3) Consolidar recursos estáticos (reduzir solicitações HTTP)

(4) Combine vários CSSs em um CSS e combine imagens em imagens Sprite.

(5) Ative a compactação Gzip no lado do servidor (muito eficaz para recursos de texto).

(6) Use CDN (cache compartilhado para bibliotecas públicas).

(7) Estenda o tempo de cache de recurso estático.

(8) Coloque CSS no cabeçalho da página e coloque o código JavaScript na parte inferior da página (para evitar bloquear a renderização da página e fazer com que a página apareça em branco por um longo tempo)

10. Para CSS, como otimizar o desempenho?

(1) Use o atributo display corretamente, o atributo display afetará a renderização da página, então preste atenção aos seguintes aspectos.

	display:inline后不应该再使用 width、 height、 margin、 padding和float 。
	display:inline- block后不应该再使用 float。
	display:block后不应该再使用 vertical-align。 
	display:table后不应该再使用 margin或者float。

(2) Não abuse do flutuador.

(3) Não declare muito tamanho de fonte.

(4) Quando o valor é 0, nenhuma unidade é necessária.

(5) Padronize vários prefixos de navegador e preste atenção aos seguintes aspectos.

	浏览器无前缀应放在最后。
	CSS动画只用（ -webkit-无前缀）两种即可。
	其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）

(6) Evite fazer com que os seletores pareçam expressões regulares. Os seletores avançados não são fáceis de ler e demoram muito para serem executados.

(7) Tente usar seletores de id e classe para definir estilos (evite usar o atributo style para definir estilos embutidos)

(8) Tente usar animação CSS3.

(9) Reduza o redesenho e o refluxo.

11. Como otimizar o desempenho para HTML?

(1) Para carregamento de recursos, carregamento sob demanda e carregamento assíncrono

(2) O recurso carregado pela primeira vez não ultrapassa 1024 KB, ou seja, quanto menor melhor.

(3) Compactar arquivos HTML, CSS e JavaScript.

(4) Reduza os nós DOM.

(5) Evite o src vazio (o src vazio causará solicitações inválidas em alguns navegadores).

(6) Evite erros de solicitação 30 *, 40 *, 50 *

(7) Adicionar Favicon.ico. Se o ícone ico não estiver definido, o ícone padrão fará com que uma solicitação 404 ou 500 seja enviada.

12. Como otimizar o desempenho para JavaScript?

O método específico é o seguinte.

(1) Seleção e cálculo do cache DOM.

(2) Tente usar o modo de delegação de evento para evitar eventos de associação em lote.

(3) Use touchstart e touchend em vez de clique.

(4) Use razoavelmente a animação requestAnimationFrame em vez de setTimeOut.

(5) Use a animação da tela de maneira apropriada.

(6) Tente evitar a modificação da visualização em eventos de alta frequência (como TouchMove, eventos de rolagem), o que causará várias renderizações.

13. Como otimizar o lado do servidor?

O método específico é o seguinte.

(1) Ative a compactação Gzip.

(2) Estenda o tempo de cache do recurso, defina o tempo de expiração do recurso de forma razoável e defina o tempo de expiração de alguns recursos estáticos que não são atualizados por um longo tempo.

(3) Reduza o tamanho das informações do cabeçalho do cookie. Quanto maior a informação do cabeçalho, mais lenta é a velocidade de transmissão do recurso.

(4) Imagens ou arquivos CSS e JavaScript podem ser acelerados por CDN.

14. Como otimizar a interface do lado do servidor?

O método específico é o seguinte.

(1) Mesclagem de interface: Se uma página precisar solicitar mais de duas interfaces de dados, é recomendável mesclá-las em uma para reduzir o número de solicitações HTTP.

(2) Reduza a quantidade de dados: remova os dados desnecessários dos dados retornados pela interface.

(3) Dados em cache: após a primeira solicitação de carregamento, os dados são armazenados em cache; para solicitações não iniciais, os últimos dados solicitados são usados ​​primeiro, o que pode melhorar a velocidade de resposta das solicitações não iniciais.

15. Como otimizar a execução de scripts?

O tratamento incorreto do script bloqueará o carregamento e a renderização da página, portanto, tome cuidado ao usá-lo.

(1) Escreva CSS no cabeçalho da página e programas JavaScript no final da página ou em operações assíncronas.

(2) Evite o src vazio para imagens e iframes, etc. O src vazio recarregará a página atual, afetando a velocidade e a eficiência.

(3) Tente evitar redefinir o tamanho da imagem. Redefinir o tamanho da imagem refere-se a redefinir o tamanho da imagem várias vezes na página, arquivos CSS, JavaScript, etc. Redefinir o tamanho da imagem várias vezes causará vários redesenhos da imagem e afetará o desempenho

(4) Tente evitar o uso de DataURL para fotos. As imagens DataURL não usam o algoritmo de compressão de imagem, o arquivo ficará maior e deve ser renderizado após a decodificação, o carregamento é lento e demorado.

16. Como otimizar a renderização?

O método específico é o seguinte.

(1) Ao definir a meta tag Viewport por meio de HTML, Viewport pode acelerar a renderização da página, conforme mostrado no código a seguir.
<meta name="viewport" content="width=device=width,initial-scale=1">
(2) Reduza o número de nós DOM. Muitos nós DOM afetarão a renderização da página, portanto, o número de nós DOM deve ser reduzido o máximo possível.

(3) Use animação CSS3 o máximo possível, use razoavelmente animação requestAnimationFrame em vez de setTimeout e use animação de tela de forma adequada (animação CSS para menos de 5 elementos e animação de tela para mais de 5 elementos (webGL pode ser usado no iOS 8) )

(4) Otimize o Touchmove para eventos de alta frequência, os eventos de rolagem podem causar várias renderizações.

Use requestAnimationFrame para monitorar as mudanças de quadro para que você possa renderizar no tempo correto, aumente o intervalo de tempo para responder às mudanças e reduza o número de redesenhos.

Use o modo de limitação (com base na limitação de operação ou com base na limitação de tempo) para reduzir o número de acionadores.

(5) Melhore a velocidade da GPU e use as propriedades em CSS (transições CSS3, transformações CSS3 3D, Opacidade, Canvas, WebGL, Vídeo) para acionar a renderização da GPU.

17. Como configurar o cache DNS?

Depois de inserir o URL na barra de endereço do navegador, o navegador precisa primeiro consultar o endereço IP do servidor correspondente ao nome de domínio (nome do host), o que geralmente leva de 20 a 120 ms.

Antes que a consulta DNS seja concluída, o navegador não consegue reconhecer o IP do servidor, portanto, não baixa nenhum dado. Com base em considerações de desempenho, os operadores ISP, roteadores LAN, sistemas operacionais e clientes (navegadores) terão todos os mecanismos de cache DNS correspondentes.

(1) O IE armazena em cache por 30 minutos, que pode ser definido por meio do item DnsCacheTimeout no registro.

(2) O Firefox é misturado por 1 min e configurado por meio de network.dnsCacheExpiration.

(3) No Chrome, clique em "Configurações" → "Opções" → "Opções avançadas" por sua vez e marque a opção "Usar DNS pré-buscado para melhorar a velocidade de carregamento da página da web" para configurar o tempo de cache.

18. Quando ocorrerá a falha de acesso aos recursos?

Durante o processo de desenvolvimento, verificou-se que muitos desenvolvedores não configuravam o ícone e o diretório raiz do servidor não armazenava o Favicon.ico padrão, o que fazia com que o pedido 404 aparecesse. Normalmente abra o Favicon.ico no webview do App, este Favicon.ico não será carregado, mas muitas páginas podem ser compartilhadas.

Se o usuário abrir o Favicon .ico no navegador, a recuperação falhará. Geralmente, tente garantir que o ícone existe por padrão, o arquivo é o menor possível e defina um tempo de expiração de cache mais longo. Além disso, você deve limpar imediatamente os recursos que possuem caches expirados que causam a falha da solicitação de descoberta.

19. Como otimizar o desempenho do jQuery?

O método de otimização é o seguinte.

(1) Use a versão mais recente da biblioteca jQuery.

Cada nova versão da biblioteca JQuery corrigirá bugs e algumas otimizações da versão anterior, e também conterá algumas inovações, por isso é recomendado usar a versão mais recente da biblioteca jQuery para melhorar o desempenho. Porém, deve-se ressaltar que após alterar a versão, não se esqueça de testar o código, afinal, às vezes ele não é totalmente compatível com versões anteriores.

(2) Use o seletor apropriado.

O jQuery fornece uma seleção muito rica de seletores.O seletor é a função mais comumente usada pelos desenvolvedores, mas usar seletores diferentes também pode trazer problemas de desempenho. Recomenda-se usar seletores simples, como seletores i, seletores de classe e não aninhar seletores i.

(3) Use objetos jQuery como um array.

O resultado obtido usando o seletor jQuery é um objeto jQuery. No entanto, a biblioteca jQuery fará com que você sinta que está usando um array com um índice e comprimento definidos. Em termos de desempenho, é recomendável usar um loop for ou while simples em vez de $. Each () para tornar o código mais rápido.

(4) Cada evento JavaScript (como clique, mouseover, etc.) irá borbulhar no nó pai. Quando você precisa vincular a mesma função de retorno de chamada a vários elementos, é recomendado usar o modo de delegação de evento.

(5) Use join () para concatenar strings.

Use join () para concatenar strings longas em vez de usar "+" para concatenar strings. Isso ajuda a otimizar o desempenho, especialmente ao lidar com strings longas.

(6) Use razoavelmente o atributo de dados em HTML5.

O atributo de dados em HTML5 ajuda a inserir dados, especialmente a troca de dados entre front-end e back-ends; o método data () da jQuery pode usar atributos HTML5 de maneira eficaz para obter dados automaticamente.

20. Quais métodos podem melhorar a experiência de animação CSS3 do terminal móvel?

(1) Use recursos de hardware tanto quanto possível, como usar deformação 3D para ativar a aceleração de GPU, como o código a seguir.

-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0)；

A fluência da animação de um elemento que se move 500X para a direita por meio do translate3d será significativamente melhor do que o movimento da animação obtido usando a propriedade left, porque a propriedade da animação CSS acionará a página inteira para refluir, redesenhar e reorganizar. O Paint geralmente consome mais desempenho. Evite usar propriedades de animação CSS que acionam o paint tanto quanto possível.

Se houver cintilação durante a execução da animação (geralmente no início da animação), isso pode ser tratado da seguinte maneira.

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden；
-ms-backface-visibility:hidden ;
backface-visibility:hidden；
-webkit-perspective：1000；
-moz-perspective：1000；
-ms-perspective：1000；
perspective：1000;

(2) Use sombras de caixa e gradientes o mínimo possível. Eles geralmente afetam seriamente o desempenho da página, especialmente quando são usados ​​em um elemento ao mesmo tempo.

(3) Mantenha os elementos de animação fora do fluxo do documento o máximo possível para reduzir o rearranjo, conforme mostrado no código a seguir.

position:fixed；
position:absolute;