Requisitos: Ao solicitar um site, é necessário carregar muitos recursos; as requisições de rede também afetam a velocidade de renderização da página web; quando o usuário clica na operação para carregar alguns recursos, isso pode afetar a experiência do usuário; agora o rápido desenvolvimento da Internet, a largura de banda e o tráfego não são mais tão caros. Como pré-carregar recursos com antecedência ou estabelecer um link com o servidor alvo antecipadamente?
Pré-conexão
A pré-conexão de palavra-chave para propriedades de elementos é uma dica para o navegador de que o usuário pode precisar de recursos da fonte de destino para que o navegador possa usá-losMelhore a experiência do usuário iniciando conexões preventivamente com essa fonte。
o preconnect permite que o navegador realize uma série de ações antes que uma requisição HTTP seja oficialmente enviada ao servidor, incluindo resolução DNS, negociação TLS, handshake TCP, que elimina a latência de ida e volta e economiza tempo para o usuário.
A pré-conexão é um meio importante de otimização para reduzir o caminho de ida e volta em muitas requisições – em alguns casos por centenas ou milhares de milissegundos de latência.
Aqui está um exemplo de usar o preconnect para o Google Fonts, onde, ao adicionar um prompt de pré-conexão ao fonts.gstatic.com, o navegador inicia imediatamente uma requisição que será executada em paralelo com a requisição CSS. Nesse cenário, o pré-conexão elimina três RTTs (Tempo de Ida-Volta) do caminho crítico eRedução da latência em mais de meio segundo。
A sintaxe é a seguinte:
Documentação:O login do hiperlink está visível.
DNS-prefetch usa DNS prefetch
A palavra-chave dns-prefetch do atributo element serve para alertar o navegador ao usuário de que ele pode precisar de um recurso da fonte de destino, para que o navegador possa melhorar a experiência do usuário ao realizar previamente a resolução DNS dessa fonte.
A pré-busca DNS permite que o navegador esteja na página enquanto o usuário navegaExecute resolução DNS em segundo plano。 Dessa forma, a resolução DNS é concluída quando o usuário clica em um link, reduzindo a latência. A pré-busca DNS de uma determinada URL pode ser feita adicionando rel="dns-prefetch' às propriedades de uma tag de link; recomendamos lidar com fontes do Google, Google Analytics e CDN.
"As requisições DNS têm muito pouco tráfego de largura de banda, mas a latência pode ser alta, especialmente em dispositivos móveis. DNS especificado por pré-busca pode reduzir significativamente a latência em certos cenários, como quando um usuário clica em um link. Às vezes, até mesmo um atraso de um segundo pode ser reduzido - Mozilla Developer Network"
A sintaxe é a seguinte:
Documentação:O login do hiperlink está visível.
Pré-carregamento pré-carregado
O valor de preload da propriedade element permite que você declare uma busca em HTML, especificando os recursos que a página precisará em breve, e você deve começar a carregar cedo no ciclo de vida da página, antes que o principal mecanismo de renderização do navegador comece. Isso garante que eles estejam disponíveis mais cedo e menos propensos a bloquear a renderização da página, melhorando o desempenho. Mesmo que o nome contenha o termo load, ele não carrega nem executa o script, apenas o agenda para baixar e armazenar em cache com prioridade maior.
Preload é um novo padrão web que controla como recursos específicos são carregados, uma atualização para o prefetch de subrecursos, que foi descontinuado em janeiro de 2016. Esse comando pode <link> ser usado em , por exemplo, <link rel="preload">. Em geral, é melhor usar o pré-carregamento para carregar seus recursos mais importantes, como imagens, CSS, JavaScript e arquivos de fonte. Isso não deve ser confundido com a pré-carga do navegador, que apenas pré-carrega recursos declarados em HTML. A diretiva de pré-carregamento na verdade supera essa limitação e permite pré-carregar recursos definidos em CSS e JavaScript, além de permitir decisões sobre quando aplicar cada recurso.
O Precarregamento difere do pré-busca porque foca na página atual e carrega recursos com alta prioridade, enquanto o Precarregamento foca no recurso que a próxima página carregará e carrega com baixa prioridade. Também note que o pré-carregamento não bloqueia o evento de onload da janela.
Muitos tipos diferentes de conteúdo podem ser pré-carregados. Os valores possíveis como propriedades são:
áudio: Um arquivo de áudio, geralmente usado para <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: O recurso a ser incorporado <embed>no elemento.
fetch: Um recurso a ser acessado via fetch ou requisição XHR, como um arquivo ArrayBuffer ou JSON.
font: 字体文件。
imagem: Arquivo de imagem.
objeto: O recurso a ser embutido <object>no elemento.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
trabalhador: Um trabalhador web JavaScript ou trabalhador compartilhado.
Vídeo: um arquivo de vídeo, geralmente usado para <video>.
A sintaxe é a seguinte:
Documentação:O login do hiperlink está visível.
|
Publicado em 26/09/2022 21:45:08
|
|
|
|
Publicado em 28/09/2022 08:54:26
|
