You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In modern websites, scripts are often "heavier" than HTML: their download size is larger, and processing time is also longer.
4
+
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.
5
5
6
-
When the browser loads HTML and comes across a`<script>...</script>` tag, it can't continue building the DOM. It must execute the script right now. The same happens for external scripts `<script src="..."></script>`: the browser must wait for the script to download, execute the downloaded script, and only then can it process the rest of the page.
6
+
Quando o navegador carrega o HTML e encontra uma tag`<script>...</script>`, 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 `<script src="..."></script>`: o navegador deve aguardar o download do script, executar o script baixado e só então pode processar o resto da página.
7
7
8
-
That leads to two important issues:
8
+
Isso nos leva a duas questões importantes:
9
9
10
-
1.Scripts can't see DOM elements below them, so they can't add handlers etc.
11
-
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:
10
+
1.Os scripts não conseguem ver os elementos do DOM abaixo deles, então não conseguem manipular eventos, etc.
11
+
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.
<!--Isso não se torna visível até que o script carregue-->
19
+
<p>...conteúdo depois do script...</p>
20
20
```
21
21
22
-
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:
22
+
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:
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.
32
+
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.
33
33
34
-
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.
34
+
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.
35
35
36
-
Luckily, there are two`<script>`attributes that solve the problem for us: `defer`and`async`.
36
+
Felizmente, existem dois atributos`<script>`que resolvem o problema para nós: `defer`e`async`.
37
37
38
38
## defer
39
39
40
-
The `defer`attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script loads "in the background", and then runs when the DOM is fully built.
40
+
O atributo `defer`diz ao navegador para não esperar pelo script. Em vez disso, o navegador continuará processando o HTML e criando a DOM. O script carrega "em segundo plano" e, em seguida, é executado quando a DOM está totalmente criada.
41
41
42
-
Here's the same example as above, but with`defer`:
42
+
Aqui está o mesmo exemplo acima, mas utilizando o`defer`:
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.
84
+
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.
85
85
86
-
...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.
86
+
... 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`.
87
87
88
-
That may be important for cases when we need to load a JavaScript library and then a script that depends on it.
88
+
Isso pode ser importante para os casos em que precisamos carregar uma biblioteca JavaScript e, em seguida, um script que depende dela.
89
89
90
-
```smart header="The `defer`attribute is only for external scripts"
91
-
The `defer`attribute is ignored if the`<script>`tag has no`src`.
90
+
```smart header="O atributo `defer`é apenas para scripts externos"
91
+
O atributo `defer`é ignorado se a tag`<script>`não possui o atributo`src`.
92
92
```
93
93
94
94
## async
95
95
96
-
The `async` attribute is somewhat like `defer`. It also makes the script non-blocking. But it has important differences in the behavior.
96
+
O atributo `async` é parecido com o `defer`. Ele também não bloqueia a página, mas tem diferenças importantes no seu comportamento.
97
97
98
-
The `async` attribute means that a script is completely independent:
98
+
O atributo `async` significa que um script é completamente independente:
99
99
100
-
- The browser doesn't block on `async` scripts (like `defer`).
101
-
- Other scripts don't wait for `async` scripts, and `async` scripts don't wait for them.
102
-
- `DOMContentLoaded` and async scripts don't wait for each other:
103
-
- `DOMContentLoaded` may happen both before an async script (if an async script finishes loading after the page is complete)
104
-
- ...or after an async script (if an async script is short or was in HTTP-cache)
100
+
- O navegador não bloqueia em scripts `async` (como `defer`).
101
+
- Outros scripts não esperam por scripts `async`, e scripts `async` não esperam por eles.
102
+
- O evento `DOMContentLoaded` e os scripts `async` não esperam um pelo outro:
103
+
- `DOMContentLoaded` pode acontecer antes de um script `async` (se um script `async` terminar de carregar depois que a página for concluída)
104
+
- ... ou após um script `async` (se um script `async` for curto ou estiver em cache HTTP)
105
105
106
-
In other words, `async` scripts load in the background and run when ready. The DOM and other scripts don't wait for them, and they don't wait for anything. A fully independent script that runs when loaded. As simple, as it can get, right?
106
+
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?
107
107
108
-
Here's an example similar to what we've seen with `defer`: two scripts `long.js` and `small.js`, but now with `async` instead of `defer`.
108
+
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`.
109
109
110
-
They don't wait for each other. Whatever loads first (probably `small.js`) -- runs first:
110
+
Eles não esperam um pelo outro. Qualquer um que carregue primeiro (provavelmente `small.js`) - é executado primeiro:
-The page content shows up immediately: `async`doesn't block it.
126
-
-`DOMContentLoaded`may happen both before and after`async`, no guarantees here.
127
-
-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.
125
+
-O conteúdo da página aparece imediatamente: `async`não o bloqueia.
126
+
-`DOMContentLoaded`pode acontecer antes e depois de`async`, sem garantias aqui.
127
+
-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".
128
128
129
-
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:
129
+
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:
130
130
131
131
```html
132
-
<!-- Google Analytics is usually added like this-->
132
+
<!--O Google Analytics geralmente é adicionado assim-->
The script starts loading as soon as it's appended to the document`(*)`.
152
+
O script começa a carregar assim que é anexado ao documento`(*)`.
153
153
154
-
**Dynamic scripts behave as "async" by default.**
154
+
**Os scripts dinâmicos se comportam como "async" por padrão.**
155
155
156
-
That is:
157
-
-They don't wait for anything, nothing waits for them.
158
-
-The script that loads first -- runs first ("load-first" order).
156
+
Resumindo:
157
+
-Eles não esperam nada, nada os espera.
158
+
-O script que carrega primeiro -- é executado primeiro (ordem que "carregar primeiro").
159
159
160
-
This can be changed if we explicitly set `script.async=false`. Then scripts will be executed in the document order, just like`defer`.
160
+
Isso pode ser alterado se definirmos explicitamente `script.async=false`. Em seguida, os scripts serão executados na ordem do documento, assim como`defer`.
161
161
162
-
In this example, `loadScript(src)`function adds a script and also sets`async`to`false`.
162
+
Neste exemplo, a função `loadScript(src)`adiciona um script e também define`async`como`false`.
163
163
164
-
So`long.js`always runs first (as it's added first):
164
+
Portanto,`long.js`sempre executa primeiro (como é adicionado primeiro):
Without`script.async=false`, scripts would execute in default, load-first order (the`small.js`probably first).
179
+
Sem`script.async=false`, os scripts seriam executados na ordem padrão de carregamento primeiro (o`small.js`provavelmente primeiro).
180
180
181
-
Again, as with the `defer`, the order matters if we'd like to load a library and then another script that depends on it.
181
+
Novamente, como acontece com o `defer`, a ordem é importante se quisermos carregar uma biblioteca e depois outro script que dependa dela.
182
182
183
183
184
-
## Summary
184
+
## Resumo
185
185
186
-
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.
186
+
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.
187
187
188
-
But there are also essential differences between them:
188
+
Mas também existem diferenças essenciais entre eles:
189
189
190
-
||Order|`DOMContentLoaded`|
190
+
||Ordem|`DOMContentLoaded`|
191
191
|---------|---------|---------|
192
-
|`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. |
193
-
|`defer`|*Document order* (as they go in the document). |Execute after the document is loaded and parsed (they wait if needed), right before`DOMContentLoaded`. |
192
+
|`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. |
193
+
|`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`. |
194
194
195
-
In practice, `defer`is used for scripts that need the whole DOM and/or their relative execution order is important.
195
+
Na prática, `defer`é usado para scripts que precisam de todo o DOM e/ou sua ordem de execução relativa é importante.
196
196
197
-
And `async`is used for independent scripts, like counters or ads. And their relative execution order does not matter.
197
+
E `async`é usado para scripts independentes, como contadores ou anúncios. E sua ordem de execução relativa não importa.
198
198
199
-
```warn header="Page without scripts should be usable"
200
-
Please note: if you're using `defer` or `async`, then user will see the page *before* the script loads.
199
+
```warn header="A página sem scripts deve ser utilizável"
200
+
Atenção: se você estiver usando `defer` ou `async`, o usuário verá a página *antes* do script carregar.
201
201
202
-
In such case, some graphical components are probably not initialized yet.
202
+
Nesse caso, alguns componentes podem não ter inicializado na tela ainda.
203
203
204
-
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.
205
-
```
204
+
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.
0 commit comments