path: root/files/pt-br/orphaned/web/html/preloading_content/index.html

---
title: Preloading content with rel="preload"
slug: orphaned/Web/HTML/Preloading_content
translation_of: Web/HTML/Preloading_content
original_slug: Web/HTML/Preloading_content
---
<p class="summary">O valor <code>preload</code> do atributo <code><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/link#attr-rel">rel</a></code> do elemento <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/link" title="O Elemento HTML &lt;link> especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação. Este elemento é mais usado para vincular as folhas de estilo."><code>&lt;link&gt;</code></a> permite que você escreva solicitações de busca declarativas em seu elemento <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/head" title="The HTML &lt;head> elemento providencia informações gerais (metadados) sobre  document, incluindo seu título e links para scripts e folhas de estilos."><code>&lt;head&gt;</code></a> do HTML, especificando recursos que suas páginas vão precisar logo após o carregamento. Você também pode querer que estes recursos sejam pré-carregados no início do ciclo de vida da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como <code>preload</code> funciona.</p>

<h2 id="O_básico">O básico</h2>

<p>Você comumente usa o elemento <code>&lt;link&gt;</code> quando carrega um arquivo de estilo CSS para sua pagina com:</p>

<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles/main.css"&gt;</pre>

<p>No entanto, aqui nós usamos <code>rel</code> com valor <code>preload</code>, que transforma o elemento <code>&lt;link&gt;</code> em um <em>preloader</em> para praticamente qualquer recurso que você precisar. Você também precisa especificar</p>

<ul>
 <li>o caminho para o recurso a ser pré-carregado, no atributo {{htmlattrxref("href", "link")}}</li>
 <li>o tipo de recurso que vc esta pré-carregando, no atributo {{htmlattrxref("as", "link")}}.</li>
</ul>

<p>Um exemplo simples pode se parecer com o seguinte (veja seus <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS and CSS example source</a>, e <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">also live</a>):</p>

<pre class="brush: html notranslate">&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;JS and CSS preload example&lt;/title&gt;

  &lt;link rel="preload" href="style.css" as="style"&gt;
  &lt;link rel="preload" href="main.js" as="script"&gt;

  &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;bouncing balls&lt;/h1&gt;
  &lt;canvas&gt;&lt;/canvas&gt;

  &lt;script src="main.js"&gt;&lt;/script&gt;
&lt;/body&gt;</pre>

<p>Aqui estamos pré-carregando seus arquivos CSS e JavaScript de forma que estarão disponíveis assim que forem necessários mais tarde durante a renderização da página. Este exemplo é um pouco trivial, visto que o browser provavelmente descobre os elementos <code>&lt;link rel="stylesheet"&gt;</code>  e <code>&lt;script&gt;</code> no mesmo pedaço de HTML que os preloads, mas o benefício pode ser visto mais claramente, quanto mais tarde os recursos são descobertos e quanto maiores forem eles. Por exemplo:</p>

<ul>
 <li>Os recursos apontados de dentro de um arquivo CSS, como fontes ou imagens;</li>
 <li>Recursos que podem ser solicitados pelo JavaScript, como JSON, scripts importados ou web workers;</li>
 <li>Imagens maiores e arquivos de vídeo.</li>
</ul>

<p><code>preload</code> também possui outras vantagens. Usando o atributo <code>as</code> para especificar o tipo de conteúdo a ser pre-carregado permite que o browser:</p>

<ul>
 <li>Priorize o carregamento de recursos com maior precisão;</li>
 <li id="tw-target-text">Corresponda solicitações futuras, reutilizando o mesmo recurso, se apropriado;</li>
 <li>Aplique a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">content security policy</a> adequada ao recurso;</li>
 <li>Defina os cabeçalhos corretos de {{HTTPHeader("Accept")}}.</li>
</ul>

<h3 id="Qual_tipo_de_conteúdo_pode_ser_pré-carregado">Qual tipo de conteúdo pode ser pré-carregado?</h3>

<p>Muitos diferentes tipos de conteúdo podem ser pré-carregados. Os valores possíveis para o atributo <code>as</code> são os seguintes:</p>

<ul>
 <li><code>audio</code>: Arquivo de áudio, como usados geralmente em {{htmlelement("audio")}} .</li>
 <li><code>document</code>: Um documento HTML destinado a ser incorporado dentro de um {{htmlelement("frame")}} ou {{htmlelement("iframe")}}.</li>
 <li><code>embed</code>: Recurso destinado a ser incorporado dentro de um elemento {{htmlelement("embed")}}.</li>
 <li><code>fetch</code>: Recurso a ser acessado por um fetch ou XHR request, como um ArrayBuffer ou arquivo JSON.</li>
 <li><code>font</code>: Arquivo de fonte.</li>
 <li><code>image</code>: Arquivo de imagem.</li>
 <li><code>object</code>: Recurso a ser incorporado dentro de um elemento {{htmlelement("object")}}.</li>
 <li><code>script</code>: Arquivo JavaScript.</li>
 <li><code>style</code>: Estilo CSS.</li>
 <li><code>track</code>: Arquivo webVTT.</li>
 <li><code>worker</code>: Um web worker JavaScript ou shared worker.</li>
 <li><code>video</code>: Arquivo de vídeo, usualmente usado em {{htmlelement("video")}} .</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: Você pode ler um pouco mais sobre estes valores e os recursos da web que eles esperam consumir na especificação Preload — veja <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>. Observe também que a lista completa de valores que o atributo <code>as</code>  pode assumir é regida pelas definiçoes nas especificaçoes Fetch — veja <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>.</p>
</div>

<h2 id="Incluindo_um_tipo_MIME">Incluindo um tipo MIME</h2>

<p><code>&lt;link&gt;</code> pode aceitar um atributo {{htmlattrxref("type", "link")}}, o qual contém o MIME type do recurso para o qual o elemento está apontando. Isto é especialmente útil quando pre-carregando recursos — o browser usará o valor do atributo <code>type</code> para trabalhar se ele suportar o recurso, e irá somente iniciar o carregamento se este for o caso, ignorando se não for.</p>

<p>Você pode ver um exemplo disto no nosso exemplo de video (veja o <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">full source code</a>, e também <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">the live version</a>):</p>

<pre class="brush: html notranslate">&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Video preload example&lt;/title&gt;

  &lt;link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;video controls&gt;
    &lt;source src="sintel-short.mp4" type="video/mp4"&gt;
    &lt;source src="sintel-short.webm" type="video/webm"&gt;
    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="sintel-short.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
  &lt;/video&gt;
&lt;/body&gt;</pre>

<p>Então neste caso, navegadores que suportem MP4s vão pré-carregar e usar MP4, fazendo o reprodutor de video esperançosamente mais suave/mais responsivo para os usuários. Browsers que não suportem MP4 podem continuar carregando versao WebM, mas não tem as vantagens do pré-carregamento. Isto mostra como conteudo pré-carregado pode ser combinado com a filosofia de aprimoramento progressivo.</p>

<h2 id="Buscas_de_origem_cruzada">Buscas de origem cruzada</h2>

<p>Se você tem no seu site as configurações de <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> funcionando corretamente, você pode pré-carregar com sucesso recursos de origem cruzada, desde que você defina um atributo {{htmlattrxref("crossorigin","link")}} no seu elemento <code>&lt;link&gt;</code>.</p>

<p dir="ltr" id="tw-target-text">Um caso interessante em que isso se aplica mesmo se a busca não é de origem cruzada é arquivos de fonte. Por várias razões, elas precisam ser buscadas usando o modo anônimo CORS (veja <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a> se você esta interesado em todos os detalhes).</p>

<p>Vamos usar este caso como um exemplo, em primeiro lugar porque o carregamento de fontes é realmente um bom caso de uso para pré-carregamento e, em segundo lugar, porque é mais fácil do que configurar um exemplo de solicitação de origem cruzada. Voce pode ver o exemplo completo no <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p>

<pre class="brush: html notranslate">&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Web font example&lt;/title&gt;

  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"&gt;
  &lt;link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"&gt;

  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt;
&lt;body&gt;
  ...
&lt;/body&gt;</pre>

<p>Você verá aqui que não apenas estamos fornecendo as dicas do tipo MIME nos atributos de tipo, mas também estamos fornecendo o atributo  <code>crossorigin</code> para lidar com os problemas de CORS..</p>

<h2 id="Adicionando_media">Adicionando media</h2>

<p>Um bom recurso de alemento <code>&lt;link&gt;</code> é sua abilidade de aceitar atributos {{htmlattrxref("media", "link")}}. Estes podem aceitar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types">media types</a> ou full-blown <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, permitindo que você faça o pré-carregamento responsivo!</p>

<p>Vamos ver um exemplo simples (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</a>):</p>

<pre class="brush: html notranslate">&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Responsive preload example&lt;/title&gt;

  &lt;link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"&gt;
  &lt;link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"&gt;

  &lt;link rel="stylesheet" href="main.css"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;header&gt;
    &lt;h1&gt;My site&lt;/h1&gt;
  &lt;/header&gt;

  &lt;script&gt;
    var mediaQueryList = window.matchMedia("(max-width: 600px)");
    var header = document.querySelector('header');

    if(mediaQueryList.matches) {
      header.style.backgroundImage = 'url(bg-image-narrow.png)';
    } else {
      header.style.backgroundImage = 'url(bg-image-wide.png)';
    }
  &lt;/script&gt;
&lt;/body&gt;</pre>

<p>Você verá que estamos incluindo atributos de mídia em nossos &lt;link&gt; elementos, de modo que um estreita imagem é pre-carregada se o usuario estiver em um dispositivo de tela estreita, e uma imagem mais ampla é carregada se eles estiverem em um dispositivo de tela maior. Ainda precisamos anexar a imagem correta ao cabeçalho, dependendo do resultado — nos usamos {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} para fazer isso (veja <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a> para mais informaçoes sobre isso).</p>

<p>Isso torna muito mais provável que a fonte estará disponível no momento em que a renderização da página for concluída, reduzindo os problemas de FOUT (flash de texto sem estilo).</p>

<p>Note que isso não precisa ser limitado a imagens, ou até mesmo arquivos do mesmo tipo - pense grande! Talvez você pré-carregue e exiba um diagrama SVG simples se o usuário estiver em uma tela estreita em que a largura de banda e CPU é potencialmente mais limitada ou pré-carregue um bloco complexo de JavaScript e use-o para renderizar um modelo 3D interativo se os recursos do usuário forem mais abundantes.</p>

<h2 id="Scripting_and_preloads">Scripting and preloads</h2>

<p>Outra coisa legal sobre preloads é que você pode executá-los completamente com script, se desejar. Por exemplo, aqui estamos criando uma instancia {{domxref("HTMLLinkElement")}}, em seguida anexando-o ao DOM:</p>

<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span>
preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span>
preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span>
document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span>
</code></pre>

<p>Isso significa que o navegador pré-carregará o arquivo JavaScript, mas ainda não o utilizará.</p>

<p>Para usalo, você poderia fazer isso quando desejado:</p>

<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span>
document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span>
</code></pre>

<p>Isso é útil quando você deseja pré-carregar um script, mas adia executá-lo até exatamente quando precisar.</p>

<h2 id="Outros_mecanismos_de_pré-carregamento_de_recursos">Outros mecanismos de pré-carregamento de recursos</h2>

<p dir="ltr" id="tw-target-text">Existem outros recursos de pré-carregamento, mas nenhum é tão adequado ao propósito  <code>&lt;link rel="preload"&gt;</code>:</p>

<ul>
 <li><code>&lt;link rel="prefetch"&gt;</code><br>
  tem sido suportado nos navegadores por um longo tempo, mas destina-se à pré-busca de recursos que serão usados ​​na próxima navegação / carregamento da página (por exemplo, quando você vai para a próxima página). Isso é bom, mas não é útil para a página atual! Além disso, os navegadores darão aos recursos de pré-busca uma prioridade menor que os pré-carregados - a página atual é mais importante que a próxima. veja <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> para mais detalhes.</li>
 <li><code>&lt;link rel="prerender"&gt;</code>
  <p dir="ltr" id="tw-target-text">é usado para renderizar a página da Web especificada em segundo plano, acelerando o carregamento da página se o usuário navegar para ela. Devido ao potencial de desperdiçar largura de banda dos usuários, Chrome trata<code>prerender</code> como um <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a>.</p>
 </li>
 <li><code>&lt;link rel="subresource"&gt;</code> {{non-standard_inline}}
  <p dir="ltr" id="tw-target-text">foi suportado no Chrome há algum tempo e tinha a intenção de lidar com recursos de pré-carregamento para o carregamento da página / navegação atual, mas tinha um problema - não havia como calcular uma prioridade para buscar os itens (como não existia naquela época ), então todos acabaram sendo buscados com pouca prioridade, o que não ajudou a situação.</p>
 </li>
 <li>
  <p dir="ltr">Há vários carregadores de recursos baseados em script disponíveis, mas eles não têm nenhum poder sobre a fila de priorização de busca do navegador e estão sujeitos aos mesmos problemas de desempenho.</p>
 </li>
</ul>

<h2 id="Specifications" name="Specifications">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td>
   <td>{{Spec2('Preload')}}</td>
   <td>mais detalhes sobre  <code>preload</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>definições de <code>rel=preload</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{Compat("html.elements.link.rel.preload")}}</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li>
</ul>

<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p>