diff options
Diffstat (limited to 'files/pt-br/orphaned/web/html')
| -rw-r--r-- | files/pt-br/orphaned/web/html/preloading_content/index.html | 240 |
1 files changed, 240 insertions, 0 deletions
diff --git a/files/pt-br/orphaned/web/html/preloading_content/index.html b/files/pt-br/orphaned/web/html/preloading_content/index.html new file mode 100644 index 0000000000..f867f03920 --- /dev/null +++ b/files/pt-br/orphaned/web/html/preloading_content/index.html @@ -0,0 +1,240 @@ +--- +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 <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><link></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 <head> elemento providencia informações gerais (metadados) sobre document, incluindo seu título e links para scripts e folhas de estilos."><code><head></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><link></code> quando carrega um arquivo de estilo CSS para sua pagina com:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> + +<p>No entanto, aqui nós usamos <code>rel</code> com valor <code>preload</code>, que transforma o elemento <code><link></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"><head> + <meta charset="utf-8"> + <title>JS and CSS preload example</title> + + <link rel="preload" href="style.css" as="style"> + <link rel="preload" href="main.js" as="script"> + + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <h1>bouncing balls</h1> + <canvas></canvas> + + <script src="main.js"></script> +</body></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><link rel="stylesheet"></code> e <code><script></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><link></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"><head> + <meta charset="utf-8"> + <title>Video preload example</title> + + <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> +</head> +<body> + <video controls> + <source src="sintel-short.mp4" type="video/mp4"> + <source src="sintel-short.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> + </video> +</body></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><link></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"><head> + <meta charset="utf-8"> + <title>Web font example</title> + + <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> + + <link href="style.css" rel="stylesheet" type="text/css"> +</head> +<body> + ... +</body></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><link></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"><head> + <meta charset="utf-8"> + <title>Responsive preload example</title> + + <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> + <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> + + <link rel="stylesheet" href="main.css"> +</head> +<body> + <header> + <h1>My site</h1> + </header> + + <script> + 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)'; + } + </script> +</body></pre> + +<p>Você verá que estamos incluindo atributos de mídia em nossos <link> 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><link rel="preload"></code>:</p> + +<ul> + <li><code><link rel="prefetch"></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><link rel="prerender"></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><link rel="subresource"></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="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<p class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, por favor veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um pedido de envio.</p> + +<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> |