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
In modern websites, scripts are often "heavier" than HTML: their download size is larger, and processing time is also longer.
4
+
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.
5
5
6
-
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.
6
+
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.
7
7
8
-
That leads to two important issues:
8
+
Bu durum iki önemli soruna yol açar:
9
9
10
-
1.Scripts can't see DOM elements below them, so can't add handlers etc.
11
-
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:
10
+
1.Script'ler, onların altındaki DOM öğelerini (element) göremeyebilir, yani işleyici fonksiyonlar (handlers) vb. ekleyemezsiniz.
11
+
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.
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:
22
+
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:
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.
32
+
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.
33
33
34
-
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.
34
+
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.
35
35
36
-
Luckily, there are two `<script>`attributes that solve the problem for us: `defer`and`async`.
36
+
Neyse ki, bizim için bu sorunu çözen iki tane `<script>`niteliği (attribute) vardır: `defer`ve`async`.
37
37
38
38
## defer
39
39
40
-
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.
40
+
`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.
41
41
42
-
Here's the same example as above, but with`defer`:
42
+
Yukarıdaki ile aynı örnek, fakat burada`defer` niteliği mevcut:
```smart header="The small script downloads first, runs second"
83
-
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.
82
+
```smart header="Küçük komut dosyası önce indirilir, sonra çalıştırılır."
83
+
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.
84
84
85
-
But the specification requires scripts to execute in the document order, so it waits for `long.js` to execute.
85
+
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.
86
86
```
87
87
88
-
```smart header="The `defer`attribute is only for external scripts"
89
-
The `defer` attribute is ignored if the `<script>`tag has no `src`.
88
+
```smart header="`defer`niteliği yalnızca dışarıdan aktarılan komut dosyaları içindir"
89
+
Eğer `<script>`etiketinde `src` yoksa `defer` niteliği yok sayılır.
90
90
```
91
91
92
92
93
93
## async
94
94
95
-
The `async` attribute means that a script is completely independent:
95
+
`async` niteliği, bir script'in tamamiyle bağımsız olduğu anlamına gelir:
96
96
97
-
- The page doesn't wait for async scripts, the contents is processed and displayed.
98
-
- `DOMContentLoaded` and async scripts don't wait each other:
99
-
- `DOMContentLoaded` may happen both before an async script (if an async script finishes loading after the page is complete)
100
-
- ...or after an async script (if an async script is short or was in HTTP-cache)
101
-
- Other scripts don't wait for `async` scripts, and `async` scripts don't wait for them.
- `DOMContentLoaded` ve asenkron script'ler (async scripts) birbirlerini beklemezler:
99
+
- `DOMContentLoaded` ya bir asenkron script'ten (async script) önce gerçekleşebilir (bir asenkron script sayfa tamamlandıktan sonra yüklemeyi bitirirse)
100
+
- ...ya da bir asenkron script'ten sonra (bir asenkron script küçük ya da HTTP önbelleğinde mevcut ise)
101
+
- Diğer script'ler, `async` script'leri için, `async` script'leri de onlar için beklemez.
102
102
103
103
104
-
So, if we have several `async` scripts, they may execute in any order. Whatever loads first -- runs first:
104
+
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:
1.The page content shows up immediately: `async`doesn't block it.
120
-
2.`DOMContentLoaded` may happen both before and after `async`, no guarantees here.
121
-
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.
119
+
1.Sayfa içeriği hemen görünür: `async`sayfayı engellemez.
120
+
2.`DOMContentLoaded`, `async`'den öncede gerçekleşebilir, sonrada gerçekleşebilir. Burada garanti yok.
121
+
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.
122
122
123
-
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:
123
+
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.
124
124
125
125
```html
126
-
<!-- Google Analytics is usually added like this-->
126
+
<!-- Google Analytics genellikle bu şekilde eklenir-->
We can also add a script dynamically using JavaScript:
133
+
Ayrıca, JavaScript kullanarak dinamik olarak bir script ekleyebiliriz:
134
134
135
135
```js run
136
136
let script =document.createElement('script');
137
137
script.src="/article/script-async-defer/long.js";
138
138
document.body.append(script); // (*)
139
139
```
140
140
141
-
The script starts loading as soon as it's appended to the document `(*)`.
141
+
Script `(*)`, belgeye eklenir eklenmez yüklenmeye başlar.
142
142
143
-
**Dynamic scripts behave as "async" by default.**
143
+
**Dinamik scriptler varsayılan olarak "async" gibi davranır..**
144
144
145
-
That is:
146
-
-They don't wait for anything, nothing waits for them.
147
-
-The script that loads first -- runs first ("load-first" order).
145
+
Yani:
146
+
-Onlar herhangi bir şeyi beklemezler, hiçbir şeyde onları beklemez.
147
+
-İlk yüklenen script, önce çalıştırılır ("ilk sıradakini yükle")
148
148
149
-
We can change the load-first order into the document order (just like regular scripts) by explicitly setting `async` property to `false`:
149
+
`async` özelliğini `false` olarak ayarlarsak, yükleme sırasını belge sırası olacak şekilde değiştirebiliriz:
150
150
151
151
```js run
152
152
let script =document.createElement('script');
@@ -159,7 +159,7 @@ script.async = false;
159
159
document.body.append(script);
160
160
```
161
161
162
-
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":
162
+
Ö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.
163
163
164
164
165
165
```js run
@@ -170,29 +170,29 @@ function loadScript(src) {
170
170
document.body.append(script);
171
171
}
172
172
173
-
// long.js runs first because of async=false
173
+
// long.js, async=false olduğundan dolayı önce çalıştırılır.
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.
181
+
`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.
182
182
183
-
But there are also essential differences between them:
183
+
Ancak aralarında temel farklılıklar vardır:
184
184
185
-
||Order|`DOMContentLoaded`|
185
+
||Sıra|`DOMContentLoaded`|
186
186
|---------|---------|---------|
187
-
|`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. |
188
-
|`defer`|*Document order* (as they go in the document). |Execute after the document is loaded and parsed (they wait if needed), right before `DOMContentLoaded`. |
187
+
|`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.|
188
+
|`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. |
189
189
190
-
```warn header="Page without scripts should be usable"
191
-
Please note that if you're using `defer`, then the page is visible *before* the script loads.
190
+
```warn header="Sayfa, scriptler olmadan kullanılabilir olmalıdır."
So the user may read the page, but some graphical components are probably not ready yet.
193
+
Yani kullanıcılar sayfayı okuyabilir, fakat bazı grafiksel bileşenler muhtemelen henüz hazır değildir.
194
194
195
-
There should be "loading" indication in proper places, not-working buttons disabled, to clearly show the user what's ready and what's not.
195
+
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.
196
196
```
197
197
198
-
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.
198
+
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.
0 commit comments