prefácio
A frente é enorme, incluindo uma variedade de recursos, HTML, CSS, Javascript, Imagem, Flash, e assim por diante. otimização de front-end é complexo, os recursos para todos os aspectos de tem uma maneira diferente. Então, qual é o objetivo de otimizar o front-end?
1. A partir de uma perspectiva do cliente, otimização pode fazer o carregamento da página mais rápido, operam resposta mais oportuna para o usuário, ele fornece uma experiência mais amigável.
2. Do ponto de vista do servidor, a otimização pode reduzir o número de solicitações de página ou para reduzir a largura de banda ocupada pelo pedido, economiza recursos consideráveis.
Em suma, o direito não só para melhorar a experiência do usuário para otimizar o site e ser capaz de economizar recursos consideráveis.
Há muitas maneiras de otimizar a frente, onde eu organizado em três pontos principais, o primeiro é o nível de solicitação HTTP , o segundo é o nível de código de programa , eo terceiro é a fonte do pedido, em resposta ao nível da fonte mais próxima .
A, HTTP nível de pedido
Esta estratégia, basicamente, todas as pessoas front-end sabe, mas também o mais importante e mais eficaz. Eles dizem que querem reduzir solicitações HTTP, pedido que mais no final o que vai acontecer? Em primeiro lugar, há o custo de cada pedido, inclui tanto o custo de tempo também inclui o custo de recursos. A pedidos completos precisa passar por pesquisa de DNS, a conexão é estabelecida (estabelecida canal tcp, de três vias aperto de mão), o envio de dados, à espera do servidor e o servidor recebe dados como uma "longa" e processo complicado e, finalmente, as necessidades do navegador para resolver html , processamento de CSS tornam árvore DOM correspondente para gerar, por meio de uma série de refluxo e redesenhar js realizada para formar o correspondente página para o utilizador.
Assim, a principal forma de reduzir o número de solicitações HTTP incluem:
1. Reduzir o número de solicitações HTTP (quantizada)
(1) otimizar os pedidos de imagem: Quando se trata do número de pedidos, pedido que a imagem página certamente não pode fugir, e uma foto será enviada uma solicitação, o pedido para a quantidade de imagem, podemos usar imagens CSS Sprites serão integrados em um da mapa, e, em seguida, passar o background-position correspondente à imagem a ser usada para solicitações, este é, sem dúvida, a pedido de várias fotos em um pedido, é claro, isso também aumenta a largura de banda ocupada pelo pedido, para que ele possa ser considerado Estados Unidos e há um pouco falta dela; eo segundo é a imagem de base64, base64 imagem codificada é não consumir o número de pedidos, mas tome cuidado para não usar mais de 10k base64 imagem possível, porque quanto maior o tamanho da imagem, convertidos em código base64 a afetar mais significativamente a qualidade do código, o último é o ícone da fonte , o ícone é um formato de fonte Iconfont, este ícone não é consumida pelo pedido, mas geralmente podem ser atendidas nesta fase do nosso projeto mais pequeno ícone → biblioteca de ícone Alibaba
(2) Recursos fundiu-se com compressão: se puder, tanto quanto possível de scripts externos, fusão estilo, mais em um. Além disso, CSS, Javascript, compressão da imagem pode ser realizada com as ferramentas adequadas, muitas vezes depois de compressão pode salvar um monte de espaço
(3) Imagem de carga preguiçoso (Carga Tardia Images): certamente sabemos, como Taobao, as pétalas desta imagem são particularmente grandes sites dão uma imagem da página atual que o usuário carrega? Claramente impossível, para este retrato muitas páginas são processamento de carregamento lento para reduzir a dobrar o número de pedidos de uma imagem, mas nota aqui é reduzir o número de solicitações HTTP, não significa que você pode deixar as imagens não precisam ser carregados por carregamento lento enviar um pedido, mas quando você entrar na página, o mecanismo de carregamento lento pela carga vai dar-lhe uma parte da imagem, em vez da página atual das imagens tem que enviar um pedido; somente quando o usuário continua a rolagem até a próxima carga fotos subseqüentes . Como resultado, quando se o usuário está interessado apenas no conteúdo da primeira tela, e que as imagens restantes são guardados a pedido. Quando brevemente sobre a realização do princípio, que é o front-end para obter a imagem back-end dados de resposta, endereço de imagem, primeiro nas notas img data-srcna propriedade, em seguida, srca propriedade está vazia, então rolar com a página de usuários do monitor JS, enquanto a imagem atual para a área visível da janela será data-srco endereço de imagem srcna realização de uma exibição de imagem
(4) um conjunto razoável de HTTP Cache: Cache é uma força poderosa e configurações de cache apropriado pode reduzir muito solicitações HTTP. Em casa, por exemplo, quando o cache do navegador quando não há hipótese de que o acesso vai emitir um total de 50 pedidos, um total de mais de 500 K de dados, e quando a segunda visita que está em cache de acesso do browser é de apenas 10 solicitações, num total de 20 dados k. (Deve-se notar aqui que se F5 direta para atualizar a página, então o efeito não é o mesmo, o número de pedidos ainda é o mesmo neste caso, mas o recurso de cache do servidor solicitado é de 304 resposta, mas Header sem corpo, pode poupar largura de banda)
como nós considerada conjunto razoável? Pouca mudança na imagem, por exemplo, os recursos podem ser diretamente fornecido pela Expira cabeçalho HTTP em uma cabeça longa expirar; mudanças não são frequentes, mas podem tornar-se um recurso pode ser usado para fazer a verificação pedido-modifed. Tanto quanto possível, de modo que os recursos podem ser mais longos no cache. Enquanto isso está configuração principalmente backend, isso envolveria resposta mark-to-back, o conjunto razoável em excesso pode reduzir a frente e interação lateral traseira, acelerar o carregamento da página
2. Os pedidos de HTTP de redução da percentagem de banda larga (qualitativa)
(1) Recursos fundiu-se com compressão (quantização já mencionei isso antes, aqui ou escrever sobre ele, você pode entender o pedido para reduzir a quantidade de consolidação, a compressão reduz a quota de solicitação de banda larga): Se você puder, tanto quanto possível do scripts externos, estilos são mesclados, em mais um. Além disso, CSS, Javascript, compressão da imagem pode ser realizada com as ferramentas adequadas, muitas vezes depois de compressão pode salvar um monte de espaço
(2) grande foto evitar (grande volume) Solicitação: Pedido a imagem grande é obrigado a abrandar, vai afetar a experiência do usuário, mas o projeto certamente não evitar o carregamento de várias imagens grandes, então podemos imaginar o volume compressão apropriada, cuidado para não afetar a qualidade da imagem, tais como a distorção difusa, este desenhador geral UI dessas imagens serão processadas, claro, se a empresa não é a divisão tão clara do trabalho, pode ser necessário para completar o trabalho do front-end (tão à vontade fazer, há agora o software que pode ser feito), mas se você não sabe como lidar com ou comprimir o tempo ou o surgimento de problemas de qualidade, recomendamos a imagem no formato SVG, que está usando não só o volume em comparação com outras imagens de pequeno formato, o mais importante é uma ampliada sem distorção!
Em segundo lugar, o nível de código de programa
nível de otimização de código, é uma qualidade essencial de programadores, não só para melhorar a especificação sobre a manutenção do código, mas também melhorias de desempenho (de alta qualidade do código não pode afetar o desempenho de sua carta!), não muito beep ver de Lai Lai Quais são algumas maneiras:
1. estilo e script de localização de código
(1) CSS Venda e JS conjunto roteiro CABEÇA no final: tudo isso devemos saber aqui que as razões → ① Se o CSS em outro lugar, como o corpo, então o navegador não foi possível fazer o download e de análise CSS já começou a processar uma página, o que levou a um salto a partir da página sem estado CSS CSS para estado, a experiência do usuário é relativamente pobre. Além disso, alguns navegadores vão começar a processar páginas depois que o download é CSS completo, se CSS colocado na posição inferior fará com que o navegador para renderização adiada; ② após HTTP1.1 solicitação HTTP do navegador é simultaneamente, uma característica que torna mais rápido aos recursos de carga, no entanto JS roteiro carregado Shique bloquear outros recursos, como antes do script é carregado, ele está por trás das imagens, estilo e outros scripts no estado bloqueado até depois que o script tem de carregamento acabado começará carregamento. Se o script é colocado posição mais para frente, toda a velocidade de carregamento da página será afetado afectando assim a experiência do usuário. Há muitas maneiras de resolver este problema, e da maneira mais simples e confiável é o roteiro do próximo movimento, tanto quanto possível, para reduzir o impacto de downloads simultâneos.
2. HTML
(1) uso racional de notas semânticas HTML5 e tags de caos aninhada, reduzir notas inúteis, você deve estar se perguntando com otimização de desempenho front-end Qual é a relação? Note-se que o projeto da estrutura DOM é razoável, que irá reduzir a velocidade do navegador quando parsing HTML DOM árvore (estrutura DOM se mais complexo, com mais perdas serão mais desempenho ao atravessar), concreto pode ver este artigo → redesenhar o retorno
(2) Uma vez que a nova API oferece armazenamento para web HTML5 é um Web Storage importante, aplicações Web off-line convenientes. Além disso, a nova API em relação ao cookie também tem as vantagens de alta segurança, alta eficiência, um espaço maior. Como cada pedido levaria o cookie ainda vai consumi-los de modo que o número correspondente ao pedido, e sessão de Armazenamento e armazenamento local apenas pode otimizá-lo;
3.CSS
(1) Na mente da maioria das pessoas, tipo sensação do navegador analisa seletores CSS da esquerda para a conduta correta, por exemplo, #pic A { color: #444; }tal seletor, da esquerda para a direita, se é para resolver a eficiência será alto, porque a primeira uma seleção âmbito ID colocar substancialmente a definição de pesquisa, mas na verdade seletores navegador determinação é feita da direita para a esquerda. Como os seletores acima, os navegadores devem percorrer para encontrar os antepassados de cada um de nós um rótulo, a eficiência não é como antes tão alto quanto imaginado, por isso uma vez que o navegador é analisar CSS, então, não deveríamos estar escrevendo CSS estilos quando não estiver a há nidificação profunda, esta otimização de desempenho, como mencionado acima, com HTML, CSS árvore DOM é resolvido no navegador quando envolvidos, escrever um demasiado aninhados (HTML ou estrutura CSS) será sempre deixar os navegador analisa desacelera;
(2) Na animação, a animação em si deve ser permitida a fluir para fora de documentos, reduzindo assim a página constantemente redesenhar refluxo, porque a animação em si está em movimento, se houver fluxo do documento, que irá afectar ao lado do layout, o navegador irá re esta parte do tamanho do elemento de computação e localização envolvidos, o segundo é a aceleração uso css3 hardware, permitindo transformar, opacidade, filtra essas animações não causar refluxo redesenho → Sobre estes podem olhar para este artigo para redesenhar o retorno dentro do dito muito claro
4.Javascript
(1) redução nó DOM operação:
operações DOM deve ser um script desempenho mais resistência à ação da classe, tais como adicionar, modificar ou excluir elementos para a operação de recolha DOM DOM. Se o script contém um grande número de operações DOM terá que observar o seguinte:
a. Recolha HTML (coletor HTML devolve o conteúdo da informação é um array)
nas document.images roteiro, document.forms, getElementsByTagName () retorna um tipo de coleção HTMLCollection são, quando a maioria geralmente usá-lo como uma matriz para uso, porque tem uma propriedade de comprimento, você pode usar o índice para acessar cada elemento. Mas no desempenho de acesso do que a matriz para ser muito pior, porque este não é um conjunto estático de resultados, representa apenas uma consulta particular, a consulta é re-executado cada vez que você acessar a coleção para atualizar os resultados da consulta. O chamado "o acesso à coleção" inclui uma coleção de propriedade comprimento de leitura, elementos de acesso da coleção.
Então, quando você precisa para atravessar Coleção HTML, experimentá-lo e, em seguida, o acesso em matrizes para melhorar o desempenho. Se não em uma matriz, acesse-o tão pouco quanto possível, por exemplo, ao atravessar a propriedade de comprimento podem ser salvos em um membro de uma variável local e, em seguida, usar as variáveis locais.
b. Refluxo & Repaint
além de um pouco acima, as operações DOM também precisa considerar o navegador Refluxo e repintar, porque estes são a necessidade de consumir recursos
c. enquadramentos estão fase DOM virtual como vue / Reagir operação, a estrutura inferior por meio de diferentes algoritmos para a Dif DOM antes e depois da operação de comparação, que não entra em detalhe específico
(2) os dados variáveis de acesso:
dados aceder directamente compreende uma quantidade de Javascript (uma cadeia de caracteres, uma expressão regular), variáveis, atributos de matriz e de objectos, e em que a quantidade de acesso directo para as variáveis locais é o mais rápido, e uma matriz de propriedades do objecto a necessidade de um maior acesso à sobrecarga. Quando as condições seguintes, recomenda-se colocar os dados em variáveis locais:
. Uma visita a qualquer propriedade do objeto mais de uma vez
B vezes em qualquer membro da matriz para acessar mais de 100 vezes.
Além disso, deve reduzir a profundidade do objeto, bem como uma variedade de possíveis Localizar.
(3) reduzir a cadeia de escopo de encontrar (a este respeito a questões relacionadas com a concepção parte do conteúdo):
anteriormente falou sobre a cadeia de escopo para encontrar o problema, e este é um problema particular para nota em circulação. Por favor, se você precisa de variáveis de acesso não no âmbito deste ciclo no cache antes de atravessar as variáveis variáveis locais e, em seguida, atravessando o final da reescrita dessa variável, o que é particularmente importante para as variáveis globais, porque a variável global está no escopo o topo da cadeia, o número de vezes em que a visita é encontrar o mais; compararmos estes dois usos ↓
① redação ineficiente:
// 全局变量
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
//每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次
globalVar += i;
}
}
② escrita mais eficiente:
// 全局变量
var globalVar = 1;
function myCallback(info){
// 局部变量缓存全局变量
var localVar = globalVar;
for( var i = 100000; i--;){
// 访问局部变量是最快的
localVar += i;
}
// 本例中只需要访问 2次全局变量
// 在函数中只需要将 globalVar中内容的值赋给localVar
globalVar = localVar;
}
Além disso, para reduzir a cadeia de escopo deve olhar também para reduzir o uso de encerramentos.
concatenação (4) Cadeia de
uso em Javascript sinal "+" à eficiência cordas concatenate é relativamente baixo, como vai abrir nova memória e gerar uma nova variável de cadeia, e depois atribuir o resultado a uma nova variável costurando cada execução. Em contraste abordagem mais eficiente é usar uma variedade de método de junção, em breve será necessário para emendar a string em uma matriz chamando seu método de junção para obter o resultado final. No entanto, por causa do uso da matriz tem uma certa sobrecarga, mais ainda quando a corda quando costura necessária pode considerar usar este método, o segundo é a sintaxe modelo perfeito ES6 KO isso "+" práticas splicing, conveniente e eficiente
(5) Carga Tardia Javascript (este pode ser entendida como carregado em demanda, tal como o carregamento assíncrono sintaxe vue, Webpack ligação por divisão de código)
com JavaScript quadro popular, mais e mais locais também são usados a partir do quadro. No entanto, um quadro geralmente incluem uma série de funções para alcançar estas funções não são necessários cada página, se você baixar o script não requer a pretensão de ser um desperdício de recursos - um desperdício de largura de banda e execução tempo gasto desperdiçado . A prática corrente são de dois tipos, um é para aqueles que o tráfego é particularmente as páginas pesadas adaptada uma mini versão dedicada do quadro, o outro é preguiçoso Load. A segunda forma é a utilização do YUI, YUI na execução de, o módulo central inicialmente carregado, outros módulos podem ser utilizados apenas quando necessário esperar até que a carga. VUE é a sintaxe carregado de forma assíncrona na configuração de encaminhamento, SPA aplicação de uma página é muito comum
(6) aumento da utilização de códigos:
A Qual é a reutilização de código (cobertura de código).?
Eu diria algo popular, especificamente auto Goole. cobertura de código refere-se ao documento de página atualmente carregada quantas estão realmente usando a ativação (código de ativação que está em verde e vermelho está pendente código de ativação)
b. como ver?
A imagem mostra o amor Arte Fantástica casa quando carregado usando o teste mostrar cobertura para fora, você pode ver pelo o caixa vermelha, cobertura de código de 70% após iQIYI primeira tela carregado, muito nb, há mais de 55 uma boa bonita;
c. como otimizar, como fazer?
Uma → página actualmente código carregado não é dopado com outras páginas irrelevantes, ou desatenção e evitar a página com a união em conjunto de uma pluralidade de módulos, cada módulo então solicita o mesmo recurso, o recurso irá causar um pedido de repetição;
Segundo → código assíncrono, na lógica e na interação com o usuário, o uso de código de processamento assíncrono, o código pode aumentar a utilização, pode ser testado por cobertura, quando interagimos acionado com sucesso, o código assíncrono correspondente vai se transformar código verde, e assíncrona pode melhorar a cobertura, a palavra final agora otimizado cache de front-end não pode simplesmente considerar este nível, mas também preocupado com o nível de utilização do código;
Terceiro → recentes pesado Vue3.0 não lançado ainda? Há parceiro muito pouco entendimento deve saber Vue3.0 otimizado "sacudir a árvore Tree-agitando" característica, esse recurso pode ser poderoso, ele não pode reconhecer automaticamente a página de código em uso estão tremendo, é claro, não quer dizer que por causa disso, para que todos que não é para atualizar o Vue de outra forma manter-se a tendência, afinal, taro recém-assados é muito quente, é preciso tempo; Webpack para configurar este se você não usar o desenvolvimento Vue3.0, ele também pode ser alcançado por árvore-agitando função isto pode referir-se a → documentos oficiais Webpack
Em terceiro lugar, a fonte da fonte pedido em resposta ao nível do mais próximo
O nome é uma bagunça que eu joguei, então não se importam. Só sei o que se entende pelo próximo na linha;
(1) CDN Aceleração: Este serviço fornecedores costumam ter especializados, basta colocar o dinheiro na linha, o principal é alcançar a fonte do pedido (tal como um usuário no projeto em Guangzhou, dados de solicitação, CDN vai resolver para obter este ip pedido de endereço) após o pedido de transmissão, em resposta a uma fonte (pedido de recepção de acordo com a CDN implantado posteriormente realizada endereço IP rapidamente atribuir a partir do servidor mais próximo, e retorna os dados correspondentes correspondentes ao cliente) retorna os dados de resposta;
epílogo
Este artigo a partir dos três aspectos das várias maneiras de otimizar front-end para fazer um resumo, estes métodos são basicamente os desenvolvedores front-end pode aprender e praticar no processo de desenvolvimento, o desejo de ajudá-lo, é claro, também possível otimizar o método Sim, mas eu não mencionar ou são eles não sabem, então cortesia do mais brilhante figura irmão mais velho para fora, reabastecimento ~
Aviso: Este artigo é um artigo blogger original, siga o CC 4.0 BY-SA acordo de direitos autorais, reproduzido, por favor anexar o link da fonte original e esta declaração.
Este link: https: //blog.csdn.net/Umbrella_Um/article/details/102546329
