[문서] 02-script-async-defer 번역 충돌 해결

taejinchoi-cbnu · taejinchoi-cbnu · commit 7a9b4001d3d0 · 2026-05-31T21:35:01.000+09:00
diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
@@ -3,11 +3,7 @@
 
 모던 웹브라우저에서 돌아가는 스크립트들은 대부분 HTML보다 '무겁습니다'. 용량이 커서 다운로드받는 데 오랜 시간이 걸리고 처리하는 것 역시 마찬가지이죠.
 
-<<<<<<< HEAD
 브라우저는 HTML을 읽다가 `<script>...</script>` 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춥니다. 이는 `src` 속성이 있는 외부 스크립트 `<script src="..."></script>`를 만났을 때도 마찬가지입니다. 외부에서 스크립트를 다운받고 실행한 후에야 남은 페이지를 처리할 수 있습니다.
-=======
-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.
->>>>>>> upstream/master
 
 이런 브라우저의 동작 방식은 두 가지 중요한 이슈를 만듭니다.
 
@@ -41,11 +37,7 @@ When the browser loads HTML and comes across a `<script>...</script>` tag, it ca
 
 ## defer
 
-<<<<<<< HEAD
-브라우저는 `defer` 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드'에서 다운로드 합니다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않습니다. 그리고 `defer` 스크립트 실행은 페이지 구성이 끝날 때까지 *지연* 됩니다.
-=======
-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.
->>>>>>> upstream/master
+브라우저는 `defer` 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드'에서 다운로드합니다. 따라서 지연 스크립트를 다운로드하는 도중에도 HTML 처리를 계속 진행하며 DOM을 생성합니다. 그리고 defer 스크립트는 DOM 구성이 완료된 뒤 실행됩니다.
 
 위쪽 예시와 동일한 코드인데 스크립트에 `defer`만 붙여보겠습니다.
 
@@ -58,106 +50,63 @@ The `defer` attribute tells the browser not to wait for the script. Instead, the
 <p>...스크립트 뒤 콘텐츠...</p>
 ```
 
-<<<<<<< HEAD
 - 지연 스크립트는 페이지 생성을 절대 막지 않습니다.
 - 지연 스크립트는 DOM이 준비된 후에 실행되긴 하지만 `DOMContentLoaded` 이벤트 발생 전에 실행됩니다.
 
 예시를 통해 직접 살펴봅시다.
-=======
-In other words:
-
-- Scripts with `defer` never block the page.
-- Scripts with `defer` always execute when the DOM is ready (but before `DOMContentLoaded` event).
-
-The following example demonstrates the second part:
->>>>>>> upstream/master
 
 ```html run height=100
 <p>...스크립트 앞 콘텐츠...</p>
 
 <script>
-<<<<<<< HEAD
-  document.addEventListener('DOMContentLoaded', () => alert("`defer` 스크립트가 실행된 후, DOM이 준비되었습니다!")); // (2)
-=======
-  document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!"));
->>>>>>> upstream/master
+  document.addEventListener('DOMContentLoaded', () => alert("`defer` 스크립트가 실행된 후, DOM이 준비되었습니다!"));
 </script>
 
 <script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
 
 <p>...스크립트 뒤 콘텐츠...</p>
 ```
 
-<<<<<<< HEAD
 1. 페이지 콘텐츠는 바로 출력됩니다.
 2. `DOMContentLoaded` 이벤트는 지연 스크립트 실행을 기다립니다. 따라서 얼럿창은 DOM 트리가 완성되고 지연 스크립트가 실행된 후에 뜹니다.
 
-지연 스크립트는 일반 스크립트와 마찬가지로 HTML에 추가된 순(상대순, 요소순)으로 실행됩니다.
+**지연 스크립트는 일반 스크립트와 마찬가지로 HTML에 추가된 순(상대순, 요소순)으로 실행됩니다.**
 
 따라서 길이가 긴 스크립트가 앞에, 길이가 짧은 스크립트가 뒤에 있어도 짧은 스크립트는 긴 스크립트가 실행될 때까지 기다립니다.
-=======
-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.
-
-**Deferred scripts keep their relative order, just like regular scripts.**
-
-Let's say, we have two deferred scripts: the `long.js` and then `small.js`:
->>>>>>> upstream/master
 
 ```html
 <script defer src="https://javascript.info/article/script-async-defer/long.js"></script>
 <script defer src="https://javascript.info/article/script-async-defer/small.js"></script>
 ```
 
-<<<<<<< HEAD
-```smart header="작은 스크립트는 먼저 다운되지만, 실행은 나중에 됩니다."
-브라우저는 성능을 위해 페이지에 어떤 스크립트들이 있는지 쭉 살펴본 후에야 스크립트를 병렬적으로 다운로드합니다. 위 예시에서도 스크립트 다운로드가 병렬적으로 진행되었습니다. 그런데 이 때 크기가 작은 `small.js`이 `long.js`보다 먼저 다운로드 될 수 있습니다.
-
-하지만 명세서에서 스크립트를 문서에 추가한 순서대로 실행하라고 정의했기 때문에 `small.js`는 `long.js` 다음에 실행됩니다.
-```
-=======
-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.
+브라우저는 성능을 위해 페이지에 어떤 스크립트들이 있는지 쭉 살펴본 후에야 스크립트를 병렬적으로 다운로드합니다. 위 예시에서도 스크립트 다운로드가 병렬적으로 진행되었습니다. 그런데 이때 크기가 작은 `small.js`가 `long.js`보다 먼저 다운로드될 수 있습니다.
 
-...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.
+하지만 `defer` 속성은 브라우저에 '막지 마'라고 지시하는 것 외에도 상대 순서를 유지합니다. 따라서 `small.js`가 먼저 다운로드 되더라도 `long.js` 다음에 실행됩니다.
 
-That may be important for cases when we need to load a JavaScript library and then a script that depends on it.
->>>>>>> upstream/master
+이는 자바스크립트 라이브러리를 로드한 다음 해당 라이브러리에 의존하는 스크립트를 로드해야 하는 경우에 중요할 수 있습니다.
 
 ```smart header="`defer` 속성은 외부 스크립트에만 유효합니다."
 `<script>`에 `src`가 없으면 `defer` 속성은 무시됩니다. 
 ```
 
 ## async
 
-<<<<<<< HEAD
-`async` 속성이 붙은 스크립트(이하 async 스크립트 또는 비동기 스크립트)는 페이지와 완전히 독립적으로 동작합니다.
+`async` 속성이 붙은 스크립트(이하 async 스크립트 또는 비동기 스크립트)는 `defer` 스크립트와 다소 유사하지만 동작 방식에 중요한 차이점이 있습니다.
+
+`async` 속성은 스크립트가 페이지와 완전히 독립적으로 동작함을 의미합니다.
 
 - async 스크립트는 defer 스크립트와 마찬가지로 백그라운드에서 다운로드됩니다. 따라서 HTML 페이지는 async 스크립트 다운이 완료되길 기다리지 않고 페이지 내 콘텐츠를 처리, 출력합니다(하지만 async 스크립트 실행중에는 HTML 파싱이 멈춥니다 - 옮긴이).
+- 다른 스크립트들은 async 스크립트를 기다리지 않습니다. async 스크립트 역시 다른 스크립트들을 기다리지 않습니다.
 - `DOMContentLoaded` 이벤트와 async 스크립트는 서로를 기다리지 않습니다.
     - 페이지 구성이 끝난 후에 async 스크립트 다운로딩이 끝난 경우, `DOMContentLoaded`는 async 스크립트 실행 전에 발생할 수 있습니다,
-    - async 스크립트가 짧아서 페이지 구성이 끝나기 전에 다운로드 되거나 스크립트가 캐싱처리 된 경우, `DOMContentLoaded`는 `async` 스크립트 실행 후에 발생할 수도 있습니다.
-- 다른 스크립트들은 `async` 스크립트를 기다리지 않습니다. `async` 스크립트 역시 다른 스크립트들을 기다리지 않습니다.
-=======
-The `async` attribute is somewhat like `defer`. It also makes the script non-blocking. But it has important differences in the behavior.
-
-The `async` attribute means that a script is completely independent:
-
-- The browser doesn't block on `async` scripts (like `defer`).
-- Other scripts don't wait for `async` scripts, and `async` scripts don't wait for them.
-- `DOMContentLoaded` and async scripts don't wait for each other:
-    - `DOMContentLoaded` may happen both before an async script (if an async script finishes loading after the page is complete)
-    - ...or after an async script (if an async script is short or was in HTTP-cache)
->>>>>>> upstream/master
+    - async 스크립트가 짧아서 페이지 구성이 끝나기 전에 다운로드 되거나 스크립트가 HTTP 캐시 처리 된 경우, `DOMContentLoaded`는 `async` 스크립트 실행 후에 발생할 수도 있습니다.
 
-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?
+다시 말해 비동기 스크립트는 백그라운드에서 로드되어 준비가 되면 실행됩니다. DOM이나 다른 스크립트는 비동기 스크립트를 기다리지 않으며 비동기 스크립트 또한 그 어떤 것도 기다리지 않습니다. 로드되는 즉시 실행되는 완전히 독립적인 스크립트인 셈입니다. 간단하죠?
 
-<<<<<<< HEAD
-이런 특징 때문에 페이지에 `async` 스크립트가 여러 개 있는 경우, 그 실행 순서가 제각각이 됩니다. 실행은 다운로드가 끝난 스크립트 순으로 진행됩니다.
-=======
-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`.
+defer 스크립트를 사용했을 때와 비슷한 예시를 살펴봅시다.
+`long.js`와 `small.js` 스크립트가 있고, `defer` 대신 `async`를 사용했습니다.
 
-They don't wait for each other. Whatever loads first (probably `small.js`) -- runs first:
->>>>>>> upstream/master
+이 스크립트는 서로를 기다리지 않으므로 먼저 다운로드되는 스크립트가 먼저 실행됩니다. (아마 `small.js`일 것입니다.)
 
 ```html run height=100
 <p>...스크립트 앞 콘텐츠...</p>
@@ -172,15 +121,9 @@ They don't wait for each other. Whatever loads first (probably `small.js`) -- ru
 <p>...스크립트 뒤 콘텐츠...</p>
 ```
 
-<<<<<<< HEAD
 1. 비동기 스크립트 다운로드는 페이지 로딩을 막지 않기 때문에 페이지 콘텐츠가 바로 출력됩니다.
 2. `DOMContentLoaded` 이벤트는 상황에 따라 비동기 스크립트 전이나 후에 실행됩니다. 정확한 순서를 예측할 수 없습니다.
-3. 비동기 스크립트는 서로를 기다리지 않습니다. 위치상으론 `small.js`가 아래이긴 하지만 `long.js`보다 먼저 다운로드되었기 때문에 먼저 실행됩니다. 이렇게 먼저 로드가 된 스크립트가 먼저 실행되는 것을 'load-first order'라고 부릅니다.
-=======
-- 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.
->>>>>>> upstream/master
+3. 비동기 스크립트는 서로를 기다리지 않습니다. 위치상으로는 `small.js`가 아래이긴 하지만 `long.js`보다 먼저 다운로드되었기 때문에 먼저 실행됩니다. (하지만 `long.js`가 캐시된 경우 먼저 로드되어 실행될 수 있습니다.) 이렇게 먼저 로드가 된 스크립트가 먼저 실행되는 것을 'load-first order'(로드 우선 순서 - 옮긴이)라고 부릅니다.
 
 비동기 스크립트는 방문자 수 카운터나 광고 관련 스크립트처럼 각각 독립적인 역할을 하는 서드 파티 스크립트를 현재 개발 중인 스크립트에 통합하려 할 때 아주 유용합니다. async 스크립트는 개발 중인 스크립트에 의존하지 않고, 그 반대도 마찬가지이기 때문입니다.
 
@@ -195,13 +138,9 @@ Just like `defer`, the `async` attribute is ignored if the `<script>` tag has no
 
 ## 동적 스크립트
 
-<<<<<<< HEAD
-자바스크립트를 사용하면 문서에 스크립트를 동적으로 추가할 수 있습니다. 이렇게 추가한 스크립트를 동적 스크립트(dynamic script)라고 부릅니다.
-=======
-There's one more important way of adding a script to the page.
+페이지에 스크립트를 추가하는 또 다른 중요한 방법이 있습니다.
 
-We can create a script and append it to the document dynamically using JavaScript:
->>>>>>> upstream/master
+자바스크립트를 사용하면 문서에 스크립트를 동적으로 추가할 수 있습니다. 이렇게 추가한 스크립트를 동적 스크립트(dynamic script)라고 부릅니다.
 
 ```js run
 let script = document.createElement('script');
@@ -217,15 +156,11 @@ document.body.append(script); // (*)
 - 동적 스크립트는 그 어떤 것도 기다리지 않습니다. 그리고 그 어떤 것도 동적 스크립트를 기다리지 않습니다.
 - 먼저 다운로드된 스크립트가 먼저 실행됩니다('load-first' order).
 
-<<<<<<< HEAD
-아래 예시에선 두 스크립트를 동적으로 문서에 추가합니다. 그런데 `script.async=false`가 없었다면 이 스크립트들은 'load-first order'로 실행됩니다. 그럼 크기가 작은 `small.js`가 먼저 실행되겠죠. 하지만 `script.async=false`가 있기 때문에 실행은 '문서에 추가된 순서'대로 됩니다.
-=======
-This can be changed if we explicitly set `script.async=false`. Then scripts will be executed in the document order, just like `defer`.
+`script.async=false`를 명시적으로 설정하면 위 특징을 변경할 수 있습니다. 그러면 스크립트는 `defer`처럼 문서 순서대로 실행됩니다.
 
-In this example, `loadScript(src)` function adds a script and also sets `async` to `false`.
->>>>>>> upstream/master
+아래 예시에서 `loadScript(src)` 함수는 스크립트를 추가하고 `async`를 `false`로 설정합니다.
 
-So `long.js` always runs first (as it's added first):
+따라서 `long.js`는 (가장 먼저 추가되었기 때문에) 항상 먼저 실행됩니다.
 
 ```js run
 function loadScript(src) {
@@ -242,9 +177,8 @@ 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.
+`script.async=false`를 지정하지 않으면 스크립트는 기본으로 먼저 로드된 순서대로 실행됩니다(아마 `small.js`가 먼저 실행됩니다.)
+앞서 `defer`에서 살펴본 것처럼 라이브러리를 먼저 로드하고 이를 사용하는 다른 스크립트를 이후에 실행해야 하는 경우에는 실행 순서가 중요합니다.
 
 
 ## 요약
@@ -255,32 +189,16 @@ Again, as with the `defer`, the order matters if we'd like to load a library and
 
 |         | 순서 | DOMContentLoaded |
 |---------|---------|---------|
-<<<<<<< HEAD
 | `async` | *load-first order*. 문서 내 순서와 상관없이 먼저 다운로드된 스크립트가 먼저 실행됩니다. |  비동기 스크립트는 HTML 문서가 완전히 다운로드되지 않은 상태라도 로드 및 실행될 수 있습니다. 스크립트 크기가 작거나 캐싱 처리 되어있을 때 혹은 HTML 문서 길이가 아주 길 때 이런 일이 발생합니다. |
-| `defer` | *문서에 추가된 순* |  지연 스크립트는 문서 다운로드와 파싱이 완료된 후에, DOMContentLoaded 이벤트 발생 전에 실행됩니다. |
+| `defer` | *문서에 추가된 순* |  지연 스크립트는 문서 다운로드와 파싱이 완료된 후에, `DOMContentLoaded` 이벤트 발생 전에 실행됩니다. |
+
+실무에선 `defer`를 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용합니다.
+`async`는 방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트에 혹은 실행 순서가 중요하지 않은 경우에 적용합니다.
 
 ```warn header="스크립트 다운로드가 끝나지 않았어도 페이지는 동작해야 합니다."
 `defer`를 사용하게 되면 스크립트가 실행되기 *전* 에 페이지가 화면에 출력된다는 점에 항상 유의해야 합니다.
 
 사용자는 그래픽 관련 컴포넌트들이 준비되지 않은 상태에서 화면을 보게 될 수 있죠. 
 
 따라서 지연 스크립트가 영향을 주는 영역엔 반드시 '로딩 인디케이터'가 있어야 합니다. 관련 버튼도 사용 불가(disabled) 처리를 해줘야 하죠. 이렇게 해야 사용자에게 현재 어떤 것은 사용할 수 있는지, 어떤 것은 사용할 수 없는지를 알려줄 수 있습니다.
-```
-
-실무에선 `defer`를 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용합니다. `async`는 방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트에 혹은 실행 순서가 중요하지 않은 경우에 적용합니다.
-=======
-| `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`. |
-
-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.
-
-```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.
-
-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.
-```
->>>>>>> upstream/master
+```
