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
+7-6Lines changed: 7 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
1
2
2
# Scripts: async, defer
3
3
4
-
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.
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
-
Quando o navegador carrega 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 em seguida.
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
-
Isso leva a duas questões importantes:
8
+
Isso nos leva a duas questões importantes:
9
9
10
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 "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:
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:
12
12
13
13
```html run height=100
14
14
<p>...conteúdo antes do script...</p>
@@ -18,7 +18,8 @@ Isso leva a duas questões importantes:
18
18
<!-- Isso não se torna visível até que o script carregue -->
19
19
<p>...conteúdo depois do script...</p>
20
20
```
21
-
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:
21
+
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:
22
23
23
24
```html
24
25
<body>
@@ -28,7 +29,7 @@ Existem algumas soluções alternativas para esses problemas. Por exemplo, podem
28
29
</body>
29
30
```
30
31
31
-
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.
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.
32
33
33
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.
0 commit comments