From 4d3b1c2c79113786e001e3bec551205cd34f818a Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 21 May 2021 00:42:40 +0000 Subject: [CRON] sync translated content --- files/pt-br/_redirects.txt | 2 + files/pt-br/_wikihistory.json | 36 ++-- .../web/html/preloading_content/index.html | 240 +++++++++++++++++++++ .../web/svg/element/color-profile/index.html | 96 +++++++++ files/pt-br/web/html/preloading_content/index.html | 239 -------------------- .../pt-br/web/svg/element/color-profile/index.html | 95 -------- 6 files changed, 356 insertions(+), 352 deletions(-) create mode 100644 files/pt-br/orphaned/web/html/preloading_content/index.html create mode 100644 files/pt-br/orphaned/web/svg/element/color-profile/index.html delete mode 100644 files/pt-br/web/html/preloading_content/index.html delete mode 100644 files/pt-br/web/svg/element/color-profile/index.html (limited to 'files/pt-br') diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 488bea6ccb..4c036c3924 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -776,6 +776,7 @@ /pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/HTML/Inline_elemente /pt-BR/docs/Web/HTML/Inline_elements /pt-BR/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /pt-BR/docs/Glossary/speculative_parsing +/pt-BR/docs/Web/HTML/Preloading_content /pt-BR/docs/orphaned/Web/HTML/Preloading_content /pt-BR/docs/Web/HTML/ReferenciaHTML /pt-BR/docs/Web/HTML/Reference /pt-BR/docs/Web/HTML/Using_HTML5_audio_and_video /pt-BR/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /pt-BR/docs/Web/HTML/favicon /pt-BR/docs/orphaned/Web/HTML/favicon @@ -859,6 +860,7 @@ /pt-BR/docs/Web/MathML/Exemplos /pt-BR/docs/Web/MathML/Examples /pt-BR/docs/Web/Performance/caminho_de_renderizacao_critico /pt-BR/docs/Web/Performance/Critical_rendering_path /pt-BR/docs/Web/Progressive_web_apps/Introdução /pt-BR/docs/Web/Progressive_web_apps/Introduction +/pt-BR/docs/Web/SVG/Element/color-profile /pt-BR/docs/orphaned/Web/SVG/Element/color-profile /pt-BR/docs/Web/SVG/Element/texto /pt-BR/docs/Web/SVG/Element/text /pt-BR/docs/Web/SVG/Intensivo_de_Namespaces /pt-BR/docs/Web/SVG/Namespaces_Crash_Course /pt-BR/docs/Web/Security/Básico_de_Segurança_da_Informação /pt-BR/docs/orphaned/Web/Security/Information_Security_Basics diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index d3a4c03187..c175f3c7b0 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -10397,17 +10397,6 @@ "rennan.martini" ] }, - "Web/HTML/Preloading_content": { - "modified": "2020-10-15T22:14:26.980Z", - "contributors": [ - "BeatrizCavallieri", - "w4rlooc", - "duduindo", - "philgruneich", - "tuliocribeiro", - "Expablo" - ] - }, "Web/HTML/Quirks_Mode_and_Standards_Mode": { "modified": "2019-03-23T23:05:38.681Z", "contributors": [ @@ -16160,13 +16149,6 @@ "caio" ] }, - "Web/SVG/Element/color-profile": { - "modified": "2019-03-23T22:57:13.667Z", - "contributors": [ - "Sebastianz", - "caio" - ] - }, "Web/SVG/Element/defs": { "modified": "2019-03-23T22:58:41.965Z", "contributors": [ @@ -17303,6 +17285,17 @@ "LeonardoPacheco" ] }, + "orphaned/Web/HTML/Preloading_content": { + "modified": "2020-10-15T22:14:26.980Z", + "contributors": [ + "BeatrizCavallieri", + "w4rlooc", + "duduindo", + "philgruneich", + "tuliocribeiro", + "Expablo" + ] + }, "orphaned/Web/HTML/favicon": { "modified": "2019-05-05T00:27:21.844Z", "contributors": [ @@ -17337,6 +17330,13 @@ "LuisAraujo" ] }, + "orphaned/Web/SVG/Element/color-profile": { + "modified": "2019-03-23T22:57:13.667Z", + "contributors": [ + "Sebastianz", + "caio" + ] + }, "orphaned/Web/Security/Information_Security_Basics": { "modified": "2019-03-23T22:21:46.780Z", "contributors": [ 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 +--- +

O valor preload do atributo rel do elemento <link> permite que você escreva solicitações de busca declarativas em seu elemento <head> 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 preload funciona.

+ +

O básico

+ +

Você comumente usa o elemento <link> quando carrega um arquivo de estilo CSS para sua pagina com:

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

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

+ + + +

Um exemplo simples pode se parecer com o seguinte (veja seus JS and CSS example source, e also live):

+ +
<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>
+ +

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 <link rel="stylesheet">  e <script> 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:

+ + + +

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

+ + + +

Qual tipo de conteúdo pode ser pré-carregado?

+ +

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

+ + + +
+

Nota: Você pode ler um pouco mais sobre estes valores e os recursos da web que eles esperam consumir na especificação Preload — veja link element extensions. Observe também que a lista completa de valores que o atributo as  pode assumir é regida pelas definiçoes nas especificaçoes Fetch — veja request destinations.

+
+ +

Incluindo um tipo MIME

+ +

<link> 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 type para trabalhar se ele suportar o recurso, e irá somente iniciar o carregamento se este for o caso, ignorando se não for.

+ +

Você pode ver um exemplo disto no nosso exemplo de video (veja o full source code, e também the live version):

+ +
<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>
+ +

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.

+ +

Buscas de origem cruzada

+ +

Se você tem no seu site as configurações de CORS funcionando corretamente, você pode pré-carregar com sucesso recursos de origem cruzada, desde que você defina um atributo {{htmlattrxref("crossorigin","link")}} no seu elemento <link>.

+ +

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 Font fetching requirements se você esta interesado em todos os detalhes).

+ +

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 source code on GitHub (also see it live):

+ +
<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>
+ +

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  crossorigin para lidar com os problemas de CORS..

+ +

Adicionando media

+ +

Um bom recurso de alemento <link> é sua abilidade de aceitar atributos {{htmlattrxref("media", "link")}}. Estes podem aceitar media types ou full-blown media queries, permitindo que você faça o pré-carregamento responsivo!

+ +

Vamos ver um exemplo simples (see it on GitHub — source code, live example):

+ +
<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>
+ +

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 Testing media queries para mais informaçoes sobre isso).

+ +

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).

+ +

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.

+ +

Scripting and preloads

+ +

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:

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

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

+ +

Para usalo, você poderia fazer isso quando desejado:

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+ +

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

+ +

Outros mecanismos de pré-carregamento de recursos

+ +

Existem outros recursos de pré-carregamento, mas nenhum é tão adequado ao propósito  <link rel="preload">:

+ + + +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}mais detalhes sobre  preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}definições de rel=preload.
+ +

Compatibilidade de Browser

+ + + +

{{Compat("html.elements.link.rel.preload")}}

+ +

Veja também

+ + + +

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

diff --git a/files/pt-br/orphaned/web/svg/element/color-profile/index.html b/files/pt-br/orphaned/web/svg/element/color-profile/index.html new file mode 100644 index 0000000000..31261469be --- /dev/null +++ b/files/pt-br/orphaned/web/svg/element/color-profile/index.html @@ -0,0 +1,96 @@ +--- +title: color-profile +slug: orphaned/Web/SVG/Element/color-profile +tags: + - Elemento + - Perfil de Cor + - Referencia + - SVG +translation_of: Web/SVG/Element/color-profile +original_slug: Web/SVG/Element/color-profile +--- +
{{SVGRef}}
+ +

O elemento permite descrever o perfil de cor utilizado para a imagem.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Exemplo

+ +

Atributos

+ +

Atributos globais

+ + + +

Atributos específicos

+ + + +

Interface DOM

+ +

Este elemento implementa a interface do SVGColorProfileElement.

+ +

Compatibilidade dos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
RecursoAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

A tabela é baseada nessas fontes.

diff --git a/files/pt-br/web/html/preloading_content/index.html b/files/pt-br/web/html/preloading_content/index.html deleted file mode 100644 index 6c5165a5c6..0000000000 --- a/files/pt-br/web/html/preloading_content/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Preloading content with rel="preload" -slug: Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content ---- -

O valor preload do atributo rel do elemento <link> permite que você escreva solicitações de busca declarativas em seu elemento <head> 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 preload funciona.

- -

O básico

- -

Você comumente usa o elemento <link> quando carrega um arquivo de estilo CSS para sua pagina com:

- -
<link rel="stylesheet" href="styles/main.css">
- -

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

- - - -

Um exemplo simples pode se parecer com o seguinte (veja seus JS and CSS example source, e also live):

- -
<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>
- -

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 <link rel="stylesheet">  e <script> 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:

- - - -

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

- - - -

Qual tipo de conteúdo pode ser pré-carregado?

- -

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

- - - -
-

Nota: Você pode ler um pouco mais sobre estes valores e os recursos da web que eles esperam consumir na especificação Preload — veja link element extensions. Observe também que a lista completa de valores que o atributo as  pode assumir é regida pelas definiçoes nas especificaçoes Fetch — veja request destinations.

-
- -

Incluindo um tipo MIME

- -

<link> 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 type para trabalhar se ele suportar o recurso, e irá somente iniciar o carregamento se este for o caso, ignorando se não for.

- -

Você pode ver um exemplo disto no nosso exemplo de video (veja o full source code, e também the live version):

- -
<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>
- -

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.

- -

Buscas de origem cruzada

- -

Se você tem no seu site as configurações de CORS funcionando corretamente, você pode pré-carregar com sucesso recursos de origem cruzada, desde que você defina um atributo {{htmlattrxref("crossorigin","link")}} no seu elemento <link>.

- -

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 Font fetching requirements se você esta interesado em todos os detalhes).

- -

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 source code on GitHub (also see it live):

- -
<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>
- -

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  crossorigin para lidar com os problemas de CORS..

- -

Adicionando media

- -

Um bom recurso de alemento <link> é sua abilidade de aceitar atributos {{htmlattrxref("media", "link")}}. Estes podem aceitar media types ou full-blown media queries, permitindo que você faça o pré-carregamento responsivo!

- -

Vamos ver um exemplo simples (see it on GitHub — source code, live example):

- -
<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>
- -

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 Testing media queries para mais informaçoes sobre isso).

- -

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).

- -

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.

- -

Scripting and preloads

- -

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:

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

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

- -

Para usalo, você poderia fazer isso quando desejado:

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

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

- -

Outros mecanismos de pré-carregamento de recursos

- -

Existem outros recursos de pré-carregamento, mas nenhum é tão adequado ao propósito  <link rel="preload">:

- - - -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}mais detalhes sobre  preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}definições de rel=preload.
- -

Compatibilidade de Browser

- - - -

{{Compat("html.elements.link.rel.preload")}}

- -

Veja também

- - - -

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

diff --git a/files/pt-br/web/svg/element/color-profile/index.html b/files/pt-br/web/svg/element/color-profile/index.html deleted file mode 100644 index be238bced6..0000000000 --- a/files/pt-br/web/svg/element/color-profile/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: color-profile -slug: Web/SVG/Element/color-profile -tags: - - Elemento - - Perfil de Cor - - Referencia - - SVG -translation_of: Web/SVG/Element/color-profile ---- -
{{SVGRef}}
- -

O elemento permite descrever o perfil de cor utilizado para a imagem.

- -

Contexto de uso

- -

{{svginfo}}

- -

Exemplo

- -

Atributos

- -

Atributos globais

- - - -

Atributos específicos

- - - -

Interface DOM

- -

Este elemento implementa a interface do SVGColorProfileElement.

- -

Compatibilidade dos navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
RecursoAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

A tabela é baseada nessas fontes.

-- cgit v1.2.3-54-g00ecf