From 4857e0d372324abdf8f599d5e5da6bce63568c17 Mon Sep 17 00:00:00 2001 From: Larissa Iurk Leal Date: Fri, 22 Oct 2021 23:15:26 -0300 Subject: [PATCH 01/10] feat(script-async-defer): translate article, intro and defer parts --- .../02-script-async-defer/article.md | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index 22497e207..3bcc011ae 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -1,80 +1,80 @@ # Scripts: async, defer -In modern websites, scripts are often "heavier" than HTML: their download size is larger, and processing time is also longer. +Em sites modernos, os scripts geralmente são "mais pesados" do que o HTML: seu tamanho de download é maior e o tempo de processamento também é maior. -When the browser loads HTML and comes across a `` tag, it can't continue building the DOM. It must execute the script right now. The same happens for external scripts ``: the browser must wait for the script to download, execute the downloaded script, and only then can it process the rest of the page. +Quando o navegador carrega HTML e encontra uma tag ``, ele não pode continuar construindo o DOM. Ele deve executar o script no momento exato que o encontra. O mesmo acontece com scripts externos ``: o navegador deve aguardar o download do script, executar o script baixado e só então pode processar o resto da página em seguida. -That leads to two important issues: +Isso leva a duas questões importantes: -1. Scripts can't see DOM elements below them, so they can't add handlers etc. -2. If there's a bulky script at the top of the page, it "blocks the page". Users can't see the page content till it downloads and runs: +1. Os scripts não conseguem ver os elementos da DOM abaixo deles, então não conseguem manipular eventos, etc. +2. Se houver um script volumoso no topo da página, ele "bloqueia a página". Os usuários não podem ver o conteúdo da página até que ele faça o download e execute: ```html run height=100 -

...content before script...

+

...conteúdo antes do script...

- -

...content after script...

+ +

...conteúdo depois do script...

``` - -There are some workarounds to that. For instance, we can put a script at the bottom of the page. Then it can see elements above it, and it doesn't block the page content from showing: +Existem algumas soluções alternativas para esses problemas. Por exemplo, podemos colocar um script no final da página. Assim, ele pode ver os elementos acima dele e consequentemente não bloqueia a exibição do conteúdo da página: ```html - ...all content is above the script... + ...todo o conteúdo acima do script... ``` -But this solution is far from perfect. For example, the browser notices the script (and can start downloading it) only after it downloaded the full HTML document. For long HTML documents, that may be a noticeable delay. +Mas essa solução está longe de ser perfeita. Por exemplo, o navegador percebe o script (e pode começar a baixá-lo) somente depois de baixar o documento HTML completo. Para documentos HTML longos, isso pode ser um atraso perceptível para o usuário. -Such things are invisible for people using very fast connections, but many people in the world still have slow internet speeds and use a far-from-perfect mobile internet connection. +Essas coisas são invisíveis para pessoas que usam conexões de internet muito rápidas, mas muitas pessoas no mundo ainda têm velocidades lentas e usam uma conexão de internet móvel longe de ser perfeita. -Luckily, there are two ` - -

...content after script...

+ +

...conteúdo depois do script...

``` -In other words: +Em outras palavras: -- Scripts with `defer` never block the page. -- Scripts with `defer` always execute when the DOM is ready (but before `DOMContentLoaded` event). +- Scripts com `defer` nunca bloqueiam a página. +- Scripts com `defer` sempre são executados quando o DOM está pronto (mas antes do evento `DOMContentLoaded`). -The following example demonstrates the second part: +O exemplo a seguir demonstra a segunda parte: ```html run height=100 -

...content before scripts...

+

...conteúdo antes do script...

-

...content after scripts...

+

...conteúdo depois do script...

``` -1. The page content shows up immediately. -2. `DOMContentLoaded` event handler waits for the deferred script. It only triggers when the script is downloaded and executed. +1. O conteúdo da página aparece imediatamente. +2. O manipulador de eventos `DOMContentLoaded` espera pelo script com a tag defer. O evento é disparado só quando o script é baixado e executado. + +**Os scripts com a tag defer mantêm sua ordem relativa, assim como os scripts normais.** -**Deferred scripts keep their relative order, just like regular scripts.** +Digamos que temos dois scripts com a tag defer: o `long.js` e o `small.js`: -Let's say, we have two deferred scripts: the `long.js` and then `small.js`: ```html @@ -87,8 +87,8 @@ Browsers scan the page for scripts and download them in parallel, to improve per That may be important for cases when we need to load a JavaScript library and then a script that depends on it. -```smart header="The `defer` attribute is only for external scripts" -The `defer` attribute is ignored if the ` -

...content after scripts...

+

...conteúdo depois dos scripts...

``` -- The page content shows up immediately: `async` doesn't block it. -- `DOMContentLoaded` may happen both before and after `async`, no guarantees here. -- A smaller script `small.js` goes second, but probably loads before `long.js`, so `small.js` runs first. Although, it might be that `long.js` loads first, if cached, then it runs first. In other words, async scripts run in the "load-first" order. +- O conteúdo da página aparece imediatamente: `async` não o bloqueia. +- `DOMContentLoaded` pode acontecer antes e depois de `async`, sem garantias aqui. +- Um script menor `small.js` está em segundo lugar, mas provavelmente carrega antes de `long.js`, então `small.js` é executado primeiro. Embora, pode ser que `long.js` carregue primeiro, se armazenado em cache, ele executa primeiro. Em outras palavras, os scripts `async` são executados na ordem que "carregar primeiro". -Async scripts are great when we integrate an independent third-party script into the page: counters, ads and so on, as they don't depend on our scripts, and our scripts shouldn't wait for them: +Os scripts `async` são ótimos quando integramos um script independente de terceiros na página: contadores, anúncios e assim por diante, pois eles não dependem de nossos scripts, e nossos scripts não devem esperar por eles: ```html - + ``` -## Dynamic scripts +## Scripts dinâmicos -There's one more important way of adding a script to the page. +Existe mais uma maneira importante de adicionar um script à página. -We can create a script and append it to the document dynamically using JavaScript: +Podemos criar um script e anexá-lo ao documento dinamicamente usando JavaScript: ```js run let script = document.createElement('script'); @@ -145,19 +145,19 @@ script.src = "/article/script-async-defer/long.js"; document.body.append(script); // (*) ``` -The script starts loading as soon as it's appended to the document `(*)`. +O script começa a carregar assim que é anexado ao documento `(*)`. -**Dynamic scripts behave as "async" by default.** +**Os scripts dinâmicos se comportam como "async" por padrão.** -That is: -- They don't wait for anything, nothing waits for them. -- The script that loads first -- runs first ("load-first" order). +Resumindo: +- Eles não esperam nada, nada os espera. +- O script que carrega primeiro -- é executado primeiro (ordem que "carregar primeiro"). -This can be changed if we explicitly set `script.async=false`. Then scripts will be executed in the document order, just like `defer`. +Isso pode ser alterado se definirmos explicitamente `script.async=false`. Em seguida, os scripts serão executados na ordem do documento, assim como `defer`. -In this example, `loadScript(src)` function adds a script and also sets `async` to `false`. +Neste exemplo, a função `loadScript(src)` adiciona um script e também define `async` como `false`. -So `long.js` always runs first (as it's added first): +Portanto, `long.js` sempre executa primeiro (como é adicionado primeiro): ```js run function loadScript(src) { @@ -172,10 +172,9 @@ loadScript("/article/script-async-defer/long.js"); loadScript("/article/script-async-defer/small.js"); ``` -Without `script.async=false`, scripts would execute in default, load-first order (the `small.js` probably first). - -Again, as with the `defer`, the order matters if we'd like to load a library and then another script that depends on it. +Sem `script.async=false`, os scripts seriam executados na ordem padrão de carregamento primeiro (o `small.js` provavelmente primeiro). +Novamente, como com o `defer`, a ordem importa se quisermos carregar uma biblioteca e depois outro script que dependa dela. ## Summary From 785b8fa03218f61e13a26204a8543cce8fdc7236 Mon Sep 17 00:00:00 2001 From: Larissa Iurk Leal Date: Fri, 22 Oct 2021 23:45:34 -0300 Subject: [PATCH 03/10] feat(script-async-defer): translate article, summary --- .../02-script-async-defer/article.md | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index 2492c9622..406295323 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -167,7 +167,7 @@ function loadScript(src) { document.body.append(script); } -// long.js runs first because of async=false +// long.js roda primeiro por causa do async=false loadScript("/article/script-async-defer/long.js"); loadScript("/article/script-async-defer/small.js"); ``` @@ -176,25 +176,24 @@ Sem `script.async=false`, os scripts seriam executados na ordem padrão de carre Novamente, como com o `defer`, a ordem importa se quisermos carregar uma biblioteca e depois outro script que dependa dela. -## Summary +## Resumo -Both `async` and `defer` have one common thing: downloading of such scripts doesn't block page rendering. So the user can read page content and get acquainted with the page immediately. +Ambos `async` e `defer` têm uma coisa em comum: o download dos scripts não bloqueia a renderização da página. Assim, o usuário pode ler o conteúdo da página e familiarizar-se com a página imediatamente. -But there are also essential differences between them: +Mas também existem diferenças essenciais entre eles: -| | Order | `DOMContentLoaded` | +| | Ordem | `DOMContentLoaded` | |---------|---------|---------| -| `async` | *Load-first order*. Their document order doesn't matter -- which loads first runs first | Irrelevant. May load and execute while the document has not yet been fully downloaded. That happens if scripts are small or cached, and the document is long enough. | -| `defer` | *Document order* (as they go in the document). | Execute after the document is loaded and parsed (they wait if needed), right before `DOMContentLoaded`. | +| `async` | *Ordem do que carregar primeiro*. A ordem dos documentos não importa - o que carrega primeiro é executado primeiro | Irrelevante. Pode carregar e executar enquanto o documento ainda não foi totalmente baixado. Isso acontece se os scripts forem pequenos ou armazenados em cache e o documento for longo o suficiente. | +| `defer` | *Ordem do documento* (conforme estão no documento). | Executa depois que o documento é carregado e transformado (eles esperam se for preciso), logo antes do `DOMContentLoaded`. | -In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important. +Na prática, `defer` é usado para scripts que precisam de todo a DOM e/ou sua ordem de execução relativa é importante. -And `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter. +E `async` é usado para scripts independentes, como contadores ou anúncios. E sua ordem de execução relativa não importa. -```warn header="Page without scripts should be usable" -Please note: if you're using `defer` or `async`, then user will see the page *before* the script loads. +```warn header="A página sem scripts deve ser utilizável" +Atenção: se você estiver usando `defer` ou `async`, o usuário verá a página *antes* do script carregar. -In such case, some graphical components are probably not initialized yet. - -Don't forget to put "loading" indication and disable buttons that aren't functional yet. Let the user clearly see what he can do on the page, and what's still getting ready. +Nesse caso, alguns componentes podem não ter inicializado na tela ainda. +Não se esqueça de indicar que eles estão "carregando" e desabilitar os botões que ainda não devem funcionar. Deixe o usuário ver claramente o que ele pode fazer na página e o que ainda está sendo preparado. ``` From 5e694d8e9ae950ae63740aaa815e71286604f75c Mon Sep 17 00:00:00 2001 From: Larissa Iurk Leal Date: Fri, 22 Oct 2021 23:51:48 -0300 Subject: [PATCH 04/10] fix(script-async-defer): translate article --- 2-ui/5-loading/02-script-async-defer/article.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index 406295323..621d853c5 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -1,14 +1,14 @@ # Scripts: async, defer -Em sites modernos, os scripts geralmente são "mais pesados" do que o HTML: seu tamanho de download é maior e o tempo de processamento também é maior. +Em sites modernos, os scripts geralmente são "mais pesados" do que o HTML: seu tamanho para download é maior e o tempo de processamento também é maior. -Quando o navegador carrega HTML e encontra uma tag ``, ele não pode continuar construindo o DOM. Ele deve executar o script no momento exato que o encontra. O mesmo acontece com scripts externos ``: o navegador deve aguardar o download do script, executar o script baixado e só então pode processar o resto da página em seguida. +Quando o navegador carrega o HTML e encontra uma tag ``, ele não pode continuar construindo o DOM. Ele deve executar o script no momento exato que o encontra. O mesmo acontece com scripts externos ``: o navegador deve aguardar o download do script, executar o script baixado e só então pode processar o resto da página. -Isso leva a duas questões importantes: +Isso nos leva a duas questões importantes: 1. Os scripts não conseguem ver os elementos da DOM abaixo deles, então não conseguem manipular eventos, etc. -2. Se houver um script volumoso no topo da página, ele "bloqueia a página". Os usuários não podem ver o conteúdo da página até que ele faça o download e execute: +2. Se houver um script volumoso no topo da página, ele vai "bloqueia a página". Os usuários não podem ver o conteúdo da página até que ele faça o download e execute: ```html run height=100

...conteúdo antes do script...

@@ -18,7 +18,8 @@ Isso leva a duas questões importantes:

...conteúdo depois do script...

``` -Existem algumas soluções alternativas para esses problemas. Por exemplo, podemos colocar um script no final da página. Assim, ele pode ver os elementos acima dele e consequentemente não bloqueia a exibição do conteúdo da página: + +Existem algumas soluções alternativas para esses problemas. Por exemplo, podemos colocar um script no final da página. Assim, ele pode ver os elementos acima dele e consequentemente, não bloqueia a exibição do conteúdo da página: ```html @@ -28,7 +29,7 @@ Existem algumas soluções alternativas para esses problemas. Por exemplo, podem ``` -Mas essa solução está longe de ser perfeita. Por exemplo, o navegador percebe o script (e pode começar a baixá-lo) somente depois de baixar o documento HTML completo. Para documentos HTML longos, isso pode ser um atraso perceptível para o usuário. +Mas essa solução está longe de ser perfeita. Por exemplo, o navegador percebe o script (e pode começar a baixá-lo) somente depois de baixar o documento HTML por completo. Para documentos HTML longos, isso pode ser um atraso perceptível para o usuário. Essas coisas são invisíveis para pessoas que usam conexões de internet muito rápidas, mas muitas pessoas no mundo ainda têm velocidades lentas e usam uma conexão de internet móvel longe de ser perfeita. From 411dded3e4859f011ec63d2fe7b4046388c06634 Mon Sep 17 00:00:00 2001 From: Larissa Iurk Leal Date: Sat, 23 Oct 2021 00:00:42 -0300 Subject: [PATCH 05/10] fix(script-async-defer): translate article --- .../5-loading/02-script-async-defer/article.md | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index 621d853c5..a3fc39c17 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -37,7 +37,7 @@ Felizmente, existem dois atributos ` ``` -Browsers scan the page for scripts and download them in parallel, to improve performance. So in the example above both scripts download in parallel. The `small.js` probably finishes first. +Os navegadores examinam a página em busca de scripts e os baixam em paralelo para melhorar o desempenho. Portanto, no exemplo acima, os dois scripts são baixados em paralelo. O `small.js` provavelmente termina primeiro. -...But the `defer` attribute, besides telling the browser "not to block", ensures that the relative order is kept. So even though `small.js` loads first, it still waits and runs after `long.js` executes. +... Mas o atributo `defer`, além de dizer ao navegador "não bloquear", garante que a ordem relativa seja mantida. Portanto, embora `small.js` carregue primeiro, ele ainda espera e executa após a execução de `long.js`. -That may be important for cases when we need to load a JavaScript library and then a script that depends on it. +Isso pode ser importante para os casos em que precisamos carregar uma biblioteca JavaScript e, em seguida, um script que depende dela. ```smart header="O atributo `defer` é apenas para scripts externos" O atributo `defer` é ignorado se a tag ``, ele Isso nos leva a duas questões importantes: -1. Os scripts não conseguem ver os elementos da DOM abaixo deles, então não conseguem manipular eventos, etc. -2. Se houver um script volumoso no topo da página, ele vai "bloqueia a página". Os usuários não podem ver o conteúdo da página até que ele faça o download e execute: +1. Os scripts não conseguem ver os elementos do DOM abaixo deles, então não conseguem manipular eventos, etc. +2. Se houver um script volumoso no topo da página, ele vai "bloquear a página". Os usuários não podem ver o conteúdo da página até que o script seja baixado e executado. ```html run height=100

...conteúdo antes do script...

@@ -53,7 +53,7 @@ Aqui está o mesmo exemplo acima, mas utilizando o `defer`: Em outras palavras: - Scripts com `defer` nunca bloqueiam a página. -- Scripts com `defer` sempre são executados quando a DOM está pronta (mas antes do evento `DOMContentLoaded`). +- Scripts com `defer` sempre são executados quando a DOM está pronto (mas antes do evento `DOMContentLoaded`). O exemplo a seguir demonstra a segunda parte: @@ -81,7 +81,7 @@ Digamos que temos dois scripts com a tag defer: o `long.js` e o `small.js`: ``` -Os navegadores examinam a página em busca de scripts e os baixam em paralelo para melhorar o desempenho. Portanto, no exemplo acima, os dois scripts são baixados em paralelo. O `small.js` provavelmente termina primeiro. +Os navegadores examinam a página em busca de scripts e os baixam em paralelo para melhorar o desempenho. Portanto, no exemplo acima, os dois scripts são baixados em paralelo. O `small.js` provavelmente terminará primeiro. ... Mas o atributo `defer`, além de dizer ao navegador "não bloquear", garante que a ordem relativa seja mantida. Portanto, embora `small.js` carregue primeiro, ele ainda espera e executa após a execução de `long.js`. @@ -103,7 +103,7 @@ O atributo `async` significa que um script é completamente independente: - `DOMContentLoaded` pode acontecer antes de um script `async` (se um script `async` terminar de carregar depois que a página for concluída) - ... ou após um script `async` (se um script `async` for curto ou estiver em cache HTTP) -Em outras palavras, os scripts `async` são carregados em segundo plano e executados quando prontos. A DOM e outros scripts não esperam por eles e não esperam por nada. Um script totalmente independente que é executado quando carregado. Tão simples quanto parece, não é mesmo? +Em outras palavras, os scripts `async` são carregados em segundo plano e executados quando prontos. O DOM e outros scripts não esperam por eles e não esperam por nada. Um script totalmente independente que é executado quando carregado. Tão simples quanto parece, não é mesmo? Aqui está um exemplo parecido ao que vimos com o `defer`: dois scripts `long.js` e `small.js`, mas agora com `async` em vez de `defer`. @@ -129,7 +129,7 @@ Eles não esperam um pelo outro. Qualquer um que carregue primeiro (provavelment Os scripts `async` são ótimos quando integramos um script independente de terceiros na página: contadores, anúncios e assim por diante, pois eles não dependem de nossos scripts, e nossos scripts não devem esperar por eles: ```html - + ``` @@ -174,7 +174,7 @@ loadScript("/article/script-async-defer/small.js"); Sem `script.async=false`, os scripts seriam executados na ordem padrão de carregamento primeiro (o `small.js` provavelmente primeiro). -Novamente, como com o `defer`, a ordem importa se quisermos carregar uma biblioteca e depois outro script que dependa dela. +Novamente, como acontece com o `defer`, a ordem é importante se quisermos carregar uma biblioteca e depois outro script que dependa dela. ## Resumo @@ -188,7 +188,7 @@ Mas também existem diferenças essenciais entre eles: | `async` | *Ordem do que carregar primeiro*. A ordem dos documentos não importa - o que carrega primeiro é executado primeiro | Irrelevante. Pode carregar e executar enquanto o documento ainda não foi totalmente baixado. Isso acontece se os scripts forem pequenos ou armazenados em cache e o documento for longo o suficiente. | | `defer` | *Ordem do documento* (conforme estão no documento). | Executa depois que o documento é carregado e transformado (eles esperam se for preciso), logo antes do `DOMContentLoaded`. | -Na prática, `defer` é usado para scripts que precisam de todo a DOM e/ou sua ordem de execução relativa é importante. +Na prática, `defer` é usado para scripts que precisam de todo o DOM e/ou sua ordem de execução relativa é importante. E `async` é usado para scripts independentes, como contadores ou anúncios. E sua ordem de execução relativa não importa. From 582270ca5bf8b22070718dd61b392e5544a7c068 Mon Sep 17 00:00:00 2001 From: Jonnathan Santos Date: Sun, 17 Mar 2024 15:57:31 -0300 Subject: [PATCH 10/10] refactor: add pending translation after update with master --- 2-ui/5-loading/02-script-async-defer/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index c94aef52c..36434aa50 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -137,9 +137,9 @@ Os scripts `async` são ótimos quando integramos um script independente de terc Assim como `defer`, o atributo `async` é ignorado se a tag `