Com o advento da era WEB2.0, um desenvolvimento sem precedentes foi trazido para a rede. A experiência do usuário front-end está se tornando cada vez mais importante para compensar algumas das deficiências da má interação do usuário na estrutura B/S. No entanto, isso trará um problema: aumentará a pressão sobre o cliente. Por exemplo, usando uma grande quantidade de código JS, todos saberão que o código JS executado no cliente afetará a eficiência de análise de toda a página da web no navegador, o que também pode implicar em um aumento no tráfego do cliente, se for. do ponto de vista da carga do servidor ou do usuário, pois é particularmente importante otimizar o código do cliente! Este artigo explica principalmente os métodos de otimização de front-end WEB tanto do aspecto interno quanto externo. Espero que possa dar aos leitores alguma experiência e inspiração.
Primeiro, vamos dar uma olhada nos dados de tráfego http de http://yahoo.com por meio de um gráfico estatístico do Yahoo:
Podemos descobrir que desde a primeira solicitação do servidor até o carregamento completo de uma página no cliente, a leitura do código HTML representa apenas 5% de todo o tempo de resposta. Este resultado se aplica à grande maioria dos sites amostrados nos Estados Unidos. dos dez principais sites, apenas um tem mais de 5%, mas menos de 20%. Os restantes 80% do tempo são utilizados para ler outro conteúdo da página web, ou seja, o front-end (o texto original é front-end). -end, o significado não inclui html O resto do código pode ser imagens, scripts, flash, vídeos, várias coisas). Esta é a principal razão pela qual devemos nos concentrar nessas coisas para melhorar a velocidade de exibição.
Existem três razões principais pelas quais você deve começar com o front-end :
1. Fora do código, temos os três métodos a seguir:
1. Use a tecnologia CDN
Para métodos específicos, você pode pesquisar no Google. (O princípio geral parece ser determinar a localização do visitante e o conteúdo acessado para selecionar o servidor mais próximo para atender à solicitação do usuário)
2. Adicione um cabeçalho expirado
Expira em: quinta-feira, 15 de abril de 2010, 20:00:00 GMT
Os navegadores usarão o cache para reduzir o número de solicitações HTTP para acelerar o tempo de carregamento da página. Se um longo tempo de expiração for adicionado ao cabeçalho da página, o navegador sempre armazenará em cache os elementos da página.
Porém, isso causará um problema, ou seja, se as coisas na página mudarem, o nome deverá ser alterado, caso contrário o cliente não será atualizado ativamente. No grupo de trabalho do Yahoo, o número da versão é usado, como yahoo_2. 0.6.js
3. Compressão Gzip
Gzip é o método de compactação mais popular e eficaz atualmente. Foi desenvolvido pela GNU e padronizado pela RFC1952.
(Gzip compacta imagens, css, scripts, etc. no lado do servidor e depois os envia ao navegador do cliente para descompactá-los. Isso pode aumentar a velocidade de transmissão, mas a pressão no servidor aumentará. Geralmente, é mais apropriado para compactar alguns elementos.