Resumo: Seja no trabalho ou em uma entrevista, otimizar o desempenho do front-end da web é muito importante. Então, por onde precisamos começar com a otimização? Você pode seguir as 34 Catch-Rules do Yahoo para otimização de front-end, mas agora são 35, então pode-se dizer que é o Catch-35 do Yahoo para otimização de front-end. Foi classificado, o que é bom. Assim temos uma direção mais clara para otimização.
parte do conteúdo 1. Minimize o número de solicitações HTTP80% do tempo de resposta do usuário final é gasto no front-end, e a maior parte desse tempo é feito no download dos vários componentes da página: imagens, folhas de estilo, scripts, Flash, etc. A redução do número de componentes reduzirá inevitavelmente o número de solicitações HTTP enviadas pela página. Esta é a chave para tornar sua página mais rápida.
Uma maneira de reduzir o número de componentes da página é simplificar o design da página. Mas existe uma maneira de criar páginas complexas e ao mesmo tempo acelerar o tempo de resposta? Bem, de fato existe uma maneira de pegar seu bolo e comê-lo também.
A mesclagem de arquivos reduz o número de solicitações colocando todos os scripts em um arquivo. Claro, você também pode mesclar todos os CSS. Mesclar arquivos pode ser uma tarefa complicada se os scripts e estilos de cada página forem diferentes, mas fazer isso como parte do processo de publicação do site pode realmente melhorar os tempos de resposta. CSS Sprites são a forma preferida de reduzir o número de solicitações de imagens. Integre todas as imagens de fundo em uma imagem e, em seguida, use as propriedades CSS background-image e background-position para posicionar a parte a ser exibida. O mapeamento de imagens pode combinar várias imagens em uma única imagem, o tamanho total é o mesmo, mas reduz o número de solicitações e acelera o carregamento da página. O mapeamento de imagem só é útil se a imagem for contínua na página, como uma barra de navegação. O processo de definição de coordenadas para um mapa de imagem é enfadonho e sujeito a erros, e usar mapas de imagem para navegação não é fácil, portanto, esse método não é recomendado. Imagens embutidas (codificadas em Base64) usam o padrão data: URL para incorporar imagens na página. Isso aumentará o tamanho do arquivo HTML. Colocar imagens embutidas em uma folha de estilo (em cache) é uma boa ideia e evita tornar a página pesada. No entanto, os navegadores convencionais atuais não suportam bem imagens embutidas.Reduzir o número de solicitações HTTP para uma página é um ponto de partida. Esta é uma diretriz importante para melhorar a velocidade da primeira visita ao site.
2. Reduza pesquisas de DNSO sistema de nomes de domínio estabelece um mapeamento entre nomes de host e endereços IP, semelhante ao mapeamento entre nomes e números em uma lista telefônica. Quando você digita www.yahoo.com no navegador, o navegador entrará em contato com o resolvedor DNS para retornar o endereço IP do servidor. O DNS tem um custo: leva de 20 a 120 milissegundos para procurar o endereço IP de um determinado nome de host. O navegador não pode baixar nada do nome do host até que a pesquisa de DNS seja concluída.
As pesquisas de DNS são armazenadas em cache com mais eficiência, em um servidor de cache especial pelo ISP (Provedor de Serviços de Internet) do usuário ou pela rede local, mas também podem ser armazenadas em cache no computador do usuário individual. As informações de DNS são armazenadas no cache DNS do sistema operacional (o serviço de cliente DNS no Microsoft Windows). A maioria dos navegadores possui seu próprio cache, independente do sistema operacional. Enquanto o navegador mantiver esse registro em seu cache, ele não consultará o sistema operacional em busca de DNS.
O IE armazena em cache pesquisas de DNS por 30 minutos por padrão, conforme escrito na configuração do registro DnsCacheTimeout. O Firefox armazena em cache por 1 minuto, que pode ser definido usando o item de configuração network.dnsCacheExpiration. (Fasterfox alterou o tempo de cache para 1 hora. PS Fasterfox é um plug-in de aceleração para FF)
Se o cache DNS do cliente estiver vazio (incluindo navegador e sistema operacional), o número de pesquisas DNS será igual ao número de nomes de host diferentes na página, incluindo URLs de páginas, imagens, arquivos de script, folhas de estilo, objetos Flash e outros componentes do nome do host, a redução de diferentes nomes de host pode reduzir as pesquisas de DNS.
Reduzir o número de nomes de host diferentes também reduz o número de componentes que uma página pode baixar em paralelo. Evitar pesquisas de DNS reduz o tempo de resposta, enquanto reduzir o número de downloads paralelos aumenta o tempo de resposta. Minha regra é distribuir os componentes por 2 a 4 nomes de host, o que é um compromisso entre reduzir pesquisas de DNS e permitir muitos downloads simultâneos.
3. Evite redirecionamentosOs redirecionamentos usam códigos de status 301 e 302. Aqui está um cabeçalho HTTP com um código de status 301:
HTTP/1.1 301 movido permanentemente Local: http://example.com/newuriContent-Type: text/html
O navegador irá automaticamente para o URL especificado no campo Localização. Todas as informações necessárias para o redirecionamento estão no cabeçalho HTTP e o corpo da resposta geralmente está vazio. Na verdade, cabeçalhos HTTP adicionais, como Expires e Cache-Control, também representam redirecionamentos. Existem outras maneiras de redirecionar: atualizar meta tags e JavaScript, mas se você precisar fazer um redirecionamento, é melhor usar o código de status HTTP 3xx padrão, principalmente para que o botão Voltar possa funcionar corretamente.
Lembre-se de que os redirecionamentos podem retardar a experiência do usuário. Inserir um redirecionamento entre o usuário e o documento HTML atrasará tudo na página. A página não será renderizada e os componentes não iniciarão o download até que o documento HTML seja veiculado na página. navegador.
Existe um redirecionamento comum que desperdiça recursos extremamente, e os desenvolvedores da web geralmente não estão cientes disso, e é quando falta uma barra no URL no final. Por exemplo, pular para http://astrology.yahoo.com/astrology retornará uma resposta 301 que redireciona para http://astrology.yahoo.com/astrology/ (observe a barra final). No Apache, você pode usar as instruções Alias, mod_rewrite ou DirectorySlash para cancelar redirecionamentos desnecessários.
O uso mais comum do redirecionamento é conectar o site antigo ao novo site. Ele também pode conectar diferentes partes do mesmo site e fazer algum processamento de acordo com as diferentes situações do usuário (tipo de navegador, tipo de conta de usuário, etc.). . Conectar dois sites usando redirecionamentos é o mais simples e requer apenas uma pequena quantidade de código adicional. Embora o uso de redirecionamentos nesses momentos reduza a complexidade do desenvolvimento para os desenvolvedores, ele reduz a experiência do usuário. Uma alternativa é usar Alias e mod_rewrite, desde que ambos os caminhos de código estejam no mesmo servidor. Se o redirecionamento for usado porque o nome de domínio muda, você pode criar um CNAME (criar um registro DNS apontando para outro nome de domínio como um alias) combinado com a diretiva Alias ou mod_rewrite.
4. Torne o Ajax armazenável em cacheUm dos benefícios do Ajax é que ele pode fornecer feedback imediato ao usuário porque pode solicitar informações de forma assíncrona do servidor backend. No entanto, com o Ajax não há garantia de que os usuários não ficarão entediados enquanto aguardam o retorno das respostas assíncronas de JavaScript e XML. Em muitas aplicações, a capacidade do usuário de esperar depende de como o Ajax é usado. Por exemplo, em um cliente de email baseado na Web, os usuários permanecerão focados nos resultados retornados pelas solicitações Ajax para encontrar mensagens de email que correspondam aos seus critérios de pesquisa. É importante lembrar que assíncrono não significa instantâneo.
Para melhorar o desempenho, otimizar essas respostas do Ajax é crucial. A maneira mais importante de melhorar o desempenho do Ajax é tornar a resposta armazenável em cache, conforme discutido em Adicionando cabeçalhos HTTP Expires ou Cache-Control. As seguintes regras adicionais se aplicam ao Ajax:
Vejamos um exemplo de cliente de e-mail Web 2.0 usando Ajax para baixar o catálogo de endereços do usuário para funcionalidade de preenchimento automático. Se o usuário não modificou seu catálogo de endereços desde o último uso, e a resposta do Ajax puder ser armazenada em cache e tiver um cabeçalho HTTP Expires ou Cache-Control que não expirou, então o catálogo de endereços anterior poderá ser lido no cache. O navegador deve ser informado se deve continuar a usar a resposta do catálogo de endereços previamente armazenada em cache ou solicitar uma nova. Isso pode ser conseguido adicionando um carimbo de data/hora à URL Ajax do catálogo de endereços indicando a hora da última modificação do catálogo de endereços do usuário, por exemplo &t=1190241612. Se o catálogo de endereços não tiver sido modificado desde o último download e o carimbo de data/hora permanecer inalterado, o catálogo de endereços será lido diretamente do cache do navegador, evitando assim uma viagem HTTP adicional. Se o usuário modificou o catálogo de endereços, o carimbo de data/hora também garante que o novo URL não corresponderá à resposta armazenada em cache e o navegador solicitará a nova entrada do catálogo de endereços.
Embora as respostas Ajax sejam criadas dinamicamente e possam estar disponíveis apenas para um único usuário, elas podem ser armazenadas em cache, o que tornará seu aplicativo Web 2.0 mais rápido.
5. Carregamento lento de componentesDê uma olhada na página mais de perto e pergunte-se: O que é necessário para renderizar a página em primeiro lugar? O resto pode esperar.
JavaScript é a escolha ideal para separar antes e depois do evento onload. Por exemplo, se você tiver código JavaScript e bibliotecas que suportam arrastar e soltar e animações, eles poderão esperar porque o elemento arrastar e soltar ocorre depois que a página é renderizada inicialmente. Outras seções que podem ser carregadas lentamente incluem conteúdo oculto (conteúdo que aparece após uma interação) e imagens recolhidas.
As ferramentas podem ajudar a reduzir sua carga de trabalho: o YUI Image Loader pode carregar lentamente imagens recolhidas, e o utilitário YUI Get é uma maneira fácil de trazer JS e CSS. A página inicial do Yahoo! é um exemplo. Você pode abrir o painel de rede do Firebug e dar uma olhada mais de perto.
É melhor alinhar as metas de desempenho com outras práticas recomendadas de desenvolvimento web, como o aprimoramento progressivo. Se o cliente oferecer suporte a JavaScript, a experiência do usuário poderá ser melhorada, mas você deverá garantir que a página funcione corretamente quando JavaScript não for compatível. Assim, quando tiver certeza de que sua página está funcionando corretamente, você pode aprimorá-la com alguns scripts de carregamento lento para suportar alguns efeitos sofisticados, como arrastar e soltar e animações.
6. Pré-carregar componentes
O pré-carregamento pode parecer o oposto do carregamento lento, mas na verdade tem um objetivo diferente. Ao pré-carregar componentes, você pode aproveitar ao máximo o tempo ocioso do navegador para solicitar componentes (imagens, estilos e scripts) que serão usados no futuro. Quando o usuário acessa a próxima página, a maioria dos componentes já está no cache, então a página carregará mais rápido do ponto de vista do usuário.
Em aplicações reais, existem os seguintes tipos de pré-carregamento:
Uma página complexa significa mais bytes para download e o acesso ao DOM com JavaScript será mais lento. Por exemplo, quando você deseja adicionar um manipulador de eventos, há uma diferença entre percorrer 500 elementos DOM na página e 5.000 elementos DOM.
Um grande número de elementos DOM é um sinal de que há alguma marcação irrelevante na página que precisa ser limpa. Você está usando tabelas aninhadas para layout? Ou você adicionou vários <div>s apenas para corrigir o problema de layout? Talvez uma melhor marcação semântica deva ser usada.
Os utilitários YUI CSS são muito úteis para o layout: grids.css é para o layout geral, e fonts.css e reset.css podem ser usados para remover a formatação padrão do navegador. Esta é uma boa oportunidade para começar a limpar e pensar sobre sua marcação, como usar <div> apenas quando faz sentido semanticamente, não porque renderiza uma nova linha.
A quantidade de elementos DOM é fácil de testar, basta digitar no console do Firebug:
document.getElementsByTagName('*').comprimentoEntão, quantos elementos DOM são demais? Você pode consultar outras páginas semelhantes bem marcadas. Por exemplo, a página inicial do Yahoo! é uma página bastante movimentada, mas tem menos de 700 elementos (tags HTML).
8. Separação de componentes entre domíniosA separação de componentes pode maximizar os downloads paralelos, mas certifique-se de usar no máximo 2 a 4 domínios, pois há uma penalidade de pesquisa de DNS. Por exemplo, você pode implantar HTML e conteúdo dinâmico em www.example.org e separar componentes estáticos em static1.example.org e static2.example.org.
9. Use iframes o mínimo possívelVocê pode usar o iframe para inserir um documento HTML em um documento pai. É importante entender como o iframe funciona e usá-lo com eficiência.
Vantagens do <iframe>:
Desvantagens do <iframe>:
As solicitações HTTP são caras. Não há necessidade de usar uma solicitação HTTP para obter uma resposta inútil (como 404 Not Found).
Alguns sites usam o útil 404 - Você quer dizer xxx? , Isso é benéfico para a experiência do usuário, mas também desperdiça recursos do servidor (como bancos de dados, etc.). O pior é que o JavaScript externo ao qual você está vinculado contém um erro e o resultado é 404. Primeiro, esses downloads bloquearão downloads paralelos. Em segundo lugar, o navegador tentará analisar o corpo da resposta 404 porque é um código JavaScript e precisa descobrir quais partes dele estão disponíveis.
parte css 11. Evite usar expressões CSSUsar expressões CSS para definir propriedades CSS dinamicamente é uma maneira poderosa e perigosa. Suportado no IE5, mas obsoleto no IE8. Por exemplo, você pode usar uma expressão CSS para definir a cor de fundo para alternar por hora:
cor de fundo: expressão( (nova Data()).getHours()%2 ? #B8D4FF : #F08A00 );12. Selecione <link> para descartar @import
Uma prática recomendada foi mencionada anteriormente: para obter renderização progressiva, o CSS deve ser colocado no topo.
Usar @import no IE tem o mesmo efeito que usar <link> na parte inferior, então é melhor não usá-lo.
13. Evite usar filtrosO filtro AlphaImageLoader proprietário do IE pode ser usado para corrigir o problema de imagens PNG translúcidas em versões anteriores ao IE7. Durante o processo de carregamento da imagem, este filtro irá bloquear a renderização, congelar o navegador, aumentar o consumo de memória e é aplicado a cada elemento, não a cada imagem, portanto haverá muitos problemas.
A melhor maneira é simplesmente não usar o AlphaImageLoader e fazer o downgrade para usar imagens PNG8 que são bem suportadas no IE. Se você precisar usar o AlphaImageLoader, deverá usar o sublinhado hack:_filter para evitar afetar os usuários do IE7 e superior.
14. Coloque a folha de estilo no topoAo estudar o desempenho no Yahoo!, descobrimos que colocar folhas de estilo na seção HEAD do documento fazia com que a página parecesse carregar mais rápido. Isso ocorre porque colocar a folha de estilo no cabeçalho permite que a página seja renderizada gradualmente.
Os engenheiros de front-end preocupados com o desempenho desejam que a página seja renderizada de forma incremental. Por outras palavras, queremos que o navegador exiba o conteúdo existente o mais rapidamente possível, o que é particularmente importante quando há muito conteúdo na página ou quando a ligação à Internet do utilizador é muito lenta. A importância de mostrar feedback aos utilizadores (como indicadores de progresso) tem sido amplamente estudada e documentada. No nosso caso, a página HTML é o indicador de progresso! Quando o navegador carrega gradualmente o cabeçalho da página, a barra de navegação, o logotipo superior, etc., eles são usados como feedback pelos usuários que estão aguardando o carregamento da página, o que pode melhorar a experiência geral do usuário.
parte js 15. Remova scripts duplicadosPáginas contendo arquivos de script duplicados podem afetar o desempenho mais do que você imagina. Em uma análise dos 10 principais sites da Web nos Estados Unidos, apenas dois sites continham scripts duplicados. Dois motivos principais aumentam as chances de scripts duplicados aparecerem em uma única página: tamanho da equipe e número de scripts. Nesse caso, scripts duplicados criam solicitações HTTP desnecessárias, executam código JavaScript inútil e afetam o desempenho da página.
O IE gera solicitações HTTP desnecessárias, mas o Firefox não. No IE, se um script externo não armazenável em cache for introduzido duas vezes pela página, ele gerará duas solicitações HTTP quando a página for carregada. Mesmo que o script possa ser armazenado em cache, ele gerará solicitações HTTP adicionais quando o usuário recarregar a página.
Além de gerar solicitações HTTP sem sentido, avaliar o script diversas vezes é uma perda de tempo. Porque independentemente de o script poder ser armazenado em cache ou não, o código JavaScript redundante será executado no Firefox e no IE.
Uma maneira de evitar a importação acidental do mesmo script duas vezes é implementar um módulo de gerenciamento de script no sistema de modelos. Uma maneira típica de introduzir scripts é usar tags SCRIPT em páginas HTML:
<script type=text/javascript src=menu_1.0.17.js></script>16. Minimize o acesso ao DOM
O acesso aos elementos DOM com JavaScript é muito lento, portanto, para tornar a página mais responsiva, você deve:
Às vezes parece que a página não responde o suficiente porque muitos manipuladores de eventos executados com frequência são adicionados a diferentes elementos da árvore DOM. É por isso que a delegação de eventos é recomendada. Se houver 10 botões em um div, você deverá adicionar apenas um manipulador de eventos ao contêiner div, em vez de um para cada botão. Os eventos podem surgir, para que você possa capturá-los e saber qual botão é a origem do evento.
18. Coloque o script na parte inferiorO script bloqueará downloads paralelos A documentação oficial do HTTP/1.1 recomenda que o navegador não baixe mais de dois componentes em paralelo por nome de host. Se a imagem vier de vários nomes de host, o número de downloads paralelos poderá exceder dois. Se o script estiver sendo baixado, o navegador não iniciará nenhuma outra tarefa de download, mesmo com um nome de host diferente.
Às vezes, não é fácil mover o script para o final. Por exemplo, se o script for inserido no conteúdo da página usando document.write, não há como movê-lo ainda mais para baixo. Também pode haver problemas de definição do escopo, que na maioria dos casos podem ser resolvidos.
Uma sugestão comum é usar scripts adiados. Scripts com o atributo DEFER significam que eles não podem conter document.write e solicitam ao navegador que eles possam continuar a renderização. Infelizmente, o Firefox não suporta o atributo DEFER. No IE, o script pode ser adiado, mas não conforme o esperado. Se o script puder ser adiado, podemos movê-lo para o final da página e a página carregará mais rápido.
javascript, css 19. Mantenha JavaScript e CSS foraMuitos princípios de desempenho dizem respeito a como gerenciar componentes externos, no entanto, antes que essas preocupações surjam, você deve fazer uma pergunta mais básica: JavaScript e CSS devem ser colocados em arquivos externos ou escritos diretamente na página?
Na verdade, o uso de arquivos externos pode tornar a página mais rápida porque os arquivos JavaScript e CSS serão armazenados em cache no navegador. JavaScript e CSS embutidos em um documento HTML são baixados novamente sempre que o documento HTML é solicitado. Isso reduz o número de solicitações HTTP necessárias, mas aumenta o tamanho do documento HTML. Por outro lado, se o JavaScript e o CSS estiverem em arquivos externos e tiverem sido armazenados em cache pelo navegador, reduzimos com sucesso o documento HTML sem aumentar o número de solicitações HTTP.
20. Minimize JavaScript e CSSA compactação remove especificamente caracteres desnecessários do código para reduzir o tamanho e, assim, melhorar a velocidade de carregamento. Minimização de código significa remover todos os comentários e caracteres de espaço em branco desnecessários (espaços, novas linhas e tabulações). Fazer isso em JavaScript pode melhorar a capacidade de resposta porque o arquivo a ser baixado é menor. As duas ferramentas de compactação de código JavaScript mais comumente usadas são JSMin e YUI Compressor. O compressor YUI também pode compactar CSS.
A ofuscação é uma medida opcional de otimização do código-fonte que é mais complexa que a compactação, portanto, o processo de ofuscação também tem maior probabilidade de produzir bugs. Em uma pesquisa realizada entre os dez principais sites dos Estados Unidos, a compactação pode reduzir o tamanho em 21% e a ofuscação pode reduzir o tamanho em 25%. Embora a ofuscação proporcione um maior grau de redução, é mais arriscada que a compressão.
Além de compactar scripts e estilos externos, os blocos <script> e <style> embutidos também podem ser compactados. Mesmo com o módulo gzip habilitado, compactar primeiro pode reduzir o tamanho em 5% ou mais. JavaScript e CSS são cada vez mais usados, portanto a compactação do código terá um bom efeito.
foto 21. Otimize imagensTente converter o formato GIF para o formato PNG e veja se isso economiza espaço. Execute pngcrush (ou outra ferramenta de otimização PNG) em todas as imagens PNG
22. Otimize CSS SpriteNão use imagens maiores do que o necessário só porque você pode definir largura e altura em HTML. se necessário
<img width=100 height=100 src=mycat.jpg Host: us.yimg.com If-Modified-Since: Ter, 12 de dezembro de 2006 03:03:59 GMT If-None-Match: 10c24bc-4ab-457e1c1f HTTP/ 1.1 304 Não Modificado32. Use a solicitação GET para Ajax
A equipe do Yahoo! Mailbox descobriu que ao usar XMLHttpRequest, a solicitação POST do navegador é implementada por meio de um processo de duas etapas: primeiro enviando o cabeçalho HTTP e depois enviando os dados. Portanto, é melhor usar uma solicitação GET, que só precisa enviar uma mensagem TCP (a menos que haja muitos cookies). O comprimento máximo da URL do IE é 2K, portanto, se os dados a serem enviados excederem 2K, GET não poderá ser usado.
Um efeito colateral interessante das solicitações POST é que nenhum dado é realmente enviado, como as solicitações GET. Conforme descrito na documentação HTTP, as solicitações GET são usadas para recuperar informações. Portanto, sua semântica serve apenas para solicitar dados usando uma solicitação GET, não para enviar dados que precisam ser armazenados no servidor.
33. Limpe o buffer o mais cedo possívelQuando um usuário solicita uma página, o servidor leva cerca de 200 a 500 milissegundos para montar a página HTML, período durante o qual o navegador fica ocioso e aguarda a chegada dos dados. Existe uma função flush() no PHP, que permite enviar uma parte da resposta HTML preparada para o navegador, para que o navegador possa começar a obter os componentes enquanto prepara a parte restante em segundo plano. em um fundo muito movimentado ou em um front-end muito claro na página (PS Em outras palavras, a vantagem é melhor refletida quando o tempo de resposta está principalmente em segundo plano).
O local ideal para limpar o buffer é após o HEAD, pois a parte HEAD do HTML costuma ser mais fácil de gerar e permite a introdução de quaisquer arquivos CSS e JavaScript, permitindo que o navegador comece a buscar componentes em paralelo enquanto o background ainda está processando .
Por exemplo:
... <!-- css, js --> </head> <?php flush() ?> <body> ... <!-- content -->34. Use um CDN (rede de distribuição de conteúdo)
A distância física do usuário do servidor também afeta o tempo de resposta. A implantação de conteúdo em vários servidores dispersos geograficamente permite que os usuários carreguem as páginas com mais rapidez. Mas como fazer isso?
O primeiro passo para obter conteúdo distribuído geograficamente é: Não tente redesenhar seu aplicativo Web para acomodar uma estrutura distribuída. Dependendo da aplicação, a alteração da estrutura pode incluir tarefas assustadoras, como sincronizar o estado da sessão e replicar transações de banco de dados entre servidores (as traduções podem não ser precisas). Propostas para encurtar a distância entre usuários e conteúdos podem ser adiadas ou simplesmente impossíveis de serem aprovadas devido a essa dificuldade.
Lembre-se de que 80% a 90% do tempo de resposta de um usuário final é gasto no download de componentes da página: imagens, estilos, scripts, Flash, etc. Esta é uma regra de ouro de desempenho. É melhor descentralizar primeiro o conteúdo estático, em vez de redesenhar a estrutura do aplicativo desde o início. Isto não só reduz bastante o tempo de resposta, mas também facilita a demonstração da contribuição do CDN.
Uma rede de entrega de conteúdo (CDN) é um grupo de servidores web espalhados em diferentes localizações geográficas para entregar conteúdo aos usuários de forma mais eficiente. Normalmente, o servidor escolhido para entregar conteúdo é baseado em uma medida de distância da rede. Por exemplo: escolha o servidor com menor número de saltos ou com tempo de resposta mais rápido.
35. Adicionar cabeçalho HTTP Expires ou Cache-ControlExistem dois aspectos nesta regra:
O design da Web está ficando mais rico, o que significa que há mais scripts, imagens e Flash na página. Novos visitantes do site ainda podem ter que enviar algumas solicitações HTTP, mas ao usar uma data de expiração, o componente torna-se armazenável em cache, o que evita solicitações HTTP desnecessárias durante sessões de navegação subsequentes. Os cabeçalhos HTTP de expiração normalmente são usados em imagens, mas devem ser usados em todos os componentes, incluindo scripts, estilos e componentes Flash.
Os navegadores (e proxies) usam cache para reduzir o número e o tamanho das solicitações HTTP para que as páginas carreguem mais rapidamente. O servidor web usa o cabeçalho de resposta Expiration HTTP para informar ao cliente por quanto tempo cada componente da página deve ser armazenado em cache. Usar um tempo em um futuro distante como data de expiração informa ao navegador que essa resposta não mudará antes de 15 de abril de 2010.
Expira em: quinta-feira, 15 de abril de 2010, 20:00:00 GMT
Se você estiver usando o servidor Apache, use a diretiva ExpiresDefault para definir a data de expiração relativa à data atual. O exemplo a seguir define um período de validade de 10 anos a partir da data da solicitação:
Expira o acesso padrão mais 10 anos
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.