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
Copy file name to clipboardExpand all lines: 2-ui/5-loading/02-script-async-defer/article.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -7,8 +7,8 @@ Quando o navegador carrega o HTML e encontra uma tag `<script>...</script>`, ele
7
7
8
8
Isso nos leva a duas questões importantes:
9
9
10
-
1. Os scripts não conseguem ver os elementos da 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 "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:
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.
12
12
13
13
```html run height=100
14
14
<p>...conteúdo antes do script...</p>
@@ -53,7 +53,7 @@ Aqui está o mesmo exemplo acima, mas utilizando o `defer`:
53
53
Em outras palavras:
54
54
55
55
- Scripts com `defer` nunca bloqueiam a página.
56
-
- Scripts com `defer` sempre são executados quando a DOM está pronta (mas antes do evento `DOMContentLoaded`).
56
+
- Scripts com `defer` sempre são executados quando a DOM está pronto (mas antes do evento `DOMContentLoaded`).
57
57
58
58
O exemplo a seguir demonstra a segunda parte:
59
59
@@ -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.
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
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
@@ -103,7 +103,7 @@ O atributo `async` significa que um script é completamente independente:
103
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
104
- ... ou após um script `async` (se um script `async` for curto ou estiver em cache HTTP)
105
105
106
-
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?
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
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
@@ -129,7 +129,7 @@ Eles não esperam um pelo outro. Qualquer um que carregue primeiro (provavelment
129
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
-
<!--o Google Analytics geralmente é adicionado assim -->
132
+
<!--O Google Analytics geralmente é adicionado assim -->
Sem `script.async=false`, os scripts seriam executados na ordem padrão de carregamento primeiro (o `small.js` provavelmente primeiro).
176
176
177
-
Novamente, como com o `defer`, a ordem importa se quisermos carregar uma biblioteca e depois outro script que dependa dela.
177
+
Novamente, como acontece com o `defer`, a ordem é importante se quisermos carregar uma biblioteca e depois outro script que dependa dela.
178
178
179
179
180
180
## Resumo
@@ -188,7 +188,7 @@ Mas também existem diferenças essenciais entre eles:
188
188
|`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. |
189
189
|`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`. |
190
190
191
-
Na prática, `defer` é usado para scripts que precisam de todo a DOM e/ou sua ordem de execução relativa é importante.
191
+
Na prática, `defer` é usado para scripts que precisam de todo o DOM e/ou sua ordem de execução relativa é importante.
192
192
193
193
E `async` é usado para scripts independentes, como contadores ou anúncios. E sua ordem de execução relativa não importa.
0 commit comments