Skip to content

Scripts: async, defer, Bezier curve #356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 27, 2024
Merged

Scripts: async, defer, Bezier curve #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a8ea094
Update article.md
cys27 Apr 30, 2024
4982b7c
Bezier curve
cys27 May 20, 2024
5d8fe75
Update article.md
cys27 Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 70 additions & 70 deletions 2-ui/5-loading/02-script-async-defer/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,152 +1,152 @@

# Scripts: async, defer
# Komut Dosyaları (Scripts): async, defer

In modern websites, scripts are often "heavier" than HTML: their download size is larger, and processing time is also longer.
Modern websitelerinde, genellikle script'ler HTML'den daha baskındır: script'lerin dosya/indirme boyutları büyüktür ve işlenme süreleri uzundur.

When the browser loads HTML and comes across a `<script>...</script>` tag, it can't continue building DOM. It must execute the script right now. The same happens for external scripts `<script src="..."></script>`: the browser must wait until the script downloads, execute it, and only after process the rest of the page.
Tarayıcı, HTML'i yüklerken `<script>...</script>` etiketiyle karşılaştığında, DOM'u oluşturmaya devam edemez. Böyle bir durumda script'i çalıştırmak zorundadır. Benzer durum `<script src="..."></script>` şeklinde dışarıdan aktarılan script'ler içinde geçerlidir: Tarayıcı script indirilene kadar bekleyecek, sonrasında onu çalıştıracak ve en sonunda sayfanın geri kalananı işleyecektir.

That leads to two important issues:
Bu durum iki önemli soruna yol açar:

1. Scripts can't see DOM elements below them, so 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. Script'ler, onların altındaki DOM öğelerini (element) göremeyebilir, yani işleyici fonksiyonlar (handlers) vb. ekleyemezsiniz.
2. Sayfanın üst kısmında büyük bir script varsa, bu "sayfanın yüklenmesini engeller". Kullanıcılar, script indirilip, çalıştırılana kadar sayfa içeriğini göremez.

```html run height=100
<p>...content before script...</p>
<p>...script'ten önceki içerik...</p>

<script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

<!-- This isn't visible until the script loads -->
<p>...content after script...</p>
<!-- Bu, script yüklenene kadar gözükmeyecek -->
<p>...script'ten sonraki içerik...</p>
```

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:
Bunun içi bazı geçici çözümler vardır. Örneğin, script'i sayfanın alt kısmına yerleştirebiliriz. Bu sayede script, kendinden önce bulunan öğeleri görebilir ve sayfa içeriğinin görüntülenmesini engellemez:

```html
<body>
...all content is above the script...
...tüm içerik script'in üzerindedir...

<script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
</body>
```

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.
Fakat bu çözüm mükemmel olmaktan uzaktır. Örneğin, tarayıcı, script'i HTML belgesinin tamamını indirdikten sonra farkeder (ve onu indirmeye başlayabilir). Uzun HTML belgelesi için, bu fark edilebilir bir gecikme olabilir.

Such things are invisible for people using very fast connections, but many people in the world still have slower internet speeds and use far-from-perfect mobile internet.
Bu tür durumlar çok hızlı bir internet bağlantısına sahip olanlar için önemsizdir, fakat dünyada birçok insan hala yavaş bir internet hızına sahip ve mükemmel olmaktan uzak olan mobil interneti kullanıyor.

Luckily, there are two `<script>` attributes that solve the problem for us: `defer` and `async`.
Neyse ki, bizim için bu sorunu çözen iki tane `<script>` niteliği (attribute) vardır: `defer` ve `async`.

## defer

The `defer` attribute tells the browser that it should go on working with the page, and load the script "in background", then run the script when it loads.
`defer` niteliği, tarayıcıya sayfayı yüklemeye devam etmesini, ve script'in "arkaplanda" yüklemesini, sonrasında sayfa yüklendikten sonra script'in çalıştırılmasını söyler.

Here's the same example as above, but with `defer`:
Yukarıdaki ile aynı örnek, fakat burada `defer` niteliği mevcut:

```html run height=100
<p>...content before script...</p>
<p>...script'lerden önceki içerik...</p>

<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

<!-- visible immediately -->
<p>...content after script...</p>
<!-- hemen görülebilir -->
<p>...script'lerden sonraki içerik...</p>
```

- Scripts with `defer` never block the page.
- Scripts with `defer` always execute when the DOM is ready, but before `DOMContentLoaded` event.
- `defer` kullanılan script, sayfayı engellemez.
- `defer` kullanılan script, her zaman DOM hazır olduğunda, `DOMContentLoaded` olayından (event) önce çalıştırılır.

The following example demonstrates that:
Aşağıdaki örnek bunu göstermektedir:

```html run height=100
<p>...content before scripts...</p>
<p>...script'lerden önceki içerik...</p>

<script>
document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!")); // (2)
document.addEventListener('DOMContentLoaded', () => alert("DOM ertelemeden (defer) sonra hazır!")); // (2)
</script>

<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

<p>...content after scripts...</p>
<p>...script'lerden sonraki içerik...</p>
```

1. The page content shows up immediately.
2. `DOMContentLoaded` waits for the deferred script. It only triggers when the script `(2)` is downloaded is executed.
1. Sayfa içeriği hemen görünür.
2. `DOMContentLoaded`, ertelenmiş (deferred) script'i bekler. Sadece script `(2)` indirilip, çalıştırıldığında tetiklenir.

Deferred scripts keep their relative order, just like regular scripts.
Ertelenmiş script'ler (deferred scripts), tıpkı normal script'ler gibi göreli sıralarını korurlar.

So, if we have a long script first, and then a smaller one, then the latter one waits.
Yani, ilk olarak büyük bir script'e ve sonrasında küçük bir tanesine sahipsek, sonuncusu bekler.

```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>
```

```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="Küçük komut dosyası önce indirilir, sonra çalıştırılır."
Tarayıcılar, performansı artırmak için sayfadaki komut dosyalarını tarar ve paralel/eş zamanlı olarak indirmeye başlar. Yani yukarıdaki örnekte her iki komut dosyasıda eş zamanlı olarak indirilir. Muhtemelen `small.js` ilk önce indirilecektir.

But the specification requires scripts to execute in the document order, so it waits for `long.js` to execute.
Ancak komut dosyalarının sayfadaki sıraya göre çalıştırılması gerekir, bu nedenle `long.js` çalıştırılmasını bekler.
```

```smart header="The `defer` attribute is only for external scripts"
The `defer` attribute is ignored if the `<script>` tag has no `src`.
```smart header="`defer` niteliği yalnızca dışarıdan aktarılan komut dosyaları içindir"
Eğer `<script>` etiketinde `src` yoksa `defer` niteliği yok sayılır.
```


## async

The `async` attribute means that a script is completely independent:
`async` niteliği, bir script'in tamamiyle bağımsız olduğu anlamına gelir:

- The page doesn't wait for async scripts, the contents is processed and displayed.
- `DOMContentLoaded` and async scripts don't wait 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)
- Other scripts don't wait for `async` scripts, and `async` scripts don't wait for them.
- Sayfa asenkron script'leri (async scripts) beklemez, içerik işlenir ve görüntülenir.
- `DOMContentLoaded` ve asenkron script'ler (async scripts) birbirlerini beklemezler:
- `DOMContentLoaded` ya bir asenkron script'ten (async script) önce gerçekleşebilir (bir asenkron script sayfa tamamlandıktan sonra yüklemeyi bitirirse)
- ...ya da bir asenkron script'ten sonra (bir asenkron script küçük ya da HTTP önbelleğinde mevcut ise)
- Diğer script'ler, `async` script'leri için, `async` script'leri de onlar için beklemez.


So, if we have several `async` scripts, they may execute in any order. Whatever loads first -- runs first:
Dolasıyla, birden fazla `async` script'imiz varsa, onlar herhangi bir sırada çalıştırılır. İlk önce hangisi yüklenirse o çalıştırılır:

```html run height=100
<p>...content before scripts...</p>
<p>...script'lerden önceki içerik...</p>

<script>
document.addEventListener('DOMContentLoaded', () => alert("DOM ready!"));
document.addEventListener('DOMContentLoaded', () => alert("DOM hazır!"));
</script>

<script async src="https://javascript.info/article/script-async-defer/long.js"></script>
<script async src="https://javascript.info/article/script-async-defer/small.js"></script>

<p>...content after scripts...</p>
<p>...script'lerden sonraki içerik...</p>
```

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. Sayfa içeriği hemen görünür: `async` sayfayı engellemez.
2. `DOMContentLoaded`, `async`'den öncede gerçekleşebilir, sonrada gerçekleşebilir. Burada garanti yok.
3. Asenkron script'ler birbirlerini beklemezler. Küçük script `small.js` ikinci sıradadır, fakat muhtemelen `long.js`'den önce yüklenecektir, dolayısıyla önce o çalıştırılacaktır. Buna "ilk sıradakini yükle" denir.

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:
Asenkron script'ler, bağımsız bir üçüncü taraf script'i sayfaya eklediğimizde harikadır: sayaçlar, reklamlar vb. bizim script'lerimize bağlı olmadıkları için komut dosyalarımız onları beklememelidir.

```html
<!-- Google Analytics is usually added like this -->
<!-- Google Analytics genellikle bu şekilde eklenir -->
<script async src="https://google-analytics.com/analytics.js"></script>
```


## Dynamic scripts
## Dinamik Komut Dosyaları (Dynamic Scripts)

We can also add a script dynamically using JavaScript:
Ayrıca, JavaScript kullanarak dinamik olarak bir script ekleyebiliriz:

```js run
let script = document.createElement('script');
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 `(*)`.
Script `(*)`, belgeye eklenir eklenmez yüklenmeye başlar.

**Dynamic scripts behave as "async" by default.**
**Dinamik scriptler varsayılan olarak "async" gibi davranır..**

That is:
- They don't wait for anything, nothing waits for them.
- The script that loads first -- runs first ("load-first" order).
Yani:
- Onlar herhangi bir şeyi beklemezler, hiçbir şeyde onları beklemez.
- İlk yüklenen script, önce çalıştırılır ("ilk sıradakini yükle")

We can change the load-first order into the document order (just like regular scripts) by explicitly setting `async` property to `false`:
`async` özelliğini `false` olarak ayarlarsak, yükleme sırasını belge sırası olacak şekilde değiştirebiliriz:

```js run
let script = document.createElement('script');
Expand All @@ -159,7 +159,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":
Örneğin, burada iki adet script ekledik. `script.async=false` olmadığından ilk sıradakini yükleye göre çalıştırılacaktı (muhtemelen `small.js` önce çalışacaktı). Fakat bu flag sayesinde sıra "belgedeki sıra gibi" olur.


```js run
Expand All @@ -170,29 +170,29 @@ function loadScript(src) {
document.body.append(script);
}

// long.js runs first because of async=false
// long.js, async=false olduğundan dolayı önce çalıştırılır.
loadScript("/article/script-async-defer/long.js");
loadScript("/article/script-async-defer/small.js");
```


## Summary
## Özet

Both `async` and `defer` have one common thing: they don't block page rendering. So the user can read page content and get acquanted with the page immediately.
`async` ve `defer` niteliklerinin ortak bir özelliği vardır: sayfanın yüklenmesini (render) engellemezler. Böylece kullanıcı sayfa içeriğini okuyabilir ve sayfayla hemen etkileşime geçebilir.

But there are also essential differences between them:
Ancak aralarında temel farklılıklar vardır:

| | Order | `DOMContentLoaded` |
| | Sıra | `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` | *İlk sırayı yükle*. Belgedeki sıraları önemleri değildir -- hangisi önce yüklenirse | Alakasız. Henüz belgenin tamamı indirilmemişken yüklenebilir ve çalıştırılabilir. Bu durum, eğer scriptler küçük veya önbellekte mevcut ise ve belge yeterince uzun ise gerçekleşir.|
| `defer` | *Belge sırası* (belgeye girdikleri gibi). | Belge yüklenip, çözümlendendikten sonra (gerekirse beklerler), `DOMContentLoaded` olayından (event) hemen önce çalıştırılır. |

```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="Sayfa, scriptler olmadan kullanılabilir olmalıdır."
`defer` kullanıyorsanız, lütfen sayfanın script yüklenmeden *önce* görüntüleneceğini unutmayın.

So the user may read the page, but some graphical components are probably not ready yet.
Yani kullanıcılar sayfayı okuyabilir, fakat bazı grafiksel bileşenler muhtemelen henüz hazır değildir.

There should be "loading" indication in proper places, not-working buttons disabled, to clearly show the user what's ready and what's not.
Kullanıcıya neyin hazır olup, neyin olmadığını göstermek için uygun yerlere "yükleniyor" ifadesi yerleştirilmeli, çalışmayan düğmeler (button) devre dışı bırakılmalıdır.
```

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.
Pratikte, `defer` tüm DOM'a ihtiyaç duyan ve/ya da göreli yürütme sırası önemli olan scriptler için kullanılır. Ve `async` sayaçlar, reklamlar gibi bağımsız scriptler için kullanılır. Ve onlarda sıra önemli değildir.
Loading