From 110c128758afc1de19c29ac42678c2447abd474c Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Sat, 25 Jul 2020 22:55:12 -0500 Subject: [PATCH 01/26] Translate - Scripts: async, defer --- .../02-script-async-defer/article.md | 135 +++++++++--------- 1 file changed, 67 insertions(+), 68 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 ca82a7302..f1fd31024 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -1,126 +1,126 @@ # Scripts: async, defer -In modern websites, scripts are often "heavier" than HTML: their download size is larger, and processing time is also longer. +En los sitios web modernos los scripts suelen ser más "pesados" que el HTML, el tamaño de la descarga es grande y el tiempo de procesamiento es mayor. -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 until the script downloads, execute it, and only after process the rest of the page. +Cuando el navegador carga el HTML y se encuentra con una etiqueta `` no puede continuar construyendo el DOM ya que ahora debe ejecutar el script, lo mismo sucede con los scripts externos `` el navegador tiene que esperar hasta que el script sea descargado para poder ejecutarlo y solo después procesa el resto de la página. -That leads to two important issues: +Esto nos lleva a dos importantes problemas: -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. Los scripts no pueden ver los elementos del DOM que se encuentran debajo de el por lo que no pueden agregar controladores de eventos, etc. +2. Si hay un script muy pesado en la parte superior de la página, este "bloquea la página". Los usuarios no pueden ver el contenido de la página hasta que sea descargado y ejecutado. ```html run height=100 -

...content before script...

+

...contenido previo al script...

- -

...content after script...

+ +

...contenido posterior al 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: +Hay algunas soluciones para eso. Por ejemplo podemos poner el script en la parte inferior de la página por lo que podrá ver los elementos sobre el y no bloqueará la visualización del contenido de la página. ```html - ...all content is above the script... + ...todo el contenido esta arriba del 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. +Pero esta solución esta lejos de ser perfecta. Por ejemplo el navegador solo se dará cuenta del script (y podrá empezar a descargarlo) después de descargar todo el documento HTML. Para documentos HTML extensos eso puede ser un retraso notable. -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. +Este tipo de cosas son imperceptibles para las personas que usan conexiones muy rápidas, pero muchas personas en el mundo todavía tienen velocidades de internet lentas y utilizan una conexión de internet móvil que esta lejos de ser perfecta. -Luckily, there are two ` - -

...content after script...

+ +

...contenido posterior al script...

``` -- Scripts with `defer` never block the page. -- Scripts with `defer` always execute when the DOM is ready, but before `DOMContentLoaded` event. +- Los scripts con `defer` nunca bloquean la página. +- Los scripts con `defer` siempre se ejecutan cuando el DOM esta listo pero antes del evento `DOMContentLoaded`. -The following example demonstrates that: +Los siguientes ejemplos demuestran eso: ```html run height=100 -

...content before scripts...

+

...contenido previo a los scripts...

-

...content after scripts...

+

...contenido posterior a los scripts...

``` -1. The page content shows up immediately. -2. `DOMContentLoaded` waits for the deferred script. It only triggers when the script `(2)` is downloaded and executed. +1. El contenido de la página se muestra inmediatamente. +2. El `DOMContentLoaded` espera por el script diferido y solo lo se dispara cuando el script `(2)` es descargado y ejecutado. -Deferred scripts keep their relative order, just like regular scripts. +Los scripts diferidos mantienen su orden tal y cual los scripts regulares. -So, if we have a long script first, and then a smaller one, then the latter one waits. +Entonces si tenemos un script grande primero y luego otro pequeño, el último espera. ```html ``` -```smart header="The small script downloads first, runs second" -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 makes it first. +```smart header="El script pequeño se descarga primero y se ejecuta segundo" +Los navegadores analizan la página en busca de scripts y los descarga en paralelo para mejorar el rendimiento. Entonces en el ejemplo superior ambos scripts se descargan en paralelo, el `small.js` probablemente lo haga primero. -But the specification requires scripts to execute in the document order, so it waits for `long.js` to execute. +Pero la especificación requiere que los scripts sean ejecutados en el orden en el que están en el documento, entonces espera por `long.js` para ejecutarlo. ``` -```smart header="The `defer` attribute is only for external scripts" -The `defer` attribute is ignored if the ` -

...content after scripts...

+

...contenido posterior a los scripts...

``` -1. The page content shows up immediately: `async` doesn't block it. -2. `DOMContentLoaded` may happen both before and after `async`, no guarantees here. -3. Async scripts don't wait for each other. A smaller script `small.js` goes second, but probably loads before `long.js`, so runs first. That's called a "load-first" order. +1. El contenido de la pagina se muestra inmediatamente: `async` no lo bloquea. +2. El evento `DOMContentLoaded` puede suceder antes o después de `async`, no hay garantías aquí. +3. Los scripts asincrónicos no esperan por el otro. Un script pequeño `small.js` va segundo pero probablemente cargue antes que `long.js` entonces se ejecutará primero. A eso lo llamamos "load-first order". -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: +Los scripts asincrónicos son excelentes cuando incluimos scripts de terceros (contadores, anuncios, etc) en la pagina debido a que ellos no dependen de nuestros scripts y nuestros scripts no deberían esperar por ellos. ```html @@ -128,9 +128,9 @@ Async scripts are great when we integrate an independent third-party script into ``` -## Dynamic scripts +## Scripts dinámicos -We can also add a script dynamically using JavaScript: +También podemos tambien agregar un script dinámicamente usando JavaScript: ```js run let script = document.createElement('script'); @@ -138,13 +138,13 @@ 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 `(*)`. +El script comienza a cargar tan pronto como es agregado al documento `(*)`. -**Dynamic scripts behave as "async" by default.** +**Los scripts dinámicos se comportan como `async` por defecto** -That is: -- They don't wait for anything, nothing waits for them. -- The script that loads first -- runs first ("load-first" order). +Esto es: +- Ellos no esperan a nadie y nadie espera por ellos. +- El script que carga primero se ejecuta primero (`load-first order`) ```js run @@ -158,8 +158,7 @@ script.async = false; document.body.append(script); ``` -For example, here we add two scripts. Without `script.async=false` they would execute in load-first order (the `small.js` probably first). But with that flag the order is "as in the document": - +For ejemplo, aquí agregamos dos scripts sin el `script.async=false` por lo que deberían ejecutarse en `load-first order` (el `small.js` probablemente primero). Pero con esa bandera el orden es `document order`. ```js run function loadScript(src) { @@ -169,29 +168,29 @@ function loadScript(src) { document.body.append(script); } -// long.js runs first because of async=false +// long.js se ejecuta primero a causa del async=false loadScript("/article/script-async-defer/long.js"); loadScript("/article/script-async-defer/small.js"); ``` -## Summary +## Resumen -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` y `defer`tiene algo en comúm, la descarga de tales scripts no bloquean el renderizado de la página. Por lo cual el usuario puede leer el contenido de la página y familiarizarse con la página inmediatamente. -But there are also essential differences between them: +Pero hay algunas diferencias esenciales entre ellos: -| | Order | `DOMContentLoaded` | +| | Orden | `DOMContentLoaded` | |---------|---------|---------| -| `async` | *Load-first order*. Their document order doesn't matter -- which loads 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` | *Load-first order*. El orden del documento no importa. ¿cual script carga primero? | Tal vez cargue y ejecute mientras el documento no ha sido completamente descargado, eso puede pasar si el script ese pequeño o esta en cache y el documento es suficientemente extenso. | +| `defer` | *Document order* (como va en el documento). | Ejecuta después de que el documento es cargado y analizado (espera si es necesario). justo antes de el evento `DOMContentLoaded`. | -```warn header="Page without scripts should be usable" -Please note that if you're using `defer`, then the page is visible *before* the script loads. +```warn header="La página sin scripts debe ser utilizable" +Por favor ten en cuenta que si estas usando `defer` la página es vsible antes de que el script sea cargado. -So the user may read the page, but some graphical components are probably not ready yet. +Por lo que el usuario tal vez pueda leer la página pero no algunos componentes gráficos problemente no esten listos. -There should be "loading" indications in the proper places, and disabled buttons should show as such, so the user can clearly see what's ready and what's not. +Debería haber algunos indicadores de "cargando" en lugares apropiados, y los botones deshabilitados deberian ser mostrados como tal, para que el usuario pueda ver claramente que esta listo y que no. ``` -In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important. And `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter. +En la práctica, `defer` es usado para scripts que necesitan todo el DOM y/o el orden de ejecución es importante. Y `async` es usado para scripts independientes como contadores y anuncios, y el orden de ejecución no importa. From 387d40fe5ef79a89e0748ecfa3e080d0416bc6ab Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Sat, 25 Jul 2020 22:55:43 -0500 Subject: [PATCH 02/26] Update article.md --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f1fd31024..56f1b2c85 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -182,7 +182,7 @@ Pero hay algunas diferencias esenciales entre ellos: | | Orden | `DOMContentLoaded` | |---------|---------|---------| -| `async` | *Load-first order*. El orden del documento no importa. ¿cual script carga primero? | Tal vez cargue y ejecute mientras el documento no ha sido completamente descargado, eso puede pasar si el script ese pequeño o esta en cache y el documento es suficientemente extenso. | +| `async` | *Load-first order*. El orden del documento no importa. ¿cual script carga primero? | Tal vez cargue y ejecute mientras el documento no ha sido completamente descargado, eso puede pasar si el script ese pequeño o está en cache y el documento es suficientemente extenso. | | `defer` | *Document order* (como va en el documento). | Ejecuta después de que el documento es cargado y analizado (espera si es necesario). justo antes de el evento `DOMContentLoaded`. | ```warn header="La página sin scripts debe ser utilizable" From 33928014bfbc5fde612d3431da09e01eb83d466f Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Sat, 25 Jul 2020 22:58:10 -0500 Subject: [PATCH 03/26] Update article.md --- 2-ui/5-loading/02-script-async-defer/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 56f1b2c85..0a3a282c9 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -186,11 +186,11 @@ Pero hay algunas diferencias esenciales entre ellos: | `defer` | *Document order* (como va en el documento). | Ejecuta después de que el documento es cargado y analizado (espera si es necesario). justo antes de el evento `DOMContentLoaded`. | ```warn header="La página sin scripts debe ser utilizable" -Por favor ten en cuenta que si estas usando `defer` la página es vsible antes de que el script sea cargado. +Por favor ten en cuenta que si estas usando `defer` la página es visible antes de que el script sea cargado. -Por lo que el usuario tal vez pueda leer la página pero no algunos componentes gráficos problemente no esten listos. +Por lo que el usuario tal vez pueda leer la página, pero algunos componentes gráficos problemente no esten listos. -Debería haber algunos indicadores de "cargando" en lugares apropiados, y los botones deshabilitados deberian ser mostrados como tal, para que el usuario pueda ver claramente que esta listo y que no. +Debería haber algunas señales de "cargando" en lugares apropiados y los botones deshabilitados deberían ser mostrados como tal para que el usuario pueda ver claramente que esta listo y que no. ``` -En la práctica, `defer` es usado para scripts que necesitan todo el DOM y/o el orden de ejecución es importante. Y `async` es usado para scripts independientes como contadores y anuncios, y el orden de ejecución no importa. +En la práctica, `defer` es usado para scripts que necesitan todo el DOM y/o el orden de ejecución es importante. Y `async` es usado para scripts independientes como contadores y anuncios donde el orden de ejecución no importa. From 04fe54f3f20e88b2be8e04ddb51df60b8788ae4f Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:02:40 -0500 Subject: [PATCH 04/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0a3a282c9..ed35f4791 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -19,7 +19,7 @@ Esto nos lleva a dos importantes problemas:

...contenido posterior al script...

``` -Hay algunas soluciones para eso. Por ejemplo podemos poner el script en la parte inferior de la página por lo que podrá ver los elementos sobre el y no bloqueará la visualización del contenido de la página. +Hay algunas soluciones para eso. Por ejemplo podemos poner el script en la parte inferior de la página por lo que podrá ver los elementos sobre él y no bloqueará la visualización del contenido de la página. ```html From f13ccebcfca11fb5e450a2749dcd06a544ab3953 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:02:47 -0500 Subject: [PATCH 05/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ed35f4791..7269f144e 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -7,7 +7,7 @@ Cuando el navegador carga el HTML y se encuentra con una etiqueta `` no puede continuar construyendo el DOM ya que ahora debe ejecutar el script, lo mismo sucede con los scripts externos `` el navegador tiene que esperar hasta que el script sea descargado para poder ejecutarlo y solo después procesa el resto de la página. +Cuando el navegador carga el HTML y se encuentra con una etiqueta ``, no puede continuar construyendo el DOM ya que ahora debe ejecutar el script. Lo mismo sucede con los scripts externos ``, el navegador tiene que esperar hasta que el script sea descargado para poder ejecutarlo y solo después procesa el resto de la página. Esto nos lleva a dos importantes problemas: From 89185baed792ecb806d9c34d37308e53f3e465a0 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:14:23 -0500 Subject: [PATCH 10/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 42b0421c7..fe6ca6ab4 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -23,7 +23,7 @@ Hay algunas soluciones para eso. Por ejemplo podemos poner el script en la parte ```html - ...todo el contenido esta arriba del script... + ...todo el contenido está arriba del script... From 6475b1cc3f7610c358488594e67db8acdf49c223 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:14:38 -0500 Subject: [PATCH 11/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 fe6ca6ab4..1be09fb84 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -190,7 +190,7 @@ Por favor ten en cuenta que si estas usando `defer` la página es visible antes Por lo que el usuario tal vez pueda leer la página, pero algunos componentes gráficos probablemente no estén listos. -Debería haber algunas señales de "cargando" en lugares apropiados y los botones deshabilitados deberían ser mostrados como tal para que el usuario pueda ver claramente que esta listo y que no. +Debería haber algunas señales de "cargando" en lugares apropiados y los botones deshabilitados deberían ser mostrados como tal para que el usuario pueda ver claramente qué está listo y qué no. ``` En la práctica, `defer` es usado para scripts que necesitan todo el DOM y/o el orden de ejecución es importante. Y `async` es usado para scripts independientes como contadores y anuncios donde el orden de ejecución no importa. From f576eb0bcbb36a14e071c5d5b07bf0c5bc968146 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:15:08 -0500 Subject: [PATCH 12/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1be09fb84..84e860650 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -176,7 +176,7 @@ loadScript("/article/script-async-defer/small.js"); ## Resumen -Ambos `async` y `defer`tiene algo en comúm, la descarga de tales scripts no bloquean el renderizado de la página. Por lo cual el usuario puede leer el contenido de la página y familiarizarse con la página inmediatamente. +Ambos, `async` y `defer`, tienen algo en común: la descarga de tales scripts no bloquean el renderizado de la página. Por lo cual el usuario puede leer el contenido de la página y familiarizarse con la página inmediatamente. Pero hay algunas diferencias esenciales entre ellos: From 656d4117a21e84727f4c7960d95a379adaba264e Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:15:15 -0500 Subject: [PATCH 13/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 84e860650..cd91b0a5a 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -29,7 +29,7 @@ Hay algunas soluciones para eso. Por ejemplo podemos poner el script en la parte ``` -Pero esta solución esta lejos de ser perfecta. Por ejemplo el navegador solo se dará cuenta del script (y podrá empezar a descargarlo) después de descargar todo el documento HTML. Para documentos HTML extensos eso puede ser un retraso notable. +Pero esta solución está lejos de ser perfecta. Por ejemplo el navegador solo se dará cuenta del script (y podrá empezar a descargarlo) después de descargar todo el documento HTML. Para documentos HTML extensos eso puede ser un retraso notable. Este tipo de cosas son imperceptibles para las personas que usan conexiones muy rápidas, pero muchas personas en el mundo todavía tienen velocidades de internet lentas y utilizan una conexión de internet móvil que esta lejos de ser perfecta. From 91d7706b731d5e8213a5f71980b090a3930bf8b3 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:16:45 -0500 Subject: [PATCH 14/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cd91b0a5a..87eb28f3b 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -92,7 +92,7 @@ El atributo `defer` es ignorado si el ` From e4aecf7790237170ca41c0e79309b8a88e8947a0 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:17:34 -0500 Subject: [PATCH 17/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1079c6082..b1a4cec0a 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -85,7 +85,7 @@ Los navegadores analizan la página en busca de scripts y los descarga en parale Pero la especificación requiere que los scripts sean ejecutados en el orden en el que están en el documento, entonces espera por `long.js` para ejecutarlo. ``` -```smart header="El attributo `defer` es solo para scripts externos" +```smart header="El atributo `defer` es solo para scripts externos" El atributo `defer` es ignorado si el ` From e925239da732244594942d128da42f456ad35f63 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:47:16 -0500 Subject: [PATCH 20/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b6354b3f5..9a6c9ef8b 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -130,7 +130,7 @@ Los scripts asincrónicos son excelentes cuando incluimos scripts de terceros (c ## Scripts dinámicos -También podemos tambien agregar un script dinámicamente usando JavaScript: +También podemos agregar un script dinámicamente usando JavaScript: ```js run let script = document.createElement('script'); From a0b8670c1d00bd6b037f35bf17e41f2b5df09fb0 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:47:38 -0500 Subject: [PATCH 21/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 9a6c9ef8b..c8f4165fd 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -120,7 +120,7 @@ Entonces si tenemos muchos scripts asincrónicos estos pueden ser ejecutados en 2. El evento `DOMContentLoaded` puede suceder antes o después de `async`, no hay garantías aquí. 3. Los scripts asincrónicos no esperan por el otro. Un script pequeño `small.js` va segundo pero probablemente cargue antes que `long.js` entonces se ejecutará primero. A eso lo llamamos "load-first order". -Los scripts asincrónicos son excelentes cuando incluimos scripts de terceros (contadores, anuncios, etc) en la pagina debido a que ellos no dependen de nuestros scripts y nuestros scripts no deberían esperar por ellos. +Los scripts asincrónicos son excelentes cuando incluimos scripts de terceros (contadores, anuncios, etc) en la página debido a que ellos no dependen de nuestros scripts y nuestros scripts no deberían esperar por ellos. ```html From a2449ac7771994490ca9b36922cbf88cc6bd5325 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:47:52 -0500 Subject: [PATCH 22/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 c8f4165fd..98e8feaa6 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -116,7 +116,7 @@ Entonces si tenemos muchos scripts asincrónicos estos pueden ser ejecutados en

...contenido posterior a los scripts...

``` -1. El contenido de la pagina se muestra inmediatamente: `async` no lo bloquea. +1. El contenido de la página se muestra inmediatamente: `async` no lo bloquea. 2. El evento `DOMContentLoaded` puede suceder antes o después de `async`, no hay garantías aquí. 3. Los scripts asincrónicos no esperan por el otro. Un script pequeño `small.js` va segundo pero probablemente cargue antes que `long.js` entonces se ejecutará primero. A eso lo llamamos "load-first order". From 212eb5575d732bde3ae31f424ab61e5fc3dd499b Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:48:33 -0500 Subject: [PATCH 23/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 98e8feaa6..b238931b1 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -97,7 +97,7 @@ El atributo `async` significa que el script es completamente independiente: - La página no espera a los scripts asincrónicos por lo que el contenido de la página se procesa y se muestra. - El evento `DOMContentLoaded` y los scripts asincrónicos no esperan por el otro: - El evento `DOMContentLoaded` puede suceder que un script asincrónico (si un script asincrónico termina de cargar una vez la página esta completa) - - o después de un script asincrónico (si un script asincrónico es pequeño o está en cache) + - o después de un script asincrónico (si tal script asincrónico es pequeño o está en cache) - Otros scripts no esperan a los scripts asincrónicos y los scripts asincrónicos no esperan por ellos. From 60d5e05a02315ab851635ddac212d054b00e2c82 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:49:01 -0500 Subject: [PATCH 24/26] Update 2-ui/5-loading/02-script-async-defer/article.md Co-authored-by: joaquinelio --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b238931b1..68eea75ae 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -96,7 +96,7 @@ El atributo `async` significa que el script es completamente independiente: - La página no espera a los scripts asincrónicos por lo que el contenido de la página se procesa y se muestra. - El evento `DOMContentLoaded` y los scripts asincrónicos no esperan por el otro: - - El evento `DOMContentLoaded` puede suceder que un script asincrónico (si un script asincrónico termina de cargar una vez la página esta completa) + - El evento `DOMContentLoaded` puede suceder antes que un script asincrónico (si un script asincrónico termina de cargar una vez la página está completa) - o después de un script asincrónico (si tal script asincrónico es pequeño o está en cache) - Otros scripts no esperan a los scripts asincrónicos y los scripts asincrónicos no esperan por ellos. From dea6a11813e1afa1113e5bdf5045eab0e31b3753 Mon Sep 17 00:00:00 2001 From: Danilo Britto Date: Mon, 27 Jul 2020 00:54:21 -0500 Subject: [PATCH 25/26] Update article.md --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 68eea75ae..c7aaa96c8 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -95,7 +95,7 @@ El atributo `defer` es ignorado si el `