Prefácio Por que otimizar o desempenho é tão importante para os engenheiros de front-end
Há um ditado no setor que não sei se você já ouviu falar de 'pessoas que conhecem a otimização de desempenho e estudaram o código -fonte e o código do jQuery escritos sem a otimização de desempenho terão uma diferença no consumo de desempenho de centenas ou até milhares de vezes'. O JavaScript de hoje é um processo de transição do ECMAScript3 para o ECMAScript5 e o ECMAScript6. Quando o JavaScript não está bem escrito, o método do código não é escrito corretamente e os problemas causados não podem ser ignorados.
Otimização de desempenho
Abaixo, compartilharei algumas das minhas idéias sobre otimização de desempenho com você;
1. Imagem do elfo
O mais básico é transformar imagens de fundo nos elfos o máximo possível para reduzir as solicitações de figuras; portanto, outro instinto básico para engenheiros da Web em geral é fazer elfos.
2.CSS Otimização de seletor
No CSS, tente usar o seletor infantil>, use menos seletor de descendente. Ao usar o seletor de descendente, o mecanismo de pesquisa pesquisará todos os elementos descendentes. Se usarmos o seletor de crianças, podemos restringir o intervalo de pesquisa, reduzindo assim o consumo de desempenho do mecanismo de pesquisa.
3.js alteram o estilo e operam diretamente o nome da classe
Ao operar estilos de elementos JS, não use o estilo para adicionar diretamente estilos. Geralmente, haverá menos atributos e nenhum desempenho será afetado. De fato, esse não é o caso. Toda vez que um estilo é adicionado, a página será redesenhada uma vez. A repintura é necessária para prestar atenção. Ao operar os estilos, manipular diretamente o nome da classe só causará redefinição uma vez. Adicionar o estilo diretamente com o estilo causará vários redefinições.
4.Js opera diretamente os nós DOM
Ao operar nós, tente adicionar nós atrás do elemento. Se inserido na frente do nó, todos os nós após o nó inserido causarão reflexão. Quando inserido nas costas, apenas o nó inserido precisa ser refletido uma vez.
Algumas pessoas podem não entender o conceito de redesenho e reflexão
5. Seletor de correspondência regular
No CSS3 e no JQuery, alguns desses seletores são correspondidos usando métodos regulares e tentam não usá -los. Obviamente, se a otimização do desempenho não for considerada, esses métodos serão relativamente fáceis de usar. Seletores de correspondência regulares farão com que os mecanismos de pesquisa pesquisem todas as tags, afetando bastante o desempenho
6.js Obtenha otimização de elementos
Ao obter elementos no JS, é normal usar o document.getElementsById. O mecanismo de pesquisa pesquisará a partir da parte inferior da árvore Dom até que seja pesquisado por documento na janela e depois pesquise novamente. Portanto, é melhor armazenar documentos.body ao obter elementos. Ao usá -los novamente, basta retirar essa variável a ser usada, que pode salvar o desempenho do mecanismo de pesquisa
7. transbordamento de memória
Geralmente, ao executar recursivamente, ocorrerá o excesso de memória, resultando em um declínio significativo no desempenho ao executar recursivo. Após a execução, a memória será reciclada pelo sistema. Portanto, ao executar recursivo, você precisa salvar o valor com um objeto, detectá -lo sempre que a operação recursiva, devolva -o diretamente e adicione -o se não existir. Isso pode resolver o grande desempenho do recursivo.
8. Use solicitações de Ajax
A solicitação de postagem é alcançada enviando primeiro os cabeçalhos de solicitação HTTP e depois enviando dados. O GET não possui um cabeçalho de solicitação, mas deve -se notar que o limite de tamanho GET é de cerca de 4K, enquanto o post não tem limite.
9. Atraso no carregamento de imagens
Quando a página inicia uma solicitação, o número de solicitações é muito grande, para que a imagem possa ter preguiça de carregar. Quando a página rola para a localização da imagem, a imagem será carregada.
Aqui está um plug-in para o carregamento preguiçoso de fotos
jQuery.LazyLoad.js
10. Evite o atributo SRC da imagem está vazio
Imagens com atributos SRC que são strings vazios são comuns, aparecendo principalmente em duas formas:
<img src = "">
var iMg = new Image (); img.src = "";
Ambos os formulários causam o mesmo problema: o navegador envia outra solicitação para o servidor.
Habilidade
1. Pensamento exclusivo
Primeiro exclua todos os atuais e depois execute a próxima operação; Geralmente, ao realizar animações, adicionar estilos, etc., primeiro esclarece os estilos anteriores durante a operação secundária e adicione novos estilos para evitar conflitos nas animações ao mesmo tempo.
2. Operação de curto -circuito (||)
Geralmente, quando um valor precisa ser julgado se existe, tente não usar as instruções se. Você pode usar operadores de curto-circuito para salvar a memória ocupada pelo código. por exemplo:
a = a || b;
Se existe, use um; Se A não existir, use b.
3. Operação (&&)
Pode ser usado quando as condições correspondem, para fazer uma consulta desnecessária de condições, como quando determina se um objeto é uma matriz,
a && A.Length && A.Length> = 0
4.
Quando você precisa encapsular um elemento não-maquímetro e transformá-lo em uma matriz, a maneira mais fácil é adicionar um []. Se precisar ser um pseudo-gray, você pode definir um atributo de comprimento para ele.
5. Válvula do acelerador
Geralmente usado na animação, defina um valor, defina -o como true no início, determine seu valor, atribua esse valor a false ao inserir a animação e use a função de retorno de chamada para reatribuir -o ao verdadeiro no final da animação.
6. Desbloqueie o status de seleção passiva do texto (produtos secos puros)
Ao clicar em alguns botões, às vezes o texto é selecionado, o que faz com que o cliente o veja como um bug. A seguir, é apresentado o código para remover esse estado e apenas colá -lo.
if (document.all) {document.onselectStart = function () {return false}; // para ie} else {document.onMouDown = function () {return false}; document.onmouseup = function () {return true}; } document.onselectStart = new function ('event.returnValue = false');7. Use inteligentemente o operador ternário
Quando é necessário determinar se existe um valor, você também pode usar o operador ternário para tornar o código mais otimizado. por exemplo
obj = obj === indefinido? Objeto: obj;
Reabastecer:
O exposto acima é a otimização do front-end e algumas dicas que resumi no trabalho. Se você tiver boas otimizações e técnicas, espero que você possa comentar mais. Pessoalmente, acho que a tecnologia exige mais comunicação para fazer um progresso melhor.