---
title: 'Frontend Kalitesi'
source: 'https://academia.sh/tr/kurslar/frontend-kalitesi'
language: tr
updated: '2026-08-17T04:40:58+00:00'
license: 'CC BY-SA 4.0'
lessons: 27
outcomes:
- 'Başarım bütçesi tanımlar ve ölçümle doğrular'
- 'Erişilebilirlik ölçütlerini standart düzeyinde uygular'
- 'İstemci tarafı güvenlik risklerini savunma katmanlarıyla azaltır'
---
# Frontend Kalitesi
Yayınlanmış bir arayüzün ölçülebilir kalite eksenleri; başarımın kullanıcı merkezli ölçütlerle bütçelenmesi, erişilebilirliğin standart ölçütlere bağlanması, istemci tarafı güvenlik savunmaları ve davranışı doğrulayan test ile izleme düzeni.
## Başarım
Kullanıcı merkezli ölçütlerin tanımı, kritik oluşturma yolunun kısaltılması, görsel ve yazı tipi yükleme stratejileri, ağ katmanının başlıklarla ayarlanması, çalışma zamanındaki uzun görevler ve bütün bunları bir bütçeye bağlayıp gerilemeyi yakalama.
### Kullanıcı Merkezli Ölçütler
Source: https://academia.sh/tr/kurslar/frontend-kalitesi/kullanici-merkezli-olcutler
Yayınlanmış bir arayüzün hızını kullanıcının algıladığı olaylarla ölçmek; yükleme, etkileşim ve görsel kararlılık ölçütlerinin tanımları, düzen kayması puanının hesabı ve dağılımın yüzdeliklerle özetlenmesi.
Kuzey Yamaç Ölçüm İstasyonu uygulaması üretiliyor, paketleniyor ve yayınlanıyor. Derleme
çıktısı bir barındırma hedefine çıkıyor, sürümler geri alınabiliyor, ortam değişkenleri
ayrılmış durumda. Yayın hattının yanıtladığı soru "kod kullanıcıya ulaşıyor mu" idi ve
yanıtı evet.
Yanıtlanmayan soru şudur: ulaşan şey kullanıcı için ne kadar iyi çalışıyor? Bu ders o
sorunun ölçülebilir hâlini kurar. Ölçütler kullanıcının algıladığı olaylara bağlanır;
bütçeye bağlanmaları bu konunun son dersine kalır.
#### Teknik Kilometre Taşları Yanlış Soruyu Yanıtlar
Sayfanın yüklenmesi, tarayıcı için tanımlı olayları olan bir süreçtir: belge ayrıştırması
biter, alt kaynaklar iner, yükleme olayı tetiklenir. Bu olaylar ölçülebilir ve
kaydedilebilir. Sorun ölçülebilirlikte değil, neyi temsil ettiklerindedir.
İstasyon listesi sayfası düşünülsün. Liste sunucudan gelen HTML içinde geliyor ve hemen
görünüyor; sayfanın altındaki bir harita bileşeni ise büyük bir betik indirip iki saniye
sonra hazır oluyor. Yükleme olayı harita hazır olduğunda tetiklenir. Kullanıcı ise
listesini bir saniyede görmüş, aradığı istasyona çoktan dokunmuştur.
Ters durum da vardır: belge erken biter, ama ekranda okunabilir hiçbir şey yoktur çünkü
içerik betikle üretilmektedir. Yükleme olayı erkendir, kullanıcının gördüğü boş ekrandır.
İki durumda da teknik kilometre taşı doğrudur ve deneyimi yanlış anlatır. Ölçütün öznesi
tarayıcının iç akışı değil, kullanıcının ekranda gördüğü ve yaptığı şey olmalıdır.
#### Üç Soru, Beş Ölçüt
Kullanıcı merkezli ölçütler üç soruyu ayırır.
**Ne zaman bir şey gördüm?** Bu sorunun iki ölçüsü vardır. **İlk bayt süresi (time to
first byte)** isteğin gönderilmesiyle yanıtın ilk baytının gelmesi arasındaki süredir;
Ağ Panelinde Tanı dersinde aşamalara bölünen zamanlamanın ilk parçasıdır. Sunucu tarafını
ölçer ve istemcide yapılacak eniyilemenin tavanını belirler: sonraki her ölçüt bu sürenin
üstüne biner. **İlk içerik boyası (first contentful paint)** ekranda belgeden gelen
herhangi bir içeriğin — metin, görsel, tuval çizimi — ilk kez çizildiği andır. Boş ekranın
bittiğini söyler, sayfanın hazır olduğunu söylemez.
**Ne zaman asıl içeriği gördüm?** **En büyük içerik boyası (largest contentful paint)**,
görünüm alanındaki en büyük içerik ögesinin çizildiği andır. Ölçütün fikri şudur: bir
sayfanın "yüklendi" hissi, en çok yer kaplayan ögenin gelmesiyle oluşur. İstasyon listesi
sayfasında bu öge listenin kendisidir; ölçüm ayrıntısı sayfasında istasyon fotoğrafıdır.
Ölçüt yükleme boyunca güncellenir; daha büyük bir öge sonradan çizilirse aday değişir ve
ölçüt ileri kayar.
**Ne zaman dokunduğuma yanıt aldım?** **Sonraki boyaya etkileşim (interaction to next
paint)**, kullanıcının bir etkileşiminden — tıklama, dokunma, tuş — ekranın bunu yansıtan
sonraki boyamasına kadar geçen süredir. Ölçülen şey işleyicinin süresi değil, kullanıcının
gördüğü gecikmenin tamamıdır: girdinin işlenmeyi beklediği süre, işleyicinin süresi ve
karenin üretilmesi. Sayfa boyunca birçok etkileşim olur; ölçüt bunların en kötülerini
temsil eden tek bir değer verir.
**Ekran ayağımın altından kaydı mı?** **Kümülatif düzen kayması (cumulative layout
shift)**, beklenmedik yer değiştirmelerin toplamıdır. Web'in Temelleri ve HTML kursunda
içerik kayması adıyla tanıtılan olgunun niceliksel karşılığıdır ve tek ölçüt içinde süre
değil, oransız bir puan verir.
#### Görsel Kararlılığın Puanı
Kayma puanı iki payın çarpımıdır. **Etki payı**, kayan ögenin iki ardışık karedeki görünür
alanlarının birleşiminin görünüm alanına oranıdır: ekranın ne kadarı etkilendi? **Uzaklık
payı**, ögenin kat ettiği en büyük mesafenin görünüm alanının büyük kenarına oranıdır: ne
kadar uzağa gitti?
Aşağıdaki hesap, kayan ögelerin görünüm alanı genişliğini kapladığını varsayar; bu
varsayımla etki bölgesi iki boyutlu bir alandan tek bir dikey aralığa iner. Daha dar
ögelerde aynı çarpım genişlik oranıyla ölçeklenir.
```js
// kayma.mjs — tek bir duzen kaymasinin puani ve oturum penceresi toplami
const GORUNTU = { genislik: 390, yukseklik: 844 }; // gorunum alani, CSS pikseli
// Her kayma: kararsiz ogenin kayma oncesi ve sonrasi dikey araligi.
const kaymalar = [
{ ad: "duyuru serigi acildi", once: [96, 700], sonra: [196, 800] },
{ ad: "istasyon gorseli yerlesti", once: [200, 444], sonra: [224, 468] },
{ ad: "olcum rozeti geldi", once: [512, 560], sonra: [520, 568] },
];
function kaymaPuani(kayma) {
const [oncekiUst, oncekiAlt] = kayma.once;
const [sonrakiUst, sonrakiAlt] = kayma.sonra;
// Etki bolgesi: iki karedeki gorunur alanlarin birlesimi.
const birlesimUst = Math.max(0, Math.min(oncekiUst, sonrakiUst));
const birlesimAlt = Math.min(GORUNTU.yukseklik, Math.max(oncekiAlt, sonrakiAlt));
const etkiPayi = (birlesimAlt - birlesimUst) / GORUNTU.yukseklik;
// Uzaklik payi: ogenin kat ettigi en buyuk mesafe / gorunum alaninin buyuk kenari.
const mesafe = Math.abs(sonrakiUst - oncekiUst);
const uzaklikPayi = mesafe / Math.max(GORUNTU.genislik, GORUNTU.yukseklik);
return { etkiPayi, uzaklikPayi, mesafe, puan: etkiPayi * uzaklikPayi };
}
console.log("kayma".padEnd(28) + "mesafe".padStart(8) + "etki".padStart(8) +
"uzaklik".padStart(9) + "puan".padStart(8));
let toplam = 0;
for (const k of kaymalar) {
const s = kaymaPuani(k);
toplam += s.puan;
console.log(
k.ad.padEnd(28) + `${s.mesafe}px`.padStart(8) +
s.etkiPayi.toFixed(3).padStart(8) + s.uzaklikPayi.toFixed(3).padStart(9) +
s.puan.toFixed(4).padStart(8));
}
console.log("-".repeat(61));
console.log("oturum penceresi toplami".padEnd(28) + toplam.toFixed(4).padStart(33));
console.log(`esik degerlendirmesi: ${toplam <= 0.1 ? "iyi" : toplam <= 0.25 ? "gelistirilmeli" : "kotu"}`);
```
```
kayma mesafe etki uzaklik puan
duyuru serigi acildi 100px 0.834 0.118 0.0988
istasyon gorseli yerlesti 24px 0.318 0.028 0.0090
olcum rozeti geldi 8px 0.066 0.009 0.0006
-------------------------------------------------------------
oturum penceresi toplami 0.1085
esik degerlendirmesi: gelistirilmeli
```
Üç kaymanın etkisi birbirinden çok farklıdır. Sayfanın üstüne sonradan açılan yüz piksellik duyuru
şeridi, altındaki her şeyi taşıdığı için ekranın yüzde seksen üçünü etkiler ve tek başına puanın
neredeyse tamamını üretir. Ölçüm rozetinin sekiz piksellik oynaması ise on binde altı eder.
Buradan iki kural çıkar. Kaymanın maliyeti kayan ögenin boyutuyla değil, **altında ne
kadar içerik olduğuyla** orantılıdır: sayfanın en üstündeki küçük bir öge, en altındaki
büyük bir ögeden pahalıdır. Ve puan çarpım olduğu için iki payın biri sıfıra yaklaştığında
sonuç sıfıra yaklaşır — görünüm alanının dışında olan bir kayma hiç sayılmaz.
Toplama kuralı da tanımın parçasıdır: kaymalar **oturum penceresi** içinde toplanır ve
sayfanın puanı bu pencerelerin en büyüğüdür. Bir pencere, aralarında uzun boşluk olmayan
kaymaları bir arada tutar; uzun süre açık kalan bir sayfa, saatler boyunca biriken küçük
kaymalar yüzünden kötü puan almaz.
Kullanıcı hareketiyle başlayan kaymalar ölçüte girmez. Bir düğmeye basıldığında açılan
panelin altındakileri itmesi beklenen bir sonuçtur; ölçülen şey **beklenmedik** kaymadır.
#### Alan Verisi ve Laboratuvar Verisi
Aynı ölçüt iki ayrı yolla toplanır ve ikisi farklı soruları yanıtlar.
**Laboratuvar verisi**, denetlenen koşullarda üretilmiş ölçümdür: sabit ağ kısıtlaması,
sabit aygıt profili, eklentisiz tarayıcı, soğuk önbellek. Yeniden üretilebilir olduğu için
karşılaştırmaya elverişlidir; iki derlemenin farkını ölçmenin tek güvenilir yolu budur.
Yanıtlamadığı soru, gerçek kullanıcıların ne yaşadığıdır.
**Alan verisi**, gerçek ziyaretlerden toplanan ölçümdür. Aygıt çeşitliliğini, ağ
koşullarını ve kullanıcı davranışını içerir. Yanıtlamadığı soru ise nedendir: bir ölçütün
kötüleştiğini söyler, hangi kaynağın geciktiğini söylemez.
İkisi birbirinin yerine geçmez. Alan verisi sorunun **var olduğunu**, laboratuvar verisi
**nerede olduğunu** gösterir. Sonraki boyaya etkileşim gibi ölçütler ancak kullanıcı
etkileşimiyle oluştuğu için laboratuvar koşulunda doğrudan üretilemez; ölçülebilmesi için
etkileşimin taklit edilmesi gerekir ve taklit, gerçek kullanım örüntüsünü temsil etmez.
#### Dağılımı Özetlemek
Alan verisi tek bir sayı değil, bir dağılımdır ve dağılımın hangi sayıyla özetlendiği
sonucu değiştirir.
```js
// dagilim.mjs — ayni sayfanin iki farkli ozeti: ortalama ve yuzdelikler
// Dagilim uretilmis bir ornektir, olculmus alan verisi degildir:
// belirlenimci bir uretecle 500 ziyaret uretilir.
let tohum = 20260728;
const rastgele = () => (tohum = (tohum * 1103515245 + 12345) % 2147483648) / 2147483648;
const ziyaretler = Array.from({ length: 500 }, () => {
// Ziyaretlerin yaklasik ucte biri yavas kosulda (uzak ag, yavas aygit).
const yavas = rastgele() < 0.3;
return yavas
? Math.round(3400 + rastgele() * 2100)
: Math.round(1200 + rastgele() * 800);
});
function yuzdelik(dizi, p) {
const sirali = [...dizi].sort((a, b) => a - b);
const konum = (p / 100) * (sirali.length - 1);
const alt = Math.floor(konum);
const ust = Math.ceil(konum);
return sirali[alt] + (sirali[ust] - sirali[alt]) * (konum - alt);
}
const ortalama = ziyaretler.reduce((a, b) => a + b, 0) / ziyaretler.length;
console.log("en buyuk icerik boyasi ozeti (uretilmis ornek dagilim, 500 ziyaret)");
for (const [ad, deger] of [
["ortalama", ortalama],
["ortanca (50.)", yuzdelik(ziyaretler, 50)],
["75. yuzdelik", yuzdelik(ziyaretler, 75)],
["95. yuzdelik", yuzdelik(ziyaretler, 95)],
]) {
const sinif = deger <= 2500 ? "iyi" : deger <= 4000 ? "gelistirilmeli" : "kotu";
console.log(`${ad.padEnd(16)}${(deger / 1000).toFixed(2)} s -> ${sinif}`);
}
const iyiOran = ziyaretler.filter((v) => v <= 2500).length / ziyaretler.length;
console.log(`esigin altinda kalan ziyaret orani: ${(iyiOran * 100).toFixed(1)}%`);
```
```
en buyuk icerik boyasi ozeti (uretilmis ornek dagilim, 500 ziyaret)
ortalama 2.38 s -> iyi
ortanca (50.) 1.73 s -> iyi
75. yuzdelik 3.56 s -> gelistirilmeli
95. yuzdelik 5.15 s -> kotu
esigin altinda kalan ziyaret orani: 72.4%
```
Dağılım, programın içinde belirlenimci bir üreteçle kurulmuştur; ölçülmüş bir alan verisi
değil, iki özetleme yönteminin farkını göstermek için üretilmiş bir örnektir. Ziyaretlerin
üçte biri yavaş koşulda, geri kalanı hızlı koşulda varsayılmıştır.
Sonuç aynı veriye iki çelişik cevap verir. Ortalama iki virgül otuz sekiz saniyedir ve iyi
sınıfına düşer; yetmiş beşinci yüzdelik üç virgül elli altı saniyedir ve geliştirilmeli
sınıfına düşer. Aradaki fark bir hesap hatası değil, ortalamanın çalışma biçimidir: hızlı
ziyaretler yavaşların ağırlığını gizler.
Yüzdelik bunu yapamaz. Yetmiş beşinci yüzdelik, "kullanıcıların dörtte üçü bu değerden
daha iyisini gördü" demektir ve doğrudan bir kullanıcı payına karşılık gelir. Eşiğin
altında kalan ziyaret oranı da aynı bilgiyi verir: bu dağılımda ziyaretlerin yüzde
yetmiş ikisi iyi eşiğinin altındadır.
Ölçütlerin standart eşikleri de dağılım üzerinden tanımlıdır. En büyük içerik boyası için
iki buçuk saniyeye kadar iyi, dört saniyeye kadar geliştirilmeli sayılır; kümülatif düzen
kayması için sınırlar sıfır virgül bir ve sıfır virgül yirmi beştir; sonraki boyaya
etkileşim için iki yüz ve beş yüz milisaniyedir. Sınıflandırma tek bir ziyarete değil,
seçilen yüzdeliğe uygulanır.
#### İstasyon Sayfalarında Ölçüt Seçimi
Uygulamanın iki sayfası aynı ölçütlerle değerlendirilmez.
**İstasyon listesi sayfası** bir gezinme başlangıcıdır. Kullanıcı buraya listeyi görmek
için gelir ve hemen bir satıra dokunur. Belirleyici ölçütler en büyük içerik boyası ile
kümülatif düzen kaymasıdır: liste geç gelirse bekler, geç kayarsa yanlış satıra dokunur.
**Ölçüm ayrıntısı sayfası** bir çalışma yüzeyidir. Kullanıcı tarih aralığı değiştirir,
grafiği süzer, birim çevirir. Belirleyici ölçüt sonraki boyaya etkileşimdir; yükleme bir
kez olur, etkileşim onlarca kez.
Ölçüt seçimi bu yüzden sayfanın işine bağlıdır. Bütün ölçütleri her sayfa için aynı ağırlıkla
izlemek, hangi işin bozulduğunu gizler.
#### Özet
- Teknik kilometre taşları tarayıcının iç akışını ölçer; kullanıcı merkezli ölçütler
kullanıcının gördüğü ve yaptığı şeyi ölçer, ikisi birbirinden bağımsız kötüleşebilir.
- Üç soru beş ölçüte bağlanır: ilk bayt süresi ile ilk içerik boyası boş ekranın bitişini,
en büyük içerik boyası asıl içeriğin gelişini, sonraki boyaya etkileşim yanıt süresini,
kümülatif düzen kayması görsel kararlılığı ölçer.
- Düzen kayması puanı etki payı ile uzaklık payının çarpımıdır; maliyeti belirleyen, kayan
ögenin boyutu değil altında kalan içeriğin miktarıdır.
- Alan verisi sorunun var olduğunu, laboratuvar verisi nerede olduğunu gösterir; biri
yeniden üretilebilir, diğeri temsil edicidir.
- Dağılım ortalamayla özetlendiğinde yavaş ziyaretler gizlenir; yüzdelik doğrudan bir
kullanıcı payına karşılık geldiği için ölçüt eşikleri yüzdeliğe uygulanır.
#### Sonraki Adım
Ölçütler tanımlandı ve hangi sayısıyla okunacakları belirlendi. Bir sonraki soru,
ölçülen sürelerin nereye harcandığıdır. En büyük içerik boyası geç gerçekleşiyorsa gecikme
üç yerden birindedir: sunucunun yanıt üretmesi, yanıtın taşınması ya da tarayıcının ekrana
bir şey çizebilmek için beklemek zorunda olduğu kaynaklar. Üçüncüsü tümüyle geliştiricinin
denetimindedir ve çoğu zaman en büyük paydır. Sonraki ders, ilk boyamanın hangi kaynakları
beklediğini ve bu bekleyişin kaç gidiş-dönüşe mal olduğunu hesaplanabilir bir model
üzerinden ele alır.
### Kritik Oluşturma Yolu
Source: https://academia.sh/tr/kurslar/frontend-kalitesi/kritik-olusturma-yolu
İlk boyamanın beklemek zorunda olduğu kaynaklar; çizimi engelleyen biçem ile ayrıştırmayı engelleyen betiğin ayrımı, gidiş-dönüş sayısının hesaplanması ve engellemeyi kaldıran yazımlar.
Önceki ders ölçütleri tanımladı: en büyük içerik boyası geç gerçekleşiyorsa bir sorun
vardır. Gecikmenin üç kaynağı olabilir — sunucunun yanıtı üretmesi, yanıtın taşınması ve
tarayıcının ekrana bir şey çizebilmek için beklemek zorunda olduğu kaynaklar. Üçüncüsü
tümüyle geliştiricinin denetimindedir.
Bu ders o bekleyişi tanımlar. **Kritik oluşturma yolu (critical rendering path)**, ilk
boyamanın gerçekleşebilmesi için tamamlanması zorunlu olan işler zinciridir. Zincirin
uzunluğu ölçülebilir ve kısaltılabilir.
#### İki Farklı Engelleme
Tarayıcı belgeyi yukarıdan aşağı ayrıştırır ve yol boyunca karşılaştığı kaynakları ister.
İki tür kaynak bu akışı durdurur ve ikisi farklı biçimde durdurur.
**Çizimi engelleyen biçem.** Bir dış biçem dosyası indirilip çözümlenmeden tarayıcı hiçbir
şey çizmez. Gerekçesi basamaklamadır: CSS ile Görsel Sunum kursunda kurulan kurala göre bir
ögenin hesaplanmış değeri, henüz inmemiş bir dosyadaki bildirimle değişebilir. Eksik
biçemle çizmek, saniyeler sonra bambaşka görünen bir sayfa demektir. Tarayıcı bu yüzden
bekler. Belgenin ayrıştırılması sürer — biçem dosyası ayrıştırmayı durdurmaz — ama boyama
durur.
**Ayrıştırmayı engelleyen betik.** Belge içine yazılmış, `defer` ya da `async` taşımayan
bir betik, indirilip çalıştırılana kadar ayrıştırmayı durdurur. Gerekçesi betiğin belgeyi
değiştirebilmesidir: betik, kendisinden sonraki içeriği üretebilir ya da silebilir, bu
yüzden tarayıcı devam edemez. Ayrıştırma durduğu için ondan sonrası keşfedilemez; boyama
da zaten olamaz.
İki engelleme birleşir. Betikten önce gelen bir biçem dosyası, betiğin çalışmasını da
bekletir: betik hesaplanmış değerleri okuyabileceği için tarayıcı biçemin çözümlenmesini
beklemek zorundadır. Böylece tek bir sıralama kararı üç işi birbirine bağlar.
#### Üç Değişken
Bekleyişin uzunluğu üç ayrı büyüklüğe bağlıdır ve bunları ayırmak, hangi eniyilemenin işe
yarayacağını belirler.
**Bayt sayısı** bant genişliğine bağlı olan bölümdür. Sıkıştırma ve ölü kod eleme buraya
etki eder.
**Gidiş-dönüş sayısı** gecikmeye bağlı olan bölümdür. Bir bağlantı üzerinde veri
gönderilirken tıkanıklık penceresi baştan küçüktür ve her turda büyür; bu yüzden büyük bir
dosya tek turda gelmez. Ağ Modelleri ve Protokoller kursunda tanımlanan bu davranış,
başarım açısından şu sonucu doğurur: ilk baytlar ucuz, sonrakiler pahalıdır.
**Zincir derinliği** ise keşif sırasına bağlıdır. Bir kaynağın varlığı ancak başka bir
kaynak indirildikten sonra öğreniliyorsa, ikisi koşut istenemez; süreleri toplanır.
Aşağıdaki model üçünü birlikte hesaplar.
```js
// kritik-yol.mjs — ilk boyanin kac gidis-donuse mal oldugunu modelleyen hesap
const MSS = 1460; // bayt: tek segmentin tasidigi veri
const BASLANGIC_PENCERESI = 10; // segment: ilk turda gonderilebilen segment sayisi
// Baglanti, tikaniklik penceresini turlar boyunca tasir; pencere her turda ikiye katlanir.
function baglanti() {
let pencere = BASLANGIC_PENCERESI;
return {
get pencere() { return pencere; },
// Bir asama: es zamanli istenen kaynaklar ayni pencereyi paylasir.
asama(baytlar) {
let kalan = baytlar.reduce((a, b) => a + b, 0);
let tur = 0;
do {
kalan -= pencere * MSS;
pencere *= 2;
tur += 1;
} while (kalan > 0);
return tur;
},
};
}
function ilkBoya(senaryo) {
const b = baglanti();
let tur = senaryo.baglantiKurulumu;
const dokum = [["baglanti kurulumu", senaryo.baglantiKurulumu, "-"]];
for (const asama of senaryo.asamalar) {
const oncekiPencere = b.pencere;
const t = b.asama(asama.baytlar);
tur += t;
dokum.push([asama.ad, t, `${oncekiPencere} -> ${b.pencere} segment`]);
}
return { tur, dokum };
}
// Kuzey Yamac Olcum Istasyonu — istasyon listesi sayfasi.
// Baglanti kurulumu: ad cozumleme 1 + tasima el sikismasi 1 + guvenli el sikisma 1 = 3 tur.
const senaryolar = [
{
ad: "A: engelleyen bicem ve betik basta",
baglantiKurulumu: 3,
asamalar: [
{ ad: "HTML govdesi", baytlar: [18_400] },
{ ad: "engelleyen bicem + betik", baytlar: [62_000, 141_000] },
{ ad: "betigin kesfettigi bicem", baytlar: [24_000] },
],
},
{
ad: "B: betik ertelendi",
baglantiKurulumu: 3,
asamalar: [
{ ad: "HTML govdesi", baytlar: [18_400] },
{ ad: "engelleyen bicem", baytlar: [62_000] },
],
},
{
ad: "C: kritik bicem gomuldu",
baglantiKurulumu: 3,
asamalar: [
{ ad: "HTML govdesi (+ gomulu bicem)", baytlar: [18_400 + 9_800] },
],
},
];
console.log("--- yavas baslangic: k. tur sonunda gonderilebilmis toplam bayt ---");
let birikim = 0;
let pencere = BASLANGIC_PENCERESI;
for (let k = 1; k <= 4; k++) {
birikim += pencere * MSS;
console.log(`${k}. tur pencere ${String(pencere).padStart(3)} segment toplam ${String(birikim).padStart(7)} bayt`);
pencere *= 2;
}
console.log("\n--- ilk boyaya kadar gidis-donus dokumu ---");
const sonuclar = [];
for (const s of senaryolar) {
const r = ilkBoya(s);
sonuclar.push({ ad: s.ad, tur: r.tur });
console.log(`\n${s.ad}`);
for (const [ad, t, p] of r.dokum) {
console.log(` ${ad.padEnd(30)} ${t} tur ${p}`);
}
console.log(` ${"TOPLAM".padEnd(30)} ${r.tur} tur`);
}
console.log("\n--- senaryolarin karsilastirmasi ---");
const taban = sonuclar[0].tur;
for (const s of sonuclar) {
console.log(`${s.ad.padEnd(34)} ${String(s.tur).padStart(2)} tur A'ya oran: ${(s.tur / taban).toFixed(2)}`);
}
```
```
--- yavas baslangic: k. tur sonunda gonderilebilmis toplam bayt ---
1. tur pencere 10 segment toplam 14600 bayt
2. tur pencere 20 segment toplam 43800 bayt
3. tur pencere 40 segment toplam 102200 bayt
4. tur pencere 80 segment toplam 219000 bayt
--- ilk boyaya kadar gidis-donus dokumu ---
A: engelleyen bicem ve betik basta
baglanti kurulumu 3 tur -
HTML govdesi 2 tur 10 -> 40 segment
engelleyen bicem + betik 3 tur 40 -> 320 segment
betigin kesfettigi bicem 1 tur 320 -> 640 segment
TOPLAM 9 tur
B: betik ertelendi
baglanti kurulumu 3 tur -
HTML govdesi 2 tur 10 -> 40 segment
engelleyen bicem 2 tur 40 -> 160 segment
TOPLAM 7 tur
C: kritik bicem gomuldu
baglanti kurulumu 3 tur -
HTML govdesi (+ gomulu bicem) 2 tur 10 -> 40 segment
TOPLAM 5 tur
--- senaryolarin karsilastirmasi ---
A: engelleyen bicem ve betik basta 9 tur A'ya oran: 1.00
B: betik ertelendi 7 tur A'ya oran: 0.78
C: kritik bicem gomuldu 5 tur A'ya oran: 0.56
```
İlk tablo tıkanıklık penceresinin büyümesini gösteriyor: ilk turda on dört kilobaytın
biraz üzerinde veri gönderilebiliyor, dördüncü turun sonunda iki yüz kilobaytı aşıyor. Bu
sayı bir sınır değil, bir başlangıç varsayımıdır; başlangıç penceresi yapılandırmaya
bağlıdır ve model değeri en başta bir sabit olarak açıyor.
Üç senaryo aynı sayfayı üç ayrı yazımla kuruyor. A senaryosunda engelleyen biçem ve betik
belgenin başında duruyor, üstelik betik indirildikten sonra ikinci bir biçem dosyası
keşfediliyor. B senaryosunda betik erteleniyor; hem kendi baytları hem de keşfettiği
zincir kritik yoldan çıkıyor. C senaryosunda ilk ekranın biçemi belgenin içine gömülüyor
ve dış istek kalmıyor.
Sonuç oranlarla okunur: B senaryosu A'nın yüzde yetmiş sekizi, C senaryosu yüzde elli
altısı kadar bekliyor. Mutlak süre verilemez, çünkü tur süresi ağa bağlıdır — ama tur
sayısı yazımın kendisinden çıkar ve karşılaştırılabilir.
Model iki noktada gerçeği sadeleştirir. Aşamalar içindeki koşut isteklerin aynı pencereyi
paylaştığını varsayar ve pencerenin boşta kalma sonrası küçülmesini hesaba katmaz. İkisi de
sonucu B ve C lehine değil, A lehine kaydırır; yani gerçek fark modelin gösterdiğinden
küçük değil, büyüktür.
#### Engellemeyi Kaldırmak
Kritik yolu kısaltmanın yolları, engellemenin iki türüne karşılık gelir.
**Betiği kritik yoldan çıkarmak.** `defer` bildirimi, betiğin ayrıştırmaya koşut
indirilmesini ve belge ayrıştırması bittikten sonra, yazıldığı sırayla çalıştırılmasını
sağlar. `async` da koşut indirir ama indiği anda çalıştırır; sıra garantisi yoktur ve
çalıştığı an ayrıştırmayı yine keser. Birbirine bağımlı betikler için `defer`, bağımsız ve
tek başına çalışan betikler için `async` uygundur. Modül olarak yüklenen betikler
öntanımlı olarak ertelenmiş davranır.
**Biçemi koşullu hâle getirmek.** Bir biçem bağlantısına `media` özniteliği yazıldığında,
koşul o anda tutmuyorsa dosya çizimi engellemez. Yazdırma biçemleri ve yalnızca geniş
ekranlarda geçerli biçemler bu yolla kritik yoldan çıkarılır. Dosya yine indirilir, ancak
düşük öncelikle ve boyamayı bekletmeden.
**Kritik biçemi gömmek.** İlk ekranı çizmeye yeten bildirimler belgenin içine yazılır;
kalan biçem engellemeyen bir yolla yüklenir. Bu, C senaryosundaki kazancın kaynağıdır ve
bedeli vardır: gömülü biçem ayrı önbelleklenemez, her sayfa isteğiyle yeniden gelir ve
belgeyi büyütür. Karar, tekrar ziyaret oranına bağlıdır — ilk ziyaretin ağırlıklı olduğu
bir sayfada kazanç, her gün açılan bir panelde kayıptır.
**Geç keşfedilen kaynağı öne çekmek.** Bir kaynak ancak biçem çözümlendikten ya da betik
çalıştıktan sonra keşfediliyorsa, `preload` bildirimiyle belge başında istenebilir. Bu
bildirim bir eniyileme değil, bir düzeltmedir: zinciri kısaltmanın doğrudan yolu varken
kullanılmamalıdır, çünkü yanlış yazıldığında kaynağı iki kez indirtir ya da gerçekten
kritik olan bir kaynağın bant genişliğini alır.
#### Keşif Zinciri
A senaryosundaki dördüncü satır — "betiğin keşfettiği biçem" — tek başına bir turdan fazla
maliyet üretir, çünkü o tur ancak betik indirilip çalıştıktan sonra başlayabilir.
Tarayıcının ön tarayıcısı belgeyi ayrıştırmadan önce hızlıca gözden geçirir ve gördüğü
kaynakları erkenden ister. Ön tarayıcının göremediği tek şey, belgede yazılı olmayan
kaynaklardır: betik tarafından eklenen bağlantılar, biçem dosyası içinden çağrılan başka
biçemler, bir yapılandırma dosyası okunduktan sonra belirlenen adresler.
Bu yüzden kritik yol eniyilemesinin en etkili adımı çoğu zaman bayt azaltmak değil,
**zinciri düzleştirmektir**: kritik kaynakların hepsinin belgenin ilk baytlarında görünür
olması.
#### İstasyon Listesi Sayfasının Belge Başı
```html
Kuzey Yamaç Ölçüm İstasyonu — İstasyonlar
```
İkinci bağlantı bir yazım hilesidir ve açıklanması gerekir: `media="print"` yazılan bir
biçem çizimi engellemez; dosya indikten sonra `onload` işleyicisi ortamı `all` yaparak
biçemi uygular. `noscript` içindeki ikinci bağlantı, betik çalışmadığında biçemin yine de
gelmesini sağlar. Hile, biçem bağlantısı için doğrudan bir "engelleme" bildirimi
bulunmamasından doğar.
Gömülü biçemdeki `min-height` bildirimi başarım değil kararlılık içindir: liste satırları
veri gelmeden önce yüksekliklerini alır ve önceki derste hesaplanan düzen kayması oluşmaz.
İki hedef aynı bildirimde buluşur.
#### Özet
- Kritik oluşturma yolu, ilk boyamanın beklemek zorunda olduğu işler zinciridir; çizimi
engelleyen biçem boyamayı, ayrıştırmayı engelleyen betik hem ayrıştırmayı hem boyamayı
durdurur.
- Bekleyişin üç bileşeni ayrı ayrı ele alınır: bayt sayısı bant genişliğine, gidiş-dönüş
sayısı gecikmeye, zincir derinliği keşif sırasına bağlıdır.
- Tıkanıklık penceresi turlarla büyüdüğü için ilk baytlar ucuzdur; bir kaynağı kritik
yoldan çıkarmak, onu küçültmekten çok daha büyük kazanç verebilir.
- `defer`, `async` ve `media` bildirimleri engellemeyi kaldırır; kritik biçemi gömmek dış
isteği tümüyle siler ama önbelleklenebilirlikten vazgeçer.
- Ön tarayıcı yalnızca belgede yazılı kaynakları görür; zinciri düzleştirmek çoğu zaman
bayt azaltmaktan etkilidir.
#### Sonraki Adım
Kritik yol kısaldığında ilk boyama erkene çeker, ama en büyük içerik boyası çoğu sayfada
bir metin bloğu değil bir görseldir. İstasyon listesindeki kart görselleri ve ölçüm
ayrıntısı sayfasındaki istasyon fotoğrafı, belgeden çok daha fazla bayt taşır; yazı tipi
dosyaları ise metnin ne zaman okunabilir olacağını belirler. İkisinin de kendi boyut,
biçim ve yükleme kararları vardır. Sonraki ders bu kararları ele alır ve hangi aday
dosyanın hangi koşulda indirileceğini hesaplar.
### Görsel ve Yazı Tipi Optimizasyonu
Source: https://academia.sh/tr/kurslar/frontend-kalitesi/gorsel-ve-yazi-tipi-optimizasyonu
Görselin aktarım, çözme ve çizim maliyetlerinin ayrılması; aday kümesinden doğru dosyanın seçilmesinin hesabı, biçim sınıflarına göre karar ve yazı tipi yükleme stratejisinin zaman çizelgesi.
Kritik yol kısaldığında ilk boyama erkene çeker. En büyük içerik boyası ise çoğu sayfada
bir metin bloğu değil, bir görseldir: istasyon listesindeki kart görselleri ve ölçüm
ayrıntısı sayfasındaki istasyon fotoğrafı, belgenin kendisinden çok daha fazla bayt taşır.
Yazı tipi dosyaları ise metnin ne zaman okunabilir hâle geleceğini belirler.
Bu ders iki varlık türünün boyut, biçim ve yükleme kararlarını ele alır.
#### Bir Görselin Üç Ayrı Maliyeti
Görsel eniyilemesi çoğunlukla tek bir sayıya indirgenir: dosya boyutu. Oysa aynı görsel üç
ayrı yerde maliyet üretir ve bunlar birbirinden bağımsızdır.
**Aktarım maliyeti** indirilen bayt sayısıdır. Sıkıştırma bunu düşürür.
**Çözme maliyeti** sıkıştırılmış baytların piksellere çevrilmesidir. İşlemci zamanı harcar
ve sonucunda bellekte, sıkıştırmadan bağımsız bir yer kaplar: piksel başına dört bayt.
Ağ Panelinde Tanı dersindeki aktarılan boyut–kaynak boyutu ayrımının görsellerdeki
karşılığı budur ve burada fark çok daha büyüktür. İyi sıkışan bir fotoğraf ağı yormaz,
belleği yorar.
**Çizim maliyeti** çözülmüş pikselin ekrandaki kutuya ölçeklenmesidir. Kaynak piksel sayısı
hedef kutudan büyükse fazlalık her karede yeniden ölçeklenir.
İkinci ve üçüncü maliyet, seçilen dosyanın **piksel boyutuna** bağlıdır; dosya boyutuna
değil. Aşağıdaki hesap bu ayrımı sayılara döker.
```js
// aday.mjs — aday kumesinden hangi dosyanin secildigi ve cozulmus piksel maliyeti
// istasyon karti gorseli: en boy orani 3:2
const adaylar = [400, 800, 1200, 1600, 2400]; // genislik tanimlayicilari (w)
const EN_BOY = 2 / 3;
// sizes bildirimi: 720 pikselden dar gorunum alaninda tam genislik, uzerinde 360 piksel
const yerlesimGenisligi = (gorunumGenisligi) =>
gorunumGenisligi <= 720 ? gorunumGenisligi - 32 : 360;
function secilenAday(gorunumGenisligi, pikselOrani) {
const gereken = yerlesimGenisligi(gorunumGenisligi) * pikselOrani;
return adaylar.find((a) => a >= gereken) ?? adaylar[adaylar.length - 1];
}
const cozulmusBayt = (genislik) => Math.round(genislik * genislik * EN_BOY * 4);
console.log("gorunum".padStart(8) + "oran".padStart(6) + "yerlesim".padStart(10) +
"gereken".padStart(9) + "secilen".padStart(9) + "cozulmus".padStart(11) +
"en buyuk aday".padStart(15) + "kat".padStart(7));
for (const [gorunum, oran] of [[390, 2], [390, 3], [768, 1], [768, 2], [1280, 2]]) {
const secilen = secilenAday(gorunum, oran);
const gereken = yerlesimGenisligi(gorunum) * oran;
const secilenBayt = cozulmusBayt(secilen);
const enBuyukBayt = cozulmusBayt(adaylar[adaylar.length - 1]);
console.log(
`${gorunum}px`.padStart(8) + `${oran}x`.padStart(6) +
`${yerlesimGenisligi(gorunum)}px`.padStart(10) + `${gereken}px`.padStart(9) +
`${secilen}w`.padStart(9) +
`${(secilenBayt / 1024 / 1024).toFixed(2)} MB`.padStart(11) +
`${(enBuyukBayt / 1024 / 1024).toFixed(2)} MB`.padStart(15) +
`${(enBuyukBayt / secilenBayt).toFixed(1)}x`.padStart(7));
}
console.log("cozulmus = genislik x yukseklik x 4 bayt (kanal basina 1 bayt, RGBA)");
console.log("kat = en buyuk aday secilseydi cozulmus bellegin kac kati olacagi");
```
```
gorunum oran yerlesim gereken secilen cozulmus en buyuk aday kat
390px 2x 358px 716px 800w 1.63 MB 14.65 MB 9.0x
390px 3x 358px 1074px 1200w 3.66 MB 14.65 MB 4.0x
768px 1x 360px 360px 400w 0.41 MB 14.65 MB 36.0x
768px 2x 360px 720px 800w 1.63 MB 14.65 MB 9.0x
1280px 2x 360px 720px 800w 1.63 MB 14.65 MB 9.0x
cozulmus = genislik x yukseklik x 4 bayt (kanal basina 1 bayt, RGBA)
kat = en buyuk aday secilseydi cozulmus bellegin kac kati olacagi
```
Seçim iki adımda yapılır. Önce `sizes` bildiriminden ögenin **yerleşim genişliği** çözülür;
bu, ortam sorgularıyla yazılmış bir kural kümesidir ve tarayıcı görüntü alanına bakarak
tek bir CSS piksel değeri üretir. Sonra bu değer piksel oranıyla çarpılır ve aday
kümesinden bu sayıya yeten en küçük dosya seçilir.
Tablonun anlattığı asıl şey son sütundur. Aynı görselin en büyük adayı her koşulda
çözüldüğünde on dört buçuk megabaytlık piksel verisi üretir; oysa dar bir ekranda dört yüz
piksellik dosya yeterlidir ve otuz altı kat daha az bellek harcar. Bu fark dosya
boyutlarında görünmez — iki dosyanın sıkıştırılmış hâlleri arasındaki oran çok daha
küçüktür.
Aynı tabloda ikinci bir gözlem var: geniş ekranda kart daha küçüktür. Duyarlı düzende
sütun sayısı arttıkça tek bir kartın genişliği düşer, dolayısıyla masaüstü daima daha
büyük görsel ister varsayımı yanlıştır. `sizes` bildirimi düzenden türetilmelidir,
tahminden değil.
#### Biçim Seçimi
Biçim kararı ürün adlarıyla değil, içerik sınıflarıyla verilir.
**Vektör mü, ızgara mı?** Simgeler, çizelgeler, logolar ve çizgi grafikleri geometriyle
tanımlıdır; vektör biçiminde saklandıklarında her ölçekte keskin kalır ve çözülmüş
bellekleri piksel sayısına değil geometri karmaşıklığına bağlıdır. Fotoğraf ızgara
biçimindedir; vektöre çevrilemez.
**Kayıplı mı, kayıpsız mı?** Kayıplı kodlayıcı, gözün ayırt etmediği bilgiyi atarak
sıkıştırır ve fotoğraf için doğru seçimdir. Kayıpsız kodlayıcı her pikseli korur; keskin
kenarların bulunduğu içerikte — ekran görüntüsü, metin içeren görsel, düz renk alanları —
kayıplı sıkıştırmanın bıraktığı bulanıklık görünür hâle gelir.
**Saydamlık gerekiyor mu?** Alfa kanalı destekleyen bir biçim seçilmelidir; gerekmiyorsa
seçilmemelidir, çünkü dördüncü kanal veri ekler.
**Aşamalı çözünürlük veriliyor mu?** Bazı biçimler dosyanın ilk baytlarından düşük
çözünürlüklü bir sürüm üretilmesine izin verir. Büyük bir görselde bu, kullanıcının bir
şey görmesiyle her şeyi görmesi arasındaki süreyi ayırır.
Farklı biçimlerin farklı istemcilerde desteklenmesi `picture` ögesiyle çözülür: kaynak
listesindeki her seçenek kendi içerik türünü bildirir, istemci tanımadığı türü atlar ve
sonunda `img` ögesindeki karşılığa düşer. Bu, yetenek saptamanın işaretleme düzeyindeki
karşılığıdır; hangi biçimin destekleneceğine dair varsayım gerektirmez.
#### Ne Zaman İstenir
Doğru dosya seçildikten sonra iki karar kalır: ne zaman istenecek ve yeri baştan ayrılacak
mı?
**Gecikmeli yükleme** görünüm alanının dışındaki görsellerin istenmesini erteler. Kuralın
tek istisnası önemlidir: en büyük içerik boyasına aday olan görsel gecikmeli
yüklenmemelidir. Ertelenen istek, ölçütün kendisini geciktirir.
**Öncelik bildirimi** aynı sorunun diğer ucudur. Belgede geçen bütün görseller öntanımlı
olarak düşük öncelikle istenir; ilk ekrandaki kahraman görsel için `fetchpriority="high"`
yazıldığında istek diğerlerinin önüne geçer.
**Yer ayırma** başarım değil kararlılık kararıdır, ama aynı ögede verilir. Görsele
`width` ve `height` öznitelikleri yazıldığında tarayıcı en boy oranını dosya inmeden bilir
ve kutuyu baştan ayırır. Yazılmadığında, görsel indiği anda altındaki her şey kayar —
ilk derste hesaplanan puanın en yaygın kaynağı budur.
#### Yazı Tipinin Zaman Çizelgesi
CSS ile Görsel Sunum kursundaki Yazı Tipi Yükleme dersi `font-display` değerlerini iki
döneme göre ayırmıştı: engelleme süresi boyunca metin çizilmez, değiştirme süresi boyunca
yedek yazı tipiyle çizilir. Burada sorulan soru farklıdır: dosya belirli bir anda gelirse
kullanıcı ne görür?
```js
// yazitipi-cizelge.mjs — dosya varis anina gore metnin durumu
// Belirtimde tanimli uc donem: engelleme, degistirme, geri cekilme.
const DONEMLER = {
block: { engelleme: 3000, degistirme: Infinity },
swap: { engelleme: 100, degistirme: Infinity },
fallback: { engelleme: 100, degistirme: 3000 },
optional: { engelleme: 100, degistirme: 0 },
};
function cizelge(deger, varisAni) {
const { engelleme, degistirme } = DONEMLER[deger];
const gorunmezSure = Math.min(varisAni, engelleme);
if (varisAni <= engelleme) {
return { gorunmezSure, yedekSure: 0, sonuc: "istenen yazi tipi" };
}
const degistirmeSonu = engelleme + degistirme;
if (varisAni <= degistirmeSonu) {
return { gorunmezSure, yedekSure: varisAni - engelleme, sonuc: "istenen yazi tipi" };
}
return { gorunmezSure, yedekSure: Infinity, sonuc: "yedek yazi tipi kalir" };
}
const sure = (ms) => (ms === Infinity ? "sayfa boyunca" : `${ms} ms`);
console.log("--- dosya varis anina gore metnin durumu ---");
console.log("deger".padEnd(10) + "varis".padStart(8) + "gorunmez".padStart(10) +
"yedekle".padStart(15) + " son durum");
for (const deger of Object.keys(DONEMLER)) {
for (const varis of [80, 900, 4200]) {
const c = cizelge(deger, varis);
console.log(
deger.padEnd(10) + `${varis} ms`.padStart(8) +
`${c.gorunmezSure} ms`.padStart(10) + sure(c.yedekSure).padStart(15) +
" " + c.sonuc);
}
}
```
```
--- dosya varis anina gore metnin durumu ---
deger varis gorunmez yedekle son durum
block 80 ms 80 ms 0 ms istenen yazi tipi
block 900 ms 900 ms 0 ms istenen yazi tipi
block 4200 ms 3000 ms 1200 ms istenen yazi tipi
swap 80 ms 80 ms 0 ms istenen yazi tipi
swap 900 ms 100 ms 800 ms istenen yazi tipi
swap 4200 ms 100 ms 4100 ms istenen yazi tipi
fallback 80 ms 80 ms 0 ms istenen yazi tipi
fallback 900 ms 100 ms 800 ms istenen yazi tipi
fallback 4200 ms 100 ms sayfa boyunca yedek yazi tipi kalir
optional 80 ms 80 ms 0 ms istenen yazi tipi
optional 900 ms 100 ms sayfa boyunca yedek yazi tipi kalir
optional 4200 ms 100 ms sayfa boyunca yedek yazi tipi kalir
```
Dosya hızlı geldiğinde beş değer de aynı sonucu verir; ayrım yavaş koşulda ortaya çıkar.
Dokuz yüz milisaniyede gelen bir dosya için `block` metni dokuz yüz milisaniye boyunca
görünmez bırakır, `swap` ve `fallback` yüz milisaniye sonra yedek yazı tipiyle çizer,
`optional` ise dosyayı o sayfada hiç kullanmaz.
Karar, hangi ölçütün korunduğuna göre verilir. `swap` ilk içerik boyasını korur ve düzen
kaymasını göze alır: yedek yazı tipiyle çizilen metin, asıl yazı tipi geldiğinde ölçü
değiştirir. `optional` düzen kararlılığını korur ve tasarlanan yazı tipinden vazgeçer.
`block` her ikisini de bozar ve yalnızca yedeği anlamsız olan durumlarda — simge yazı
tipleri gibi — savunulabilir.
Süre değerleri belirtimde öneri olarak verilir ve gerçekleştirime göre değişir; modeldeki
sayılar bu önerilerden alınmıştır. Değişen sayı, değerlerin birbirine göre sıralamasını
değiştirmez.
Yazı tipi maliyetini azaltmanın üç yolu vardır ve üçü de bu tabloyu iyileştirir: dosyayı
kendi metnine göre alt kümelere ayırmak indirilecek baytı azaltır, dosyayı `preload` ile
erken istemek varış anını öne çeker, yedek yazı tipini `size-adjust` ve benzeri
tanımlarla asıl yazı tipine ölçüce yaklaştırmak ise değişim anındaki kaymayı sıfıra
yaklaştırır.
#### İstasyon Kartının İşaretlemesi
```html
Kuzey Yamaç 1
```
Dosya uzantısı örnekte yer tutucudur; seçilen biçime göre yazılır. Kural uzantıda değil
yapıdadır: aday kümesi gerçek piksel genişlikleriyle bildirilir, `sizes` bildirimi düzenden
türetilir, `width` ve `height` en boy oranını baştan verir ve öncelik bildirimi yalnızca
ilk ekrandaki karta yazılır. Birden çok biçim sunulacaksa aynı `img` ögesi bir `picture`
içine alınır ve her `source` kendi içerik türünü bildirir; `img` son çare olarak kalır.
Listenin görünüm alanı dışında kalan kartlarında öncelik bildirimi bulunmaz; onlara
`loading="lazy"` yazılır. Aynı bileşenin iki farklı örneği farklı bildirimler alır ve bu
ayrım bileşen arayüzünde bir seçenek olarak dışarı çıkarılır.
#### Özet
- Bir görselin aktarım, çözme ve çizim maliyetleri ayrıdır; çözülmüş bellek dosya boyutuna
değil piksel sayısına bağlıdır ve aradaki fark kat kat olabilir.
- Aday seçimi iki adımdır: `sizes` bildiriminden yerleşim genişliği çözülür, piksel oranıyla
çarpılır ve yeten en küçük aday seçilir; bildirim düzenden türetilmelidir.
- Biçim kararı ürün adıyla değil içerik sınıfıyla verilir: vektör mü ızgara mı, kayıplı mı
kayıpsız mı, saydamlık gerekli mi, aşamalı çözünürlük veriliyor mu.
- En büyük içerik boyasına aday olan görsel gecikmeli yüklenmez; öncelik bildirimi yalnızca
ilk ekrandaki görsele yazılır ve yer ayırma her görselde yapılır.
- Yazı tipi görüntüleme davranışı bir ölçüt tercihidir: `swap` ilk içerik boyasını,
`optional` düzen kararlılığını korur.
#### Sonraki Adım
Buraya kadarki kararların hepsi belgenin ve varlıkların kendisiyle ilgiliydi: hangi dosya,
ne kadar büyük, ne zaman istenir. Bir katman daha var ve orada tek bir bayt bile
azaltmadan kazanç elde edilebilir. Aynı kullanıcı istasyon listesini ikinci kez açtığında
aynı dosyaları yeniden indirmek zorunda mıdır? Bağlantı kurulumu her seferinde baştan mı
yapılır? Bu soruların yanıtı istekte değil, yanıtın taşıdığı başlıklarda ve belgeye
yazılan bağlantı ipuçlarındadır. Sonraki ders bu başlıkları yerel bir sunucu üzerinde
ölçerek ele alır.
### Ağ Başarımı
Source: https://academia.sh/tr/kurslar/frontend-kalitesi/ag-basarimi
Tazelik ile doğrulamanın ayrılması, önbellek başlıklarının yerel bir sunucu üzerinde ölçülmesi, içerik karmalı adların değişmezlik sözü ve bağlantı ipuçlarının neyi kazandırdığı.
Önceki üç ders belgenin ve varlıkların kendisini ele aldı: hangi dosya, ne kadar büyük, ne
zaman istenir. Bir katman daha var ve orada tek bir bayt bile azaltmadan kazanç elde
edilebilir. Aynı kullanıcı istasyon listesini ikinci kez açtığında aynı dosyaları yeniden
indirmek zorunda mıdır?
Bu sorunun yanıtı istekte değil, yanıtın taşıdığı başlıklardadır. Tarayıcı ve Web Platformu
kursundaki Önbellek Stratejileri dersi program denetimli önbelleği ele almıştı; buradaki
konu, program yazılmadan sunucunun başlıklarla neyi belirlediğidir.
#### Tazelik ve Doğrulama İki Ayrı Karardır
HTTP önbelleği iki ayrı soruyu yanıtlar ve bunları karıştırmak yanlış yapılandırmanın en
yaygın nedenidir.
**Tazelik ömrü** şu soruyu yanıtlar: bu yanıt ne kadar süre sorgusuz kullanılabilir?
`Cache-Control` başlığındaki `max-age` yönergesi bir süre verir; süre dolana kadar tarayıcı
**hiç istek yapmaz**. En ucuz istek, yapılmayan istektir.
**Doğrulayıcı** şu soruyu yanıtlar: elimdeki kopya hâlâ geçerli mi? `ETag` başlığı içeriğe
bağlı bir imza taşır. Tazelik süresi dolduğunda tarayıcı bu imzayı `If-None-Match` başlığıyla
geri gönderir; içerik değişmemişse sunucu gövdesiz bir yanıt döndürür.
İki karar birbirini tamamlar. Tazelik isteği tümüyle önler; doğrulama isteği ucuzlatır. `no-cache`
yönergesi bir yanlış anlamaya yol açar: saklamayı yasaklamaz, yalnızca her kullanımdan önce
doğrulamayı zorunlu kılar. Saklamayı yasaklayan yönerge `no-store` yönergesidir.
#### Başlıkları Ölçmek
Aşağıdaki sunucu üç kaynağı üç ayrı politikayla sunar ve koşullu isteği gerçekten
karşılar.
```js
// onbellek-sunucusu.mjs — tazelik ve dogrulama basliklarini uc ayri kaynakta gosterir
import { createServer } from "node:http";
import { createHash } from "node:crypto";
const govdeler = {
"/varlik/istasyon.9f2c1a.css": {
tur: "text/css",
icerik: ".istasyon-listesi{display:grid;gap:12px}",
// Icerik karmali ad: adres degisirse icerik degismistir.
onbellek: "public, max-age=31536000, immutable",
},
"/api/istasyonlar": {
tur: "application/json",
icerik: JSON.stringify({ istasyonlar: ["kuzey-yamac-1", "kuzey-yamac-2"] }),
// Her kullanimda dogrulanir; govde yalnizca degistiyse gonderilir.
onbellek: "no-cache",
},
"/api/duyuru": {
tur: "application/json",
icerik: JSON.stringify({ duyuru: "Bakim penceresi: 03:00-04:00" }),
// Bir dakika taze; sonraki bes dakika eskisi sunulup arkada tazelenir.
onbellek: "public, max-age=60, stale-while-revalidate=300",
},
};
const etiket = (icerik) =>
`"${createHash("sha256").update(icerik).digest("hex").slice(0, 16)}"`;
createServer((istek, yanit) => {
yanit.sendDate = false;
const kaynak = govdeler[istek.url];
if (!kaynak) {
yanit.writeHead(404, { "Content-Type": "text/plain" });
return yanit.end("yok\n");
}
const dogrulayici = etiket(kaynak.icerik);
const basliklar = {
"Cache-Control": kaynak.onbellek,
ETag: dogrulayici,
Vary: "Accept-Encoding",
};
// Kosullu istek: istemcinin elindeki dogrulayici hala gecerliyse govde gonderilmez.
if (istek.headers["if-none-match"] === dogrulayici) {
yanit.writeHead(304, basliklar);
return yanit.end();
}
yanit.writeHead(200, {
...basliklar,
"Content-Type": kaynak.tur,
"Content-Length": Buffer.byteLength(kaynak.icerik),
});
yanit.end(kaynak.icerik);
}).listen(8241, "127.0.0.1", () => console.log("dinleniyor: 127.0.0.1:8241"));
```
```bash
#!/usr/bin/env bash
# onbellek-sunucusu.mjs'yi baslatir, tazelik ve dogrulama davranisini olcer, durdurur.
node onbellek-sunucusu.mjs > /dev/null &
sunucu=$!
sleep 1
temel=http://127.0.0.1:8241
for yol in /varlik/istasyon.9f2c1a.css /api/istasyonlar /api/duyuru; do
printf '%s\n' "$yol"
curl -sS -o /dev/null -D - "$temel$yol" \
| grep -iE '^(HTTP/|cache-control|etag|content-length)' \
| tr -d '\r' | sed 's/^/ /'
done
printf '\n--- kosullu istek ---\n'
etiket=$(curl -sS -o /dev/null -D - "$temel/api/istasyonlar" \
| awk 'tolower($1) == "etag:" { print $2 }' | tr -d '\r')
printf 'istemcideki dogrulayici: %s\n' "$etiket"
curl -sS -o /dev/null -H "If-None-Match: $etiket" "$temel/api/istasyonlar" \
-w 'kosullu istek -> durum %{http_code}, indirilen govde %{size_download} bayt\n'
curl -sS -o /dev/null "$temel/api/istasyonlar" \
-w 'kosulsuz istek -> durum %{http_code}, indirilen govde %{size_download} bayt\n'
kill "$sunucu"
```
```
/varlik/istasyon.9f2c1a.css
HTTP/1.1 200 OK
Cache-Control: public, max-age=31536000, immutable
ETag: "5102555c20f3670b"
Content-Length: 40
/api/istasyonlar
HTTP/1.1 200 OK
Cache-Control: no-cache
ETag: "c0c1001d3d358ea1"
Content-Length: 49
/api/duyuru
HTTP/1.1 200 OK
Cache-Control: public, max-age=60, stale-while-revalidate=300
ETag: "caefa267f7a6d1f0"
Content-Length: 41
--- kosullu istek ---
istemcideki dogrulayici: "c0c1001d3d358ea1"
kosullu istek -> durum 304, indirilen govde 0 bayt
kosulsuz istek -> durum 200, indirilen govde 49 bayt
```
Doğrulayıcı değerleri içeriğin özetinden üretildiği için bu çıktıda sabittir; içerik
değiştiğinde değişir. Bağlantı noktası olarak seçilen 8241 keyfîdir ve boş olmalıdır.
Ölçülen fark açıktır: koşullu istek gövdesiz döner. Gidiş-dönüş yine yapılmıştır — koşullu
istek gecikmeyi ortadan kaldırmaz, yalnızca aktarımı ortadan kaldırır. Tazelik ömrü ise
gidiş-dönüşü de ortadan kaldırır. İkisi arasındaki bu fark, hangi kaynağa hangi politikanın
yazılacağını belirler.
#### Değişmez Varlık, Değişken Belge
`immutable` yönergesi bir söz verir: bu adresteki içerik hiç değişmeyecek. Söz ancak
adres içerikten türetiliyorsa tutulabilir. Oluşturma Stratejileri ve Altyapı kursundaki
önbellek kırma yaklaşımı tam olarak bunu sağlar: dosya adına içerik karması yazıldığında,
içerik değiştiğinde adres de değişir ve eski adresin sonsuza kadar taze kalması bir sorun
yaratmaz.
Belge bu sözü veremez, çünkü adresi sabittir ve içeriği her yayında değişir. Belgeye
uygulanan doğru politika, uzun tazelik değil doğrulamadır.
Aradaki üçüncü durum için `stale-while-revalidate` yönergesi vardır: tazelik süresi dolduktan
sonra belirtilen süre boyunca eski kopya hemen sunulur ve tazeleme arka planda yapılır. Kullanıcı
beklemez; veri bir tur gecikmeyle tazelenir. Duyuru şeridi gibi gecikmeye toleranslı içerik için
uygundur; hesap bakiyesi gibi içerik için değildir.
Bu üç politikanın tekrar ziyarette ne kadar bayt aktardığı hesaplanabilir.
```js
// tekrar-ziyaret.mjs — baslik politikasinin tekrar ziyarette aktarilan bayta etkisi
const BASLIK_YUKU = 320; // bayt: istek + yanit basliklarinin yaklasik payi
// Istasyon listesi sayfasinin kaynaklari ve secilen politika.
const kaynaklar = [
{ ad: "belge", bayt: 18_400, politika: "no-cache" },
{ ad: "bicem", bayt: 62_000, politika: "immutable" },
{ ad: "giris betigi", bayt: 148_112, politika: "immutable" },
{ ad: "ortak betik", bayt: 101_760, politika: "immutable" },
{ ad: "yazi tipi", bayt: 41_600, politika: "immutable" },
{ ad: "kart gorseli", bayt: 86_400, politika: "immutable" },
{ ad: "istasyon veri", bayt: 9_240, politika: "max-age=60" },
];
const tamBoyut = (k) => BASLIK_YUKU + k.bayt;
const ilkZiyaret = kaynaklar.reduce((t, k) => t + tamBoyut(k), 0);
// Tekrar ziyarette bir kaynak icin aktarilan bayt.
function tekrarBayti(kaynak, gecenSaniye, degisenler) {
const degisti = degisenler.has(kaynak.ad);
switch (kaynak.politika) {
case "immutable":
// Icerik karmali ad: degistiyse adres degismistir, yeni kaynak bastan iner.
return degisti ? tamBoyut(kaynak) : 0;
case "no-cache":
// Her kullanimda dogrulanir: degismediyse yalniz basliklar gelir.
return degisti ? tamBoyut(kaynak) : BASLIK_YUKU;
case "max-age=60":
if (gecenSaniye <= 60) return 0; // hala taze: istek yok
return degisti ? tamBoyut(kaynak) : BASLIK_YUKU;
default:
return tamBoyut(kaynak);
}
}
const senaryolar = [
{ ad: "30 saniye sonra, surum ayni", gecen: 30, degisenler: new Set() },
{ ad: "300 saniye sonra, surum ayni", gecen: 300, degisenler: new Set() },
{
ad: "yeni surum yayinlandi",
gecen: 300,
degisenler: new Set(["belge", "bicem", "giris betigi"]),
},
];
console.log(`ilk ziyaret: ${(ilkZiyaret / 1024).toFixed(1)} KB`);
for (const s of senaryolar) {
console.log(`\n--- ${s.ad} ---`);
console.log("kaynak".padEnd(14) + "tekrar".padStart(10) + " politika");
let toplam = 0;
for (const k of kaynaklar) {
const b = tekrarBayti(k, s.gecen, s.degisenler);
toplam += b;
console.log(k.ad.padEnd(14) + `${(b / 1024).toFixed(2)} KB`.padStart(10) + " " + k.politika);
}
console.log("-".repeat(36));
console.log("TOPLAM".padEnd(14) + `${(toplam / 1024).toFixed(2)} KB`.padStart(10));
console.log(`ilk ziyarete oran: ${(toplam / ilkZiyaret).toFixed(4)}`);
}
console.log("\nhicbir tazelik basligi yazilmasaydi her tekrar ziyaret oran 1.0000 olurdu.");
```
```
ilk ziyaret: 458.7 KB
--- 30 saniye sonra, surum ayni ---
kaynak tekrar politika
belge 0.31 KB no-cache
bicem 0.00 KB immutable
giris betigi 0.00 KB immutable
ortak betik 0.00 KB immutable
yazi tipi 0.00 KB immutable
kart gorseli 0.00 KB immutable
istasyon veri 0.00 KB max-age=60
------------------------------------
TOPLAM 0.31 KB
ilk ziyarete oran: 0.0007
--- 300 saniye sonra, surum ayni ---
kaynak tekrar politika
belge 0.31 KB no-cache
bicem 0.00 KB immutable
giris betigi 0.00 KB immutable
ortak betik 0.00 KB immutable
yazi tipi 0.00 KB immutable
kart gorseli 0.00 KB immutable
istasyon veri 0.31 KB max-age=60
------------------------------------
TOPLAM 0.63 KB
ilk ziyarete oran: 0.0014
--- yeni surum yayinlandi ---
kaynak tekrar politika
belge 18.28 KB no-cache
bicem 60.86 KB immutable
giris betigi 144.95 KB immutable
ortak betik 0.00 KB immutable
yazi tipi 0.00 KB immutable
kart gorseli 0.00 KB immutable
istasyon veri 0.31 KB max-age=60
------------------------------------
TOPLAM 224.41 KB
ilk ziyarete oran: 0.4892
hicbir tazelik basligi yazilmasaydi her tekrar ziyaret oran 1.0000 olurdu.
```
Kaynak boyutları hesabın girdisidir, ölçülmüş bir uygulamanın çıktısı değildir; başlık payı
da bir varsayımdır. Hesaplanan şey politikanın sonucudur.
İlk iki senaryoda tekrar ziyaret neredeyse bedavadır. Üçüncü senaryo asıl dersi verir:
yeni sürüm yayınlandığında yalnızca **değişen** parçalar yeniden iner. Ortak betik
değişmediği için adresi de değişmemiştir ve hiç istenmez. Paketleme kararlarının başarım
sonucu buradadır — sık değişen kodla seyrek değişen kod aynı parçada toplanırsa, her yayın
ikisini birden yeniden indirtir.
#### Vary ve Önbellek Anahtarı
Bir yanıt istek başlıklarına göre değişiyorsa bu, `Vary` başlığıyla bildirilmelidir.
Bildirilmezse ara önbellekler tek bir kopyayı herkese sunar: sıkıştırılmış bir yanıt
sıkıştırma desteklemeyen bir istemciye, bir dile göre üretilmiş sayfa başka dildeki
kullanıcıya gidebilir.
Kural, doğruluk kuralıdır ve başarımı da etkiler: `Vary` listesine gereksiz başlık
eklemek, önbellek anahtarını gereğinden fazla böler ve isabet oranını düşürür. Kullanıcıya
özgü bir başlık listeye girerse önbellek pratikte devre dışı kalır.
#### Bağlantı İpuçları
Belgede yazılan bağlantı ipuçları, tarayıcıya bir işi erken yapmasını bildirir. Her biri
farklı bir aşamayı öne çeker.
`dns-prefetch` yalnızca ad çözümlemesini yapar. En ucuz ipucudur ve en az kazandırır.
`preconnect` ad çözümlemesini, taşıma bağlantısını ve güvenli el sıkışmayı önden yapar.
Kritik yol modelinde "bağlantı kurulumu" olarak sayılan turları, kaynak istenmeden önce
harcar. Bedeli vardır: kurulan ve kullanılmayan bağlantı hem istemcide hem sunucuda
kaynak tutar, bu yüzden yalnızca kesin kullanılacak kökenler için yazılır.
`preload` belirli bir kaynağı erken ister. Kritik Oluşturma Yolu dersinde anlatıldığı gibi
bu bir düzeltmedir: geç keşfedilen kritik kaynağı öne çeker. `as` özniteliği zorunludur;
yanlış yazıldığında kaynak iki kez indirilir.
`prefetch` bir **sonraki** gezinmede gerekecek kaynağı boşta indirir. Öncelik en düşüktür
ve kullanıcı o sayfaya gitmezse harcanmış bant genişliğidir.
Sıra bir öncelik sırasıdır: önce zinciri düzleştirmek, sonra `preconnect`, en son
`preload`. Ölçüm göstermeden yazılan ipucu, çoğu zaman kritik kaynağın bant genişliğini
alarak zarar verir.
#### Özet
- Tazelik ömrü isteği tümüyle önler, doğrulayıcı isteği gövdesiz hâle getirir; ikisi ayrı
sorunları çözer ve `no-cache` saklamayı değil doğrulamasız kullanımı yasaklar.
- İçerik karmalı adres, `immutable` sözünün tutulabilmesinin koşuludur; sabit adresli belge
bu sözü veremez ve doğrulamayla yönetilir.
- Yeni bir yayında yalnızca adresi değişen parçalar yeniden iner; paketleme kararı bu
yüzden bir önbellek kararıdır.
- `Vary` başlığı önce doğruluk, sonra başarım konusudur: eksikliği yanlış yanıt sunar,
fazlalığı önbelleği böler.
- Bağlantı ipuçları farklı aşamaları öne çeker ve hepsinin bir bedeli vardır; ölçüm
göstermeden yazılan ipucu kritik kaynağın önünü keser.
#### Sonraki Adım
Ağ tarafı düzenlendiğinde baytlar zamanında gelir ve tekrar ziyaret neredeyse istek
yapmaz. Buna karşın uygulama hâlâ ağır hissettirebilir: liste kaydırılırken takılıyor,
süzgeç kutusuna yazılan harf ekranda geç görünüyor, tarih aralığı değiştirildiğinde sayfa
bir an donuyor olabilir. Bu sorunların hiçbiri ağda değildir; hepsi indirilmiş kodun tek
bir sırada çalışmasından doğar. Sonraki ders bu sırayı ele alır: uzun görevlerin nasıl
ölçüldüğünü, bölüntülemenin ne kazandırdığını ve yerleşim sarsıntısının satır sayısıyla
nasıl ölçeklendiğini hesaplar.
### Çalışma Zamanı Başarımı
Source: https://academia.sh/tr/kurslar/frontend-kalitesi/calisma-zamani-basarimi
Ana iş parçacığındaki uzun görevlerin toplam engelleme süresiyle ölçülmesi, işin bölüntülenmesinin ölçülen etkisi, yerleşim sarsıntısının satır sayısıyla ölçeklenmesi ve görünmeyeni çizmemenin yolları.
Ağ tarafı düzenlendiğinde baytlar zamanında gelir ve tekrar ziyaret neredeyse istek
yapmaz. Uygulama yine de ağır hissettirebilir: istasyon listesi kaydırılırken takılıyor,
süzgeç kutusuna yazılan harf ekranda geç görünüyor, tarih aralığı değiştirildiğinde sayfa
bir an donuyor olabilir.
Bu sorunların hiçbiri ağda değildir. Hepsi indirilmiş kodun tek bir sırada çalışmasından
doğar. Tarayıcı ve Web Platformu kursundaki Başarım Kaydı dersi bu sırayı görünür kılan
aracı ele almıştı; bu ders sıranın nasıl boşaltılacağını ele alır.
#### Uzun Görev ve Toplam Engelleme Süresi
Ana iş parçacığı bir görev sırasıdır. Bir görev başladıktan sonra bölünemez: sürdüğü sürece
kullanıcı girdisi işlenemez, kare üretilemez. Elli milisaniyeyi aşan görevler **uzun görev**
sayılır ve eşiğin gerekçesi girdi yanıtıdır.
Ölçüt, uzun görevlerin sayısı değil, eşiği aşan bölümlerinin toplamıdır.
```js
// engelleme.mjs — toplam engelleme suresi ve ayni isin bolunmus hali
const UZUN_GOREV = 50; // ms
const gorevler = [
{ ad: "belge ayristirma", sure: 42 },
{ ad: "paket degerlendirme", sure: 186 },
{ ad: "istasyon listesi olusturma", sure: 128 },
{ ad: "olcum bicimleme", sure: 61 },
{ ad: "girdi isleyicisi", sure: 18 },
{ ad: "kaydirma isleyicisi", sure: 33 },
];
console.log("gorev".padEnd(28) + "sure".padStart(8) + "engelleyen".padStart(12));
let toplamEngelleme = 0;
for (const g of gorevler) {
const engelleyen = Math.max(0, g.sure - UZUN_GOREV);
toplamEngelleme += engelleyen;
console.log(g.ad.padEnd(28) + `${g.sure} ms`.padStart(8) + `${engelleyen} ms`.padStart(12));
}
console.log("-".repeat(48));
console.log("toplam engelleme suresi".padEnd(28) + `${toplamEngelleme} ms`.padStart(20));
// Ayni is, 50 ms'yi asmayan parcalara bolunurse engelleme sifira iner.
const bolunmus = gorevler.flatMap((g) => {
const parca = Math.ceil(g.sure / UZUN_GOREV);
return Array.from({ length: parca }, () => g.sure / parca);
});
const bolunmusEngelleme = bolunmus.reduce((t, s) => t + Math.max(0, s - UZUN_GOREV), 0);
console.log(`ayni is ${bolunmus.length} parcaya bolunurse: ${bolunmusEngelleme} ms engelleme`);
console.log(`toplam is suresi degismedi: ${gorevler.reduce((t, g) => t + g.sure, 0)} ms`);
```
```
gorev sure engelleyen
belge ayristirma 42 ms 0 ms
paket degerlendirme 186 ms 136 ms
istasyon listesi olusturma 128 ms 78 ms
olcum bicimleme 61 ms 11 ms
girdi isleyicisi 18 ms 0 ms
kaydirma isleyicisi 33 ms 0 ms
------------------------------------------------
toplam engelleme suresi 225 ms
ayni is 12 parcaya bolunurse: 0 ms engelleme
toplam is suresi degismedi: 468 ms
```
Görev süreleri hesabın girdisidir; hesaplanan şey ölçütün kendisidir. Dört yüz altmış sekiz
milisaniyelik işin iki yüz yirmi beş milisaniyesi engelleyicidir. Kırk iki milisaniyelik
ayrıştırma hiç sayılmaz, çünkü eşiğin altındadır — ölçüt işin tamamını değil, kullanıcının
yanıt bekleyeceği fazlalığı ölçer.
Son iki satır kritik olanı söylüyor: aynı iş elli milisaniyeyi aşmayan parçalara
bölündüğünde engelleme sıfıra iner ve toplam iş süresi hiç değişmez. Yapılan şey işi
azaltmak değil, **araya çıkış noktaları koymaktır.**
#### Bölüntülemenin Ölçülmesi
Modelin söylediği şey ölçülebilir. Aşağıdaki program aynı işi üç yazımla yapar ve her
birinde olay döngüsünün ne kadar süreyle bloke olduğunu bir yoklayıcıyla kaydeder.
```js
// boluntule.mjs — ayni isin tek parcada ve boluntulenmis olarak olculmesi
// Yanit yoklayicisi: her turda kendini yeniden kurar, gecikmesini kaydeder.
function yoklayiciBaslat(kayit) {
let calisiyor = true;
let onceki = performance.now();
const tur = () => {
if (!calisiyor) return;
const simdi = performance.now();
kayit.push(simdi - onceki);
onceki = simdi;
setTimeout(tur, 0);
};
setTimeout(tur, 0);
return () => { calisiyor = false; };
}
const SATIR = 300_000;
function satirMetni(i) {
// Her satir icin bir miktar is: bicimlenmis bir olcum satiri uretmek.
const sicaklik = -12 + ((i * 37) % 240) / 10;
const zaman = new Date(Date.UTC(2026, 0, 1, 0, 0, i % 60)).toISOString();
return `kuzey-yamac-${String(i).padStart(5, "0")} ${zaman} ${sicaklik.toFixed(1)} C`.length;
}
async function tekParcada() {
let toplam = 0;
for (let i = 0; i < SATIR; i++) toplam += satirMetni(i);
return toplam;
}
async function boluntulenmis(parcaBoyu) {
let toplam = 0;
for (let i = 0; i < SATIR; i++) {
toplam += satirMetni(i);
if ((i + 1) % parcaBoyu === 0) await new Promise((coz) => setImmediate(coz));
}
return toplam;
}
async function olc(ad, is) {
const gecikmeler = [];
const durdur = yoklayiciBaslat(gecikmeler);
await new Promise((coz) => setTimeout(coz, 20)); // yoklayici isinsin
gecikmeler.length = 0;
const bas = performance.now();
const sonuc = await is();
const gecen = performance.now() - bas;
await new Promise((coz) => setTimeout(coz, 20)); // son yoklama kaydedilsin
durdur();
const enBuyuk = Math.max(...gecikmeler);
return { ad, gecen, enBuyuk, sonuc, tur: gecikmeler.length };
}
const olcumler = [
await olc("tek parcada", tekParcada),
await olc("2000 satirlik parcalar", () => boluntulenmis(2000)),
await olc("500 satirlik parcalar", () => boluntulenmis(500)),
];
console.log("--- ayni is, farkli boluntuleme (sureler ortama baglidir) ---");
console.log("yaklasim".padEnd(24) + "toplam".padStart(10) + "en uzun engelleme".padStart(19) +
"yoklama".padStart(9));
for (const o of olcumler) {
console.log(o.ad.padEnd(24) + `${o.gecen.toFixed(1)} ms`.padStart(10) +
`${o.enBuyuk.toFixed(1)} ms`.padStart(19) + String(o.tur).padStart(9));
}
const taban = olcumler[0];
console.log("\nen uzun engellemenin tek parcaya orani:");
for (const o of olcumler) {
console.log(` ${o.ad.padEnd(24)} ${(o.enBuyuk / taban.enBuyuk).toFixed(3)}`);
}
console.log(`butun yaklasimlar ayni sonucu uretti: ${new Set(olcumler.map((o) => o.sonuc)).size === 1}`);
```
```
--- ayni is, farkli boluntuleme (sureler ortama baglidir) ---
yaklasim toplam en uzun engelleme yoklama
tek parcada 126.9 ms 128.2 ms 18
2000 satirlik parcalar 128.5 ms 2.3 ms 144
500 satirlik parcalar 135.5 ms 1.9 ms 152
en uzun engellemenin tek parcaya orani:
tek parcada 1.000
2000 satirlik parcalar 0.018
500 satirlik parcalar 0.015
butun yaklasimlar ayni sonucu uretti: true
```
Süreler makineye ve yüke bağlıdır; her çalıştırmada değişirler. Değişmeyen şey oranlardır. Toplam
süre üç yazımda birbirine yakın kalır — bölüntüleme işi azaltmaz, hatta tur başına küçük bir ek
yük getirir. En uzun engelleme ise yaklaşık iki mertebe düşer: yüz yirmi sekiz milisaniyelik tek
blok, birkaç milisaniyelik bloklara dağılır.
Yoklama sayısı bunun nedenini gösterir. Tek parçalı yazımda iş sürerken sıraya hiç
dönülmez; bölüntülenmiş yazımda her parçadan sonra dönülür ve bekleyen girdi işlenebilir.
Bu ölçüm bir tarayıcıda değil, tek iş parçacıklı bir çalışma zamanında yapılmıştır; ana iş
parçacığının davranışını doğru modeller, ama tarayıcıdaki çıkış noktası `setImmediate`
değildir. Tarayıcıda karşılığı, denetimi olay döngüsüne bırakan bir bekleme ya da boşta
çalışma çağrısıdır.
Bölüntülemenin bir de sınırı vardır: parça küçüldükçe tur başına ek yük büyür. Beş yüz
satırlık parçalarda toplam süre iki bin satırlık parçalardan yüksektir. Doğru parça boyu
"olabildiğince küçük" değil, kare bütçesine sığan en büyük parçadır.
#### İşi Sıradan Tümüyle Çıkarmak
Bölüntüleme işi ana sırada tutar ve araya girmeye izin verir. İkinci bir yol, işi sıradan
tümüyle çıkarmaktır.
Tarayıcı ve Web Platformu kursunda tanıtılan çalışanlar ayrı bir iş parçacığında koşar ve
ana sırayı hiç meşgul etmez. Uygun olduğu işler bellidir: saf hesap, ayrıştırma,
sıkıştırma, büyük veri kümesinin süzülmesi ve sıralanması. Uygun olmadığı iş de bellidir —
belge ağacına erişim. Ölçüm ayrıntısı sayfasında on binlerce ölçümün özetlenmesi çalışana
taşınabilir; sonuç ana sıraya yalnızca çizilecek satırlar olarak döner.
Bedeli veri aktarımıdır. İleti geçişi kopyalama gerektirir ve büyük dizilerde bu kopyalama
kazancı yiyebilir; aktarılabilir nesneler bunun için vardır.
#### Yerleşim Sarsıntısı Satır Sayısıyla Ölçeklenir
Düzen Sistemleri ve Duyarlı Tasarım kursundaki Animasyon Başarımı dersi zorlanmış yerleşim
hesabını tanımlamıştı: bir yazma işlemi yerleşimi geçersiz kılar, sonraki bir ölçü okuması
hesabı hemen zorlar. Okuma ile yazmanın sıralanması bu hesabı her turda tekrarlar ve buna
**yerleşim sarsıntısı** denir.
Orada sayılan şey hesap adediydi. Buradaki soru, adedin liste büyüdükçe ne olduğudur.
```js
// sarsinti.mjs — yerlesim sarsintisinin satir sayisiyla nasil olcekledigi
const KARE_BUTCESI = 1000 / 60; // ms, saniyede 60 kare varsayimiyla
const HESAP_MALIYETI = 0.05; // ms: tek bir yerlesim hesabinin varsayilan maliyeti
const GORUNUR_SATIR = 20; // gorunum alanina sigan satir sayisi
// Uc yaklasim: her biri N satir icin kac yerlesim hesabi zorlar?
const yaklasimlar = {
"dongu icinde oku-yaz": (n) => Math.max(0, n - 1),
"okumalar sonra yazmalar": () => 0,
"yalniz gorunur satirlar": (n) => Math.max(0, Math.min(n, GORUNUR_SATIR) - 1),
};
console.log("satir".padStart(7) +
Object.keys(yaklasimlar).map((a) => a.padStart(26)).join(""));
for (const n of [10, 50, 200, 1000, 5000]) {
const hucreler = Object.values(yaklasimlar).map((f) => {
const hesap = f(n);
const sure = hesap * HESAP_MALIYETI;
return `${hesap} hesap / ${sure.toFixed(1)} ms`.padStart(26);
});
console.log(String(n).padStart(7) + hucreler.join(""));
}
console.log(`\nkare butcesi: ${KARE_BUTCESI.toFixed(2)} ms`);
console.log("kac kare butcesi tuketilir:");
console.log("satir".padStart(7) +
Object.keys(yaklasimlar).map((a) => a.padStart(26)).join(""));
for (const n of [10, 50, 200, 1000, 5000]) {
const hucreler = Object.values(yaklasimlar).map((f) =>
(f(n) * HESAP_MALIYETI / KARE_BUTCESI).toFixed(1).padStart(26));
console.log(String(n).padStart(7) + hucreler.join(""));
}
console.log("\nhesap maliyeti bir varsayimdir; degistiginde sutunlarin orani degismez.");
```
```
satir dongu icinde oku-yaz okumalar sonra yazmalar yalniz gorunur satirlar
10 9 hesap / 0.5 ms 0 hesap / 0.0 ms 9 hesap / 0.5 ms
50 49 hesap / 2.5 ms 0 hesap / 0.0 ms 19 hesap / 1.0 ms
200 199 hesap / 10.0 ms 0 hesap / 0.0 ms 19 hesap / 1.0 ms
1000 999 hesap / 50.0 ms 0 hesap / 0.0 ms 19 hesap / 1.0 ms
5000 4999 hesap / 250.0 ms 0 hesap / 0.0 ms 19 hesap / 1.0 ms
kare butcesi: 16.67 ms
kac kare butcesi tuketilir:
satir dongu icinde oku-yaz okumalar sonra yazmalar yalniz gorunur satirlar
10 0.0 0.0 0.0
50 0.1 0.0 0.1
200 0.6 0.0 0.1
1000 3.0 0.0 0.1
5000 15.0 0.0 0.1
hesap maliyeti bir varsayimdir; degistiginde sutunlarin orani degismez.
```
On satırlık bir listede üç yaklaşım arasında fark yoktur; sorun bu yüzden geliştirme
sırasında görünmez. Beş bin satırda ilk yaklaşım on beş kare bütçesi tüketir, yani çeyrek
saniye boyunca hiçbir kare üretilmez.
İki çözümün karakteri farklıdır. Okumaları ve yazmaları öbeklemek maliyeti **sıfıra**
indirir ve liste büyüklüğünden bağımsızdır; yalnızca görünür satırları işlemek maliyeti
**sabitler** ve liste ne kadar büyürse büyüsün değişmez. İkincisi, sarsıntıyı olduğu gibi
bırakır ama ölçeklenmesini keser.
#### Görünmeyeni Çizmemek
Görünür olanı işlemek fikri yerleşim sarsıntısıyla sınırlı değildir; tarayıcının çizim
hattının tamamı için geçerlidir.
**Sanallaştırma** listenin yalnızca görünen bölümünü belge ağacına koyar. Kaydırıldıkça
düğümler yeniden kullanılır. Bedeli, ağaçta bulunmayan içeriğin sayfa içi aramada ve
erişilebilirlik ağacında da bulunmamasıdır.
**İçerik görünürlüğü bildirimi** aynı hedefe işaretlemeyi bozmadan yaklaşır: `content-visibility`
özelliği bir kutunun ekran dışındayken çizim ve yerleşim işlerinin atlanmasını sağlar.
Atlanan işin kutusu yine de bir yer kaplamalıdır; yoksa kaydırma çubuğu içerik göründükçe
zıplar. Bu yüzden bildirimle birlikte tahmini bir boyut verilir.
**Sınırlama** bildirimi ise bir kutunun etkisini kendi sınırlarında tutar. Animasyon
Başarımı dersinde tanıtılan `contain` bildirimi, bir kart içindeki değişikliğin yerleşim
hesabını sayfanın tamamına yaymasını önler.
#### Etkileşim Gecikmesinin Üç Bileşeni
Sonraki boyaya etkileşim tek bir sayıdır ama üç ayrı gecikmenin toplamıdır ve düzeltmeleri
farklıdır.
**Girdi gecikmesi**, kullanıcı etkileşimi ile işleyicinin başlaması arasındaki süredir.
Nedeni, o sırada süren başka bir görevdir. Çözümü bölüntüleme ya da işi çalışana taşımaktır;
işleyiciyi hızlandırmak bu bölüme dokunmaz.
**İşleme süresi**, işleyicilerin kendi süresidir. Çözümü işleyicinin küçültülmesi ve
ertelenebilir işin ertelenmesidir: kullanıcının gördüğü değişikliği hemen yap, kaydı ve
istatistiği sonraya bırak.
**Sunum gecikmesi**, işleyici bittikten sonra karenin üretilmesine kadar geçen süredir.
Nedeni işleyicinin tetiklediği yerleşim ve boyama işinin büyüklüğüdür. Çözümü, güncellenen
alanı küçültmektir.
Kaydın hangi bileşenin büyüdüğünü göstermesi, hangi düzeltmenin denenmeyeceğini de söyler.
Ölçmeden yapılan eniyileme çoğu zaman yanlış bileşene uygulanır.
#### Özet
- Toplam engelleme süresi, uzun görevlerin elli milisaniyelik eşiği aşan bölümlerinin
toplamıdır; işi bölüntülemek toplam süreyi değiştirmeden bu ölçütü sıfıra indirebilir.
- Ölçüm bunu doğrular: aynı iş bölüntülendiğinde en uzun engelleme iki mertebe düşerken
toplam süre yakın kalır; parça küçüldükçe tur başına ek yük artar.
- Çalışanlar işi ana sıradan tümüyle çıkarır; sınırları belge ağacına erişememek ve veri
kopyalama maliyetidir.
- Yerleşim sarsıntısının maliyeti satır sayısıyla doğrusal büyür; öbekleme maliyeti sıfıra
indirir, görünür satırlarla çalışmak sabitler.
- Sonraki boyaya etkileşim girdi gecikmesi, işleme süresi ve sunum gecikmesinin toplamıdır
ve her bileşenin düzeltmesi ayrıdır.
#### Sonraki Adım
Beş derste ölçütler tanımlandı, kritik yol kısaltıldı, varlıklar boyutlandırıldı, ağ
katmanı ayarlandı ve çalışma zamanı boşaltıldı. Bütün bunların ortak açığı şudur: hepsi bir
kez yapılmış iyileştirmelerdir. Yeni bir özellik eklendiğinde paket büyür, yeni bir görsel
konduğunda ilk ekranın ağırlığı artar, bir kütüphane ortak parçaya girdiğinde tekrar
ziyaret kazancı erir. Bu erimenin bir sonraki yayında fark edilmesi gerekir, aylar sonra
şikâyetle değil. Sonraki ders ölçütleri yazılı bir bütçeye bağlar ve iki derleme çıktısını
karşılaştırarak gerilemeyi yakalayan bir denetleyici kurar.
### Başarım Bütçesi
Source: https://academia.sh/tr/kurslar/frontend-kalitesi/basarim-butcesi
Başarım kararlarının yazılı bir sınıra bağlanması; bütçe türleri, sınırın nereden türetildiği, derleme çıktısını denetleyen bir program ve iki derlemeyi karşılaştırarak gerilemenin yakalanması.
Önceki beş ders bir dizi iyileştirme kurdu: ölçütler tanımlandı, kritik yol kısaltıldı,
varlıklar boyutlandırıldı, ağ katmanı ayarlandı, çalışma zamanı boşaltıldı. Hepsinin ortak
açığı aynıdır — bir kez yapılmış olmaları.
Yeni bir özellik eklendiğinde paket büyür; bir kütüphane ortak parçaya girdiğinde tekrar ziyaret
kazancı erir. Erimenin bir sonraki yayında fark edilmesi gerekir. Bu ders o mekanizmayı kurar.
#### Bütçe Bir Hedef Değildir
İkisi karıştırılır ve karıştırıldığında bütçe işlevini yitirir.
**Hedef**, ulaşılmak istenen değerdir. Yönü vardır, yaptırımı yoktur; aşıldığında bir şey
olmaz.
**Bütçe**, aşılmasına izin verilmeyen sınırdır. Aşıldığında bir şey olur: derleme başarısız
sayılır, birleştirme durur, sürüm çıkmaz. Yaptırımı olmayan bir sayı bütçe değildir.
Ayrımın pratik sonucu şudur: bütçe, ulaşılabilir bir yerde çizilir. Şu anki değerin çok
altına konan bir sınır ilk günden kırmızı yanar ve kısa sürede yok sayılmaya başlar. Doğru
yaklaşım, sınırı bugünkü değerin biraz üstüne koymak ve zamanla indirmektir.
#### Üç Bütçe Türü
Bütçeler ölçtükleri şeye göre ayrılır ve üçü de gerekir, çünkü her biri diğerinin
kaçırdığını yakalar.
**Ölçüt bütçesi** kullanıcı merkezli ölçütlere sınır koyar: en büyük içerik boyası şu
değerin altında kalacak, kümülatif düzen kayması şu puanı aşmayacak. Doğrudan deneyimi
ölçtüğü için en anlamlı bütçedir; en gürültülü olanı da budur, çünkü ölçüm koşullarına
duyarlıdır.
**Nicelik bütçesi** sayılabilir büyüklüklere sınır koyar: parça boyutları, istek sayısı,
görsel ağırlığı, yazı tipi dosyası sayısı. Belirlenimcidir — aynı derleme her zaman aynı
sayıyı üretir — ve bu yüzden yaptırıma en uygun bütçedir. Deneyimle bağı dolaylıdır: küçük
bir paket her zaman hızlı bir sayfa demek değildir.
**Kural bütçesi** sayı değil koşul içerir: ilk ekranda çizimi engelleyen dış biçem
bulunmayacak, belgede eşzamanlı betik olmayacak, en büyük içerik boyasına aday görsel
gecikmeli yüklenmeyecek. Bir sayıya indirgenemeyen kararları korur.
Sağlam bir düzen üçünü birleştirir: nicelik ve kural bütçeleri her derlemede, ölçüt
bütçesi düzenli aralıklarla denetlenir.
#### Sınır Nereden Gelir
Bir sayının bütçe olabilmesi için gerekçesi olmalıdır. Üç gerekçelendirme yolu vardır.
**Ölçütün standart eşiğinden türetme.** İlk derste anılan sınıflandırma sınırları — en
büyük içerik boyası için iki buçuk saniye, kümülatif düzen kayması için sıfır virgül bir,
sonraki boyaya etkileşim için iki yüz milisaniye — doğrudan ölçüt bütçesi olarak
yazılabilir. Denetim yetmiş beşinci yüzdeliğe uygulanır.
**Ölçütten niceliğe geri hesap.** Hedef bir ölçüt değeri seçilir, hedef bir ağ ve aygıt
profili varsayılır, aradaki bütçe baytlara çevrilir. Kritik Oluşturma Yolu dersindeki
gidiş-dönüş modeli bu hesabın iskeletidir: kaç tur harcanabileceği belirlenince kaç bayt
gönderilebileceği çıkar.
**Bugünkü değerden pay bırakarak.** En pratik ve en az iddialı yol. Ölçülen değerin üzerine
küçük bir pay eklenir ve sınır oraya konur. Bu bütçe iyileştirme getirmez; **kötüleşmeyi
durdurur.** Çoğu takım için doğru başlangıç budur.
Hangi yol seçilirse seçilsin bütçe yazılı olmalı ve depoda durmalıdır. Kimsenin
göremediği bir sınır, olmayan bir sınırdır.
#### Denetleyici
Aşağıdaki program bir derleme dökümünü bütçeyle karşılaştırır, sonra iki derlemeyi
karşılaştırıp gerilemeyi bildirir.
```js
// butce.mjs — parca boyutlarini butceyle karsilastirir ve iki derleme arasindaki gerilemeyi bulur
const KB = 1024;
// Butce: her grup icin toplama kurali, ust sinir (bayt) ve buyume toleransi (oran).
// "toplam" grubun tamamini olcer; "enBuyuk" gruptaki en agir tek parcayi olcer.
const BUTCE = {
giris: { toplama: "toplam", sinir: 170 * KB, tolerans: 0.03 },
ortak: { toplama: "toplam", sinir: 120 * KB, tolerans: 0.03 },
rota: { toplama: "enBuyuk", sinir: 45 * KB, tolerans: 0.05 },
bicem: { toplama: "toplam", sinir: 40 * KB, tolerans: 0.05 },
};
const TOPLAM_SINIR = 360 * KB;
// Derleme dokumu: her parcanin adi, grubu ve sikistirilmis boyutu.
const oncekiDerleme = [
{ ad: "giris.4a1c.js", grup: "giris", bayt: 148_112 },
{ ad: "ortak.9d02.js", grup: "ortak", bayt: 101_760 },
{ ad: "rota-istasyonlar.1f77.js", grup: "rota", bayt: 38_240 },
{ ad: "rota-olcum.55be.js", grup: "rota", bayt: 21_904 },
{ ad: "istasyon.6b3e.css", grup: "bicem", bayt: 31_648 },
];
const yeniDerleme = [
{ ad: "giris.7e90.js", grup: "giris", bayt: 151_296 },
{ ad: "ortak.c214.js", grup: "ortak", bayt: 124_368 },
{ ad: "rota-istasyonlar.02ab.js", grup: "rota", bayt: 39_120 },
{ ad: "rota-olcum.55be.js", grup: "rota", bayt: 21_904 },
{ ad: "rota-rapor.8c4d.js", grup: "rota", bayt: 17_856 },
{ ad: "istasyon.a9f1.css", grup: "bicem", bayt: 32_960 },
];
const kb = (bayt) => `${(bayt / KB).toFixed(1)} KB`;
function gruplaraTopla(derleme) {
const olcu = new Map();
for (const [grup, { toplama }] of Object.entries(BUTCE)) {
const parcalar = derleme.filter((p) => p.grup === grup).map((p) => p.bayt);
olcu.set(grup, toplama === "enBuyuk"
? Math.max(0, ...parcalar)
: parcalar.reduce((a, b) => a + b, 0));
}
return olcu;
}
const tumToplam = (derleme) => derleme.reduce((t, p) => t + p.bayt, 0);
// --- 1. Butce denetimi ---
function denetle(derleme, baslik) {
const toplamlar = gruplaraTopla(derleme);
let gecti = true;
console.log(`--- ${baslik} ---`);
console.log("grup".padEnd(8) + "kural".padEnd(9) + "boyut".padStart(11) +
"sinir".padStart(11) + "kullanim".padStart(10) + " sonuc");
for (const [grup, { sinir, toplama }] of Object.entries(BUTCE)) {
const boyut = toplamlar.get(grup);
const kullanim = boyut / sinir;
const sonuc = boyut <= sinir ? "gecti" : "KALDI";
if (boyut > sinir) gecti = false;
console.log(grup.padEnd(8) + toplama.padEnd(9) + kb(boyut).padStart(11) +
kb(sinir).padStart(11) + `${(kullanim * 100).toFixed(1)}%`.padStart(10) + " " + sonuc);
}
const genelToplam = tumToplam(derleme);
const toplamSonuc = genelToplam <= TOPLAM_SINIR ? "gecti" : "KALDI";
if (genelToplam > TOPLAM_SINIR) gecti = false;
console.log("-".repeat(55));
console.log("TOPLAM".padEnd(8) + "toplam".padEnd(9) + kb(genelToplam).padStart(11) +
kb(TOPLAM_SINIR).padStart(11) +
`${((genelToplam / TOPLAM_SINIR) * 100).toFixed(1)}%`.padStart(10) + " " + toplamSonuc);
console.log(`butce denetimi: ${gecti ? "gecti" : "KALDI"}\n`);
return gecti;
}
denetle(oncekiDerleme, "onceki derleme");
const yeniGecti = denetle(yeniDerleme, "yeni derleme");
// --- 2. Gerileme tespiti: sinirin altinda kalan buyume de bildirilir ---
console.log("--- iki derlemenin karsilastirmasi ---");
const eski = gruplaraTopla(oncekiDerleme);
const yeni = gruplaraTopla(yeniDerleme);
console.log("grup".padEnd(8) + "onceki".padStart(11) + "yeni".padStart(11) +
"fark".padStart(11) + "oran".padStart(9) + " uyari");
const uyarilar = [];
for (const [grup, { tolerans }] of Object.entries(BUTCE)) {
const a = eski.get(grup);
const b = yeni.get(grup);
const oran = (b - a) / a;
const asildi = oran > tolerans;
if (asildi) uyarilar.push(`${grup}: %${(oran * 100).toFixed(1)} buyume (tolerans %${tolerans * 100})`);
console.log(grup.padEnd(8) + kb(a).padStart(11) + kb(b).padStart(11) +
`${b - a >= 0 ? "+" : ""}${((b - a) / KB).toFixed(1)} KB`.padStart(11) +
`${oran >= 0 ? "+" : ""}${(oran * 100).toFixed(1)}%`.padStart(9) +
" " + (asildi ? "TOLERANS ASILDI" : "-"));
}
// Yeni gelen parcalar ayrica bildirilir: adres degistigi icin ad karsilastirmasi
// icerik karmasi cikarilarak yapilir.
const kok = (ad) => ad.replace(/\.[0-9a-f]{4,}\./, ".");
const eskiAdlar = new Set(oncekiDerleme.map((p) => kok(p.ad)));
const yeniParcalar = yeniDerleme.filter((p) => !eskiAdlar.has(kok(p.ad)));
console.log(`\nyeni parcalar: ${yeniParcalar.map((p) => `${kok(p.ad)} (${kb(p.bayt)})`).join(", ") || "(yok)"}`);
if (uyarilar.length === 0) console.log("gerileme uyarisi: (yok)");
else {
console.log("gerileme uyarisi:");
for (const u of uyarilar) console.log(` ${u}`);
}
const cikis = yeniGecti && uyarilar.length === 0 ? 0 : 1;
console.log(`\ncikis kodu: ${cikis}`);
process.exitCode = cikis;
```
```
--- onceki derleme ---
grup kural boyut sinir kullanim sonuc
giris toplam 144.6 KB 170.0 KB 85.1% gecti
ortak toplam 99.4 KB 120.0 KB 82.8% gecti
rota enBuyuk 37.3 KB 45.0 KB 83.0% gecti
bicem toplam 30.9 KB 40.0 KB 77.3% gecti
-------------------------------------------------------
TOPLAM toplam 333.7 KB 360.0 KB 92.7% gecti
butce denetimi: gecti
--- yeni derleme ---
grup kural boyut sinir kullanim sonuc
giris toplam 147.8 KB 170.0 KB 86.9% gecti
ortak toplam 121.5 KB 120.0 KB 101.2% KALDI
rota enBuyuk 38.2 KB 45.0 KB 84.9% gecti
bicem toplam 32.2 KB 40.0 KB 80.5% gecti
-------------------------------------------------------
TOPLAM toplam 378.4 KB 360.0 KB 105.1% KALDI
butce denetimi: KALDI
--- iki derlemenin karsilastirmasi ---
grup onceki yeni fark oran uyari
giris 144.6 KB 147.8 KB +3.1 KB +2.1% -
ortak 99.4 KB 121.5 KB +22.1 KB +22.2% TOLERANS ASILDI
rota 37.3 KB 38.2 KB +0.9 KB +2.3% -
bicem 30.9 KB 32.2 KB +1.3 KB +4.1% -
yeni parcalar: rota-rapor.js (17.4 KB)
gerileme uyarisi:
ortak: %22.2 buyume (tolerans %3)
cikis kodu: 1
```
Derleme dökümleri programın girdisidir; ölçülmüş bir projenin çıktısı değil, denetleyicinin
davranışını göstermek için yazılmış iki listedir.
#### Çıktının Söyledikleri
Bütçe tanımındaki `toplama` alanı önemli bir ayrımı taşır. Giriş, ortak ve biçem grupları
için sınır **toplama** uygulanır: bu parçaların hepsi her sayfada yüklenir. Rota grubu için
sınır **en büyük tek parçaya** uygulanır, çünkü kullanıcı bir seferde tek bir rotayı
yükler. Yanlış toplama kuralı, yeni bir rota eklendiğinde bütçeyi haksız yere kırar.
Yeni derleme iki yerde kalıyor. Ortak parça kendi sınırını yüzde bir küsur aşmış; toplam ise
sınırı yüzde beş aşmış. Toplamı aşan asıl neden ortak parçanın büyümesidir, ama yeni eklenen rota
parçası da toplama katkı yapar. İki satırın birlikte okunması, sorunun tek bir değişiklikten mi
yoksa birikimden mi geldiğini söyler.
Karşılaştırma tablosu bütçenin yakalayamadığını yakalıyor. Giriş parçası yüzde iki virgül
bir büyümüş ve sınırın hâlâ çok altında; uyarı üretmiyor. Ortak parça yüzde yirmi iki
büyümüş ve tolerans yüzde üç olduğu için uyarı üretiyor — bu parça sınırın altında kalsaydı
bile uyarı yine üretilirdi.
Ayrım budur. **Bütçe mutlak bir sınırı korur; tolerans değişim hızını korur.** Yalnız bütçe
denetlenirse, her yayında yüzde iki büyüyen bir paket aylarca sessiz kalır ve sınırı bir gün
aniden aşar; o gün hangi değişikliğin sorumlu olduğu artık bulunamaz.
Yeni parçaların ayrıca bildirilmesi de bu yüzdendir. İçerik karmalı adlar her yayında
değiştiği için karşılaştırma karma çıkarılarak yapılır; yoksa her parça yeni görünür.
#### Bütçenin Yayın Hattındaki Yeri
Denetleyicinin çıkış kodu döndürmesi tasarımın parçasıdır: derleme sonrası çalışan
doğrulama adımlarında sıfırdan farklı bir çıkış kodu adımı durdurur. Kabuk Programlama
kursunda kurulan kural burada yaptırımın taşıyıcısıdır.
İki karar gerekir. **Nerede çalışacak?** Değişiklik başına çalışan bir denetim, sorunu
birleştirmeden önce bulur; yalnız ana dalda çalışan bir denetim, sorunu bulduğunda sorumlu
değişikliği aramak gerekir.
**Ne yapacak?** Bütçe aşımının derlemeyi durdurması ile uyarı üretmesi arasındaki seçim,
bütçenin ciddiyetini belirler. Durdurmayan bütçe hedefe dönüşür. Buna karşın bir kaçış
kapısı gerekir: sınırın bilinçli olarak yükseltilebilmesi ve yükseltmenin bir kayıt
bırakması. Bütçe dosyasında yapılan değişiklik incelemeye tabi olduğunda kaçış deliği da
denetlenmiş olur.
#### Gürültü ve Yanlış Alarm
Nicelik bütçeleri belirlenimcidir; aynı girdiden aynı sayı çıkar. Ölçüt bütçeleri değildir
ve doğrudan uygulandıklarında yanlış alarm üretirler.
Üç önlem gerekir. Ölçüm **birden çok kez** yapılır ve ortanca alınır; tek bir koşu karar
için yeterli değildir. Ölçüm koşulları **sabitlenir**: aynı ağ kısıtlaması, aynı aygıt
profili, eklentisiz tarayıcı — Ağ Panelinde Tanı dersindeki yeniden üretilebilirlik
koşulları burada bütçenin ön şartıdır. Ve eşik, ölçümün doğal değişkenliğinden **belirgin
biçimde büyük** seçilir; gürültünün içinde kalan bir tolerans, sürekli kırmızı yanan ve bu
yüzden yok sayılan bir denetim üretir.
Bir de kapsam kararı vardır. Bütçe her sayfaya değil, temsilci sayfalara uygulanır:
istasyon listesi sayfası ve ölçüm ayrıntısı sayfası. İlk ders bu iki sayfanın farklı
ölçütlerle değerlendirildiğini göstermişti; bütçeleri de bu yüzden ayrı yazılır.
#### Özet
- Bütçe, aşıldığında bir şeyin olduğu sınırdır; yaptırımı olmayan sayı hedeftir ve
kötüleşmeyi durdurmaz.
- Üç bütçe türü birbirinin açığını kapatır: ölçüt bütçesi deneyimi ölçer ama gürültülüdür,
nicelik bütçesi belirlenimcidir ama dolaylıdır, kural bütçesi sayıya inmeyen kararları
korur.
- Bütçe grubunun toplama kuralı sonucu değiştirir: her sayfada yüklenen parçalar toplanır,
seçenekli parçalarda en büyüğü ölçülür.
- Mutlak sınır ile büyüme toleransı ayrı şeyleri korur; yalnız sınır denetlendiğinde küçük
ve düzenli büyümeler sınıra ulaşana kadar görünmez kalır.
- Ölçüt bütçeleri ancak ölçüm koşulları sabitlenip birden çok koşunun ortancası alındığında
yaptırıma bağlanabilir.
#### Sonraki Adım
Başarım artık bir görüş meselesi değil: tanımlı ölçütleri, yazılı sınırları ve her
derlemede çalışan bir denetimi var. Kalite ekseninin tamamı bu değildir. Bir sayfa hızlı
yüklenip yine de kullanılamaz olabilir — klavyeyle gezilemeyen bir liste, ekran okuyucuya
hiçbir şey söylemeyen bir düğme, karşıtlığı yetersiz bir metin. Bu sorunlar da bir görüş
meselesi olmak zorunda değildir; onların da tanımlı ölçütleri, ölçülebilir eşikleri ve
uygunluk düzeyleri vardır. Sonraki ders erişilebilirlik standartlarını ele alır ve
kullanılabilirliği aynı disiplinle — sınanabilir ölçütlerle — tanımlar.
## Erişilebilirlik
Erişilebilirlik ölçütlerinin yapısı ve uygunluk düzeyleri; yerel ögelerin erişilebilirlik ağacındaki karşılığı, erişilebilir ad hesabı, ARIA'nın doğru ve yanlış kullanımı, klavye erişimi, canlı bölgeler, karşıtlık eşikleri ve otomatik denetimin sınırları.
### Erişilebilirlik Standartları
Source: https://academia.sh/tr/kurslar/frontend-kalitesi/erisilebilirlik-standartlari
Erişilebilirliği ölçülebilir kılan dört ilke, ölçüt numaralarının yapısı, uygunluk düzeylerinin bağlaç kuralı ve uygunluğun sayfa değil süreç ölçeğinde tanımlı olması.
Başarım bu noktada ölçülebilir bir bütçeye bağlandı: her ölçüte bir eşik yazıldı, eşiği
aşan değişiklik bir gerileme sayıldı, gerileme yayından önce yakalandı. Bu disiplinin
değeri kararı tartışmadan çıkarıp ölçüme taşımasıydı — "sayfa hızlı mı" sorusunun yerini
"hangi ölçüt hangi eşiği aşıyor" sorusu aldı.
Aynı disiplin ikinci bir kalite ekseninde gerekir. Bir arayüzün kullanılabilir olup
olmadığı, gören bir kullanıcının fareyle denediği bir izlenim olarak bırakılırsa
ölçülemez; ölçülemeyen şey gerilediğinde fark edilmez. Sorunun yanıtı bu derste kurulacak
yapıdadır: kullanılabilirlik, sayılabilir ve doğru–yanlış olarak sınanabilir ölçütlere
bağlanır.
#### Dört İlke
Erişilebilirlik ölçütleri dört ilke altında toplanır. İlkeler ölçüt değildir; sınanamazlar.
Ölçütleri gruplayan ve her birinin hangi soruya yanıt verdiğini söyleyen çerçevedir.
**Algılanabilirlik (perceivable).** İçerik ve arayüz bileşenleri, kullanıcının
algılayabileceği biçimde sunulmalıdır. Bir bilgi yalnızca tek bir duyuya bağlıysa o duyuyu
kullanamayan kullanıcı için yoktur. Görselin alternatif metni, videonun altyazısı, rengin
tek taşıyıcı olmaması ve metnin karşıtlık eşiği bu ilkeye girer.
**Çalıştırılabilirlik (operable).** Arayüz bileşenleri ve gezinme kullanılabilir olmalıdır.
Buradaki ölçüt kullanıcının bilgiye ulaşması değil, arayüzü **işletebilmesidir**: klavyeyle
her denetime erişmek, girdiği yerden çıkabilmek, odağın nerede olduğunu görmek, yeterli
zamana sahip olmak.
**Anlaşılabilirlik (understandable).** Bilgi ve arayüzün işleyişi anlaşılır olmalıdır. Dil
bildirimi, öngörülebilir davranış, hataların tanımlanması ve düzeltme önerisi bu ilkededir.
Bir form alanı odak aldığında sayfanın kendiliğinden değişmesi, çalışan ama anlaşılmayan
bir arayüz üretir.
**Sağlamlık (robust).** İçerik, yardımcı teknolojiler dahil olmak üzere çok çeşitli
kullanıcı aracıyla yorumlanabilecek kadar sağlam olmalıdır. Bu ilke ürettiğimiz
işaretlemenin belirli bir gerçekleştirimin davranışına değil, tanımlı karşılıklara
dayanmasını ister. Bir bileşenin adının, rolünün ve değerinin program yoluyla okunabilir
olması bu ilkenin ölçütüdür.
Dört ilkenin sırası rastgele değildir ve bir bağımlılık zinciri kurar: algılanamayan bir
şey çalıştırılamaz, çalıştırılamayan bir şeyin anlaşılırlığı sorulmaz, hiçbiri sağlam
biçimde bildirilmemişse üçü de yardımcı teknolojiye ulaşmaz.
#### Ölçüt Numarası Ne Söyler
Her ölçütün üç parçalı bir numarası vardır ve numara konuşulan şeyi tek başına
konumlandırır.
İlk sayı **ilkedir**: 1 algılanabilirlik, 2 çalıştırılabilirlik, 3 anlaşılabilirlik, 4
sağlamlık. İkinci sayı ilkenin altındaki **yönergedir**; yönergeler de sınanamaz, ölçütleri
konuya göre toplar (2.4 gezinilebilirlik, 3.3 girdi yardımı gibi). Üçüncü sayı o yönergenin
altındaki **başarı ölçütüdür** ve sınanabilir tek birim odur.
Böylece 2.4.7 numarası okunduğunda, ölçütün adı bilinmese bile çalıştırılabilirlik
ilkesinin gezinme yönergesine ait olduğu bilinir. Numaralar yayımlandıktan sonra yeniden
kullanılmaz: bir ölçüt eklendiğinde yeni numara alır, var olan numaraların anlamı
değişmez. Bu, iki kişinin aynı numaradan aynı şeyi anlamasını sağlar ve hata kayıtlarında
ölçüt numarasının yazılmasını değerli kılar.
Ölçütlerin ortak özelliği **sınanabilir** olmalarıdır: her biri, bir içerik parçası için
doğru ya da yanlış olarak yanıtlanabilecek biçimde yazılmıştır. "Sayfa erişilebilir olmalı"
bir ölçüt değildir; "metin ile arka planı arasındaki kontrast oranı en az 4.5:1 olmalı"
ölçüttür.
#### Uygunluk Düzeyleri
Ölçütler üç uygunluk düzeyine dağıtılır: A, AA ve AAA. Düzey, ölçütün önemini değil
**karşılanma maliyetini ve kapsam genişliğini** anlatır. A düzeyi karşılanmadığında
kullanıcı grupları arayüzü hiç kullanamaz; AA düzeyi kullanımı ciddi biçimde zorlaştıran
engelleri kaldırır; AAA düzeyi her içerik türüne uygulanamayabilecek ek gereklerdir.
Düzeyler birikimlidir ve **bağlaç** kuralıyla değerlendirilir: AA uygunluğu, bütün A ve
bütün AA ölçütlerinin karşılanması demektir. Tek bir A ölçütü kalırsa yüzey hiçbir düzeye
uygun değildir. Aşağıdaki betik bu kuralı Kuzey Yamaç Ölçüm İstasyonu arayüzünün üç yüzeyi
üzerinde uygular.
```js
// uygunluk.mjs — olcut numarasindan ilke turetimi ve uygunluk duzeyinin hesabi
const ILKE = { 1: "algilanabilirlik", 2: "calistirilabilirlik", 3: "anlasilabilirlik", 4: "saglamlik" };
const OLCUT = {
"1.1.1": ["Metin Olmayan İçerik", "A"],
"1.3.1": ["Bilgi ve İlişkiler", "A"],
"1.4.1": ["Renk Kullanımı", "A"],
"1.4.3": ["Kontrast (En Az)", "AA"],
"1.4.6": ["Kontrast (Gelişmiş)", "AAA"],
"1.4.11": ["Metin Dışı Kontrast", "AA"],
"2.1.1": ["Klavye", "A"],
"2.1.2": ["Klavye Tuzağı Yok", "A"],
"2.4.1": ["Blokları Atlama", "A"],
"2.4.3": ["Odak Sırası", "A"],
"2.4.7": ["Odak Görünür", "AA"],
"2.5.3": ["Addaki Etiket", "A"],
"3.3.1": ["Hata Tanımlama", "A"],
"3.3.2": ["Etiketler veya Yönergeler", "A"],
"3.3.3": ["Hata Önerisi", "AA"],
"3.3.5": ["Yardım", "AAA"],
"4.1.2": ["Ad, Rol, Değer", "A"],
"4.1.3": ["Durum İletileri", "AA"],
};
const DUZEYLER = ["A", "AA", "AAA"];
// Kuzey Yamac istasyonunun uc yuzeyi: "gecti" | "kaldi" | "uygulanmaz"
const KALAN = {
"olcum-listesi": ["1.4.3", "1.4.6", "4.1.3"],
"olcum-girisi": ["1.4.6", "3.3.5", "4.1.2"],
"gonderim-onayi": ["3.3.5"],
};
const UYGULANMAZ = {
"olcum-listesi": ["3.3.1", "3.3.2", "3.3.3"],
"olcum-girisi": [],
"gonderim-onayi": ["3.3.1", "3.3.2", "3.3.3"],
};
const sonuclar = (yuzey) =>
Object.fromEntries(
Object.keys(OLCUT).map((n) => [
n,
KALAN[yuzey].includes(n) ? "kaldi" : UYGULANMAZ[yuzey].includes(n) ? "uygulanmaz" : "gecti",
]),
);
const duzeyKarsilandi = (s, duzey) =>
Object.entries(OLCUT).filter(([, [, d]]) => d === duzey).every(([n]) => s[n] !== "kaldi");
function uygunlukDuzeyi(s) {
let sonuc = "uygun degil";
for (const d of DUZEYLER) {
if (!duzeyKarsilandi(s, d)) break;
sonuc = d;
}
return sonuc;
}
console.log("yuzey gecti kaldi uygulanmaz yuzde uygunluk");
for (const yuzey of Object.keys(KALAN)) {
const s = sonuclar(yuzey);
const d = Object.values(s);
const gecti = d.filter((v) => v === "gecti").length;
const kaldi = d.filter((v) => v === "kaldi").length;
const yok = d.filter((v) => v === "uygulanmaz").length;
console.log(
`${yuzey.padEnd(16)} ${String(gecti).padStart(5)} ${String(kaldi).padStart(6)} ${String(yok).padStart(11)} ` +
`${((100 * gecti) / (gecti + kaldi)).toFixed(1).padStart(6)} ${uygunlukDuzeyi(s).padStart(11)}`,
);
}
console.log("\nkalan olcutler:");
for (const yuzey of Object.keys(KALAN)) {
for (const n of KALAN[yuzey]) {
const [ad, duzey] = OLCUT[n];
console.log(` ${yuzey.padEnd(16)} ${n.padEnd(6)} ${duzey.padEnd(4)} ${ILKE[n[0]].padEnd(20)} ${ad}`);
}
}
const SUREC = ["olcum-listesi", "olcum-girisi", "gonderim-onayi"];
const enDusuk = SUREC
.map((y) => uygunlukDuzeyi(sonuclar(y)))
.reduce((a, b) => (DUZEYLER.indexOf(a) < DUZEYLER.indexOf(b) ? a : b));
console.log(`\nsurec: ${SUREC.join(" -> ")}`);
console.log(` surecin uygunluk duzeyi: ${enDusuk}`);
const tum = SUREC.flatMap((y) => Object.values(sonuclar(y)));
const g = tum.filter((v) => v === "gecti").length;
const k = tum.filter((v) => v === "kaldi").length;
console.log(` olcut basari yuzdesi: ${((100 * g) / (g + k)).toFixed(1)}`);
console.log(` AA icin denetlenen olcut sayisi: ${Object.values(OLCUT).filter(([, d]) => d !== "AAA").length}`);
```
```
yuzey gecti kaldi uygulanmaz yuzde uygunluk
olcum-listesi 12 3 3 80.0 A
olcum-girisi 15 3 0 83.3 uygun degil
gonderim-onayi 14 1 3 93.3 AA
kalan olcutler:
olcum-listesi 1.4.3 AA algilanabilirlik Kontrast (En Az)
olcum-listesi 1.4.6 AAA algilanabilirlik Kontrast (Gelişmiş)
olcum-listesi 4.1.3 AA saglamlik Durum İletileri
olcum-girisi 1.4.6 AAA algilanabilirlik Kontrast (Gelişmiş)
olcum-girisi 3.3.5 AAA anlasilabilirlik Yardım
olcum-girisi 4.1.2 A saglamlik Ad, Rol, Değer
gonderim-onayi 3.3.5 AAA anlasilabilirlik Yardım
surec: olcum-listesi -> olcum-girisi -> gonderim-onayi
surecin uygunluk duzeyi: uygun degil
olcut basari yuzdesi: 85.4
AA icin denetlenen olcut sayisi: 16
```
Üç satır üç ayrı durumu gösteriyor. Ölçüm listesi bütün A ölçütlerini karşılıyor ama iki
AA ölçütünü kaçırıyor; düzeyi A'dır. Ölçüm girişi on beş ölçüt geçmesine rağmen tek bir A
ölçütünde (4.1.2 Ad, Rol, Değer) kaldığı için hiçbir düzeye uygun değildir. Gönderim onayı
yalnızca bir AAA ölçütünü kaçırıyor ve AA düzeyindedir.
**Uygulanmaz** sütunu bir muafiyet değildir. Gönderim onayı sayfasında form bulunmadığı
için hata ölçütleri o yüzeyde değerlendirilmez; sayfaya bir form eklendiği anda üç ölçüt
yeniden kapsama girer. Uygulanmaz sonucu, ölçütün o içerikte karşılığı olmamasıdır;
karşılığı olan ölçütün atlanması değildir.
#### Uygunluk Sayfanın Değil Sürecin Özelliğidir
Betiğin son bölümü uygunluğun neden yüzey yüzey bildirilemeyeceğini gösteriyor. Ölçüm
bildirimi üç yüzeyden geçen bir süreçtir: kullanıcı listeden bir kaydı seçer, giriş
formunu doldurur, onay yüzeyinde sonucu görür. Zincirin bir halkası kırıldığında süreç
tamamlanamaz; bu nedenle sürecin uygunluk düzeyi halkaların en düşüğüdür.
Bu kuralın üç uzantısı vardır ve üçü de uygulamada karar değiştirir.
**Sayfanın tamamı sayılır.** Bir yüzeyin uygunluğu, o yüzeyin bir bölümünün değil
tamamının uygunluğudur. Sayfanın bir köşesindeki üçüncü taraf içeriğin bileşeni de aynı
kapsamdadır.
**Bir süreç bütün olarak sayılır.** Yalnızca listeleme yüzeyinin uygun olması, ölçüm
bildirme sürecinin uygun olduğu anlamına gelmez.
**Uygun olmayan içerik engel çıkarmamalıdır.** Bir bölüm uygunluk kapsamı dışında bırakılsa
bile, sayfanın geri kalanının kullanımını engellememelidir. Odağı yakalayan, kendiliğinden
ses çalan ya da klavye dolaşımını kilitleyen bir bileşen, kapsam dışı sayılarak
temizlenemez.
Bir dördüncü koşul teknoloji seçimine bakar: kullanılan işaretleme ve betikler, yardımcı
teknolojilerin desteklediği biçimde kullanılmalıdır. Bu koşul, bir bileşenin tanımlı bir
karşılığı olmayan bir yolla bildirilmesini uygunluk dışında bırakır — bileşen bir
gerçekleştirimde çalışsa bile.
#### Bütçe ile Ölçütün Farkı
Başarım bütçesiyle uygunluk kuralı arasındaki fark, çıktının son satırlarında görünür.
Üç yüzeyde ölçütlerin yüzde 85.4'ü geçiyor; buna rağmen sürecin uygunluk düzeyi yok. Bu
oran hiçbir kararı beslemez.
Nedeni iki ölçünün matematiksel yapısının farklı olmasıdır. Başarım ölçütleri bir dağılım
üzerinde tanımlanır: bir yükleme süresi ölçütü, kullanıcıların yüzde 75'inde belirli bir
eşiğin altında kalmayı ister ve kalan yüzde 25 bilinçli olarak kabul edilir. Erişilebilirlik
ölçütleri ise bir bağlaçtır: bütün ölçütler karşılanır ya da uygunluk yoktur. Ortalama
alınmaz, çünkü kullanıcı ortalama bir sayfada gezmez — kullanamadığı tek yüzeyde durur.
Bu, erişilebilirliğin bütçelenemeyeceği anlamına gelmez; bütçenin biçimi değişir. Başarımda
bütçe bir eşik listesidir, erişilebilirlikte bir **sıfır sayımıdır**: yayına çıkan sürümde
karşılanmamış A ve AA ölçüt sayısı sıfır olmalıdır. Bilinen ve henüz düzeltilmemiş
kusurlar, ölçüt numarasıyla, etkilenen yüzeyle ve düzeltme tarihiyle açık bir listede
tutulur. Gerileme tanımı da aynıdır: dün geçen bir ölçüt bugün kalıyorsa gerileme vardır.
#### Özet
- Erişilebilirlik ölçütleri dört ilke altında toplanır: algılanabilirlik,
çalıştırılabilirlik, anlaşılabilirlik ve sağlamlık. İlkeler sınanmaz, ölçütleri gruplar.
- Ölçüt numarasının ilk sayısı ilkeyi, ikincisi yönergeyi, üçüncüsü sınanabilir ölçütü
verir; numaralar yeniden kullanılmaz ve hata kayıtlarında ortak bir dil sağlar.
- Uygunluk düzeyleri birikimlidir: AA uygunluğu bütün A ve AA ölçütlerinin karşılanmasıdır;
tek bir A ölçütü kaldığında yüzey hiçbir düzeye uygun değildir.
- Uygunluk yüzey ölçeğinde değil süreç ölçeğinde anlamlıdır; sayfanın tamamı sayılır, süreç
bütün olarak sayılır ve kapsam dışı içerik geri kalanı engellememelidir.
- Başarım bütçesi bir dağılım eşiğidir, erişilebilirlik uygunluğu bir bağlaçtır; ölçüt
başarı yüzdesi karar üretmez, karşılanmamış A ve AA ölçüt sayısı üretir.
#### Sonraki Adım
Bu ders ölçütlerin çerçevesini kurdu ama ölçütlerin denetlediği yapının ne olduğunu
açmadı. 4.1.2 ölçütü bir bileşenin adının, rolünün ve değerinin program yoluyla
okunabilmesini istiyor; bu üçlü nerede durur, kim üretir? Yanıt Anlamsal İşaretleme ve
Medya konusunda tanıtılan erişilebilirlik ağacındadır: tarayıcı belge ağacından ikinci bir
ağaç türetir ve yardımcı teknolojiler o ağacı okur. Sonraki ders bu türetmeyi kural
düzeyinde ele alır, hangi ögenin hangi rolü ürettiğini ve bir ögenin erişilebilir adının
hangi sırayla hesaplandığını gösterir.
### Anlamsal İşaretlemenin Rolü
Source: https://academia.sh/tr/kurslar/frontend-kalitesi/anlamsal-isaretlemenin-rolu
Erişilebilirlik ağacının belge ağacından türetilmesi, yerel ögelerin ürettiği örtük roller, erişilebilir adın hesaplanma sırası ve anlamsız kapsayıcıyla ödenen bedelin sayımı.
Önceki ders 4.1.2 ölçütünü listeye aldı: bir arayüz bileşeninin **adı**, **rolü** ve
**değeri** program yoluyla okunabilmelidir. Ölçütün sınanabilir olması, bu üçlünün bir
yerde gerçekten bulunmasına bağlıdır. Bir düğmenin adı sayfanın görünümünde değil, belgeden
türetilen ikinci bir yapıda durur.
O yapı, Anlamsal İşaretleme ve Medya konusunda tanıtılan **erişilebilirlik ağacıdır**. Bu
ders ağacın nasıl türetildiğini kural düzeyinde ele alır: hangi düğüm ağaca girer, girenin
rolü nereden gelir ve adı hangi sırayla hesaplanır. Üçünün de yanıtı işaretlemededir;
hiçbiri sunum katmanından okunmaz.
#### Ağaç Ağaçtan Türer
Tarayıcı, Belge Nesne Modeli ağacını dolaşarak ikinci bir ağaç kurar. İkinci ağacın
düğümleri ögelerin kendisi değil, onların **erişilebilirlik karşılıklarıdır**: her düğüm bir
rol, bir ad, bir açıklama ve bir durum kümesi taşır.
Türetme sırasında bazı düğümler ağaca hiç girmez. Budama kuralları şunlardır: sunum
katmanında görüntülenmeyen ya da görünürlüğü kaldırılmış ögeler girmez; `hidden`
özniteliği taşıyan ögeler girmez; `aria-hidden="true"` bildirimi taşıyan öge ve bütün alt
ağacı girmez; alternatif metni boş bırakılmış bir görsel sunumsal sayılarak girmez.
Buradan bir ayrım çıkar. Bir ögeyi ekrandan kaldırmanın iki yolu vardır ve ikisi ağaçta
farklı sonuç verir. Ögeyi sunum katmanında görüntüleme dışı bırakmak onu ağaçtan da siler;
ögeyi ekranın dışına taşımak ya da saydamlaştırmak ağaçta bırakır. Atlama bağlantısının
görünmeden çalışabilmesi ikinci yola dayanır: bağlantı ağaçtadır, odak alır, yalnızca göze
görünmez.
#### Örtük Rol
Ağaca giren her düğümün bir rolü vardır ve bu rol, hiçbir bildirim yazılmadığında ögenin
kendisinden gelir. Buna **örtük rol (implicit role)** denir. Karşılıkların bir bölümü
koşulludur: aynı öge, bir özniteliğe göre farklı rol üretir.
`a` ögesi yalnızca bir `href` özniteliği taşıdığında bağlantı rolü üretir; taşımadığında
ağaçta anlamsız bir düğümdür. `input` ögesinin rolü tür özniteliğinden gelir: metin alanı,
arama alanı, sayı alanı ve onay kutusu ayrı rollerdir. `th` ögesinin rolü kapsam
özniteliğine göre sütun başlığı ya da satır başlığıdır. Bölüm ögelerinin yer imi rollerine
karşılığı ve o karşılıkların koşulları Web'in Temelleri ve HTML kursunda kurulmuştu; burada
aynı türetme, denetim ögeleri için sürdürülüyor.
#### Erişilebilir Adın Hesabı
Rolden sonraki soru addır. **Erişilebilir ad (accessible name)**, bir düğümü kullanıcıya
tanıtan dizgidir ve tek bir kaynaktan gelmez: tanımlı bir öncelik sırasıyla hesaplanır.
Aşağıdaki betik sıranın yerel bölümünü uygular. ARIA kaynakları sıranın en başında durur ve
sonraki dersin konusudur; burada onlar olmadığında ne olduğu görülüyor.
```js
// ad.mjs — yerel ogelerin ortuk rolu ve erisilebilir adin hesabi (ARIA kaynaklari haric)
function rol(d) {
const o = d.oz ?? {};
switch (d.oge) {
case "a": return o.href === undefined ? "generic" : "link";
case "button": return "button";
case "input":
return { checkbox: "checkbox", radio: "radio", number: "spinbutton",
search: "searchbox", submit: "button" }[o.type ?? "text"] ?? "textbox";
case "select": return "combobox";
case "table": return "table";
case "th": return o.scope === "row" ? "rowheader" : "columnheader";
case "td": return "cell";
case "tr": return "row";
case "fieldset": return "group";
case "img": return o.alt === "" ? "— (sunumsal)" : "image";
case "ul": return "list";
case "li": return "listitem";
case "h1": case "h2": case "h3": return "heading";
case "output": return "status";
default: return "generic";
}
}
// ARIA'da icerikten ad alan roller
const ICERIKTEN = new Set(["button", "link", "heading", "cell", "columnheader",
"rowheader", "listitem", "checkbox", "radio", "option"]);
function metin(d) {
if (typeof d === "string") return d;
const o = d.oz ?? {};
if (o.hidden) return "";
if (d.oge === "img") return typeof o.alt === "string" ? o.alt : "";
return (d.cocuklar ?? []).map(metin).join(" ").replace(/\s+/g, " ").trim();
}
// Sira: yerel kaynak -> icerik metni (izin veren roller) -> son care
function ad(d, etiketler) {
const o = d.oz ?? {};
if (o.hidden) return ["", "gizli"];
if (d.oge === "img" && typeof o.alt === "string" && o.alt !== "") return [o.alt, "alt"];
for (const [oge, alt] of [["table", "caption"], ["fieldset", "legend"], ["figure", "figcaption"]]) {
if (d.oge !== oge) continue;
const c = (d.cocuklar ?? []).find((x) => x.oge === alt);
if (c) return [metin(c), alt];
}
if (["input", "select", "textarea"].includes(d.oge)) {
if (etiketler[o.id]) return [etiketler[o.id], "label ogesi"];
if (o.title) return [o.title, "title (son care)"];
if (o.placeholder) return [o.placeholder, "placeholder (son care)"];
return ["", "ad yok"];
}
if (ICERIKTEN.has(rol(d))) {
const m = metin(d);
if (m) return [m, "icerik metni"];
}
if (o.title) return [o.title, "title (son care)"];
return ["", "ad yok"];
}
// --- Kuzey Yamac: suzgec paneli ve olcum tablosundan ornekler ----------------
const ETIKET = {
"suz-kod": "İstasyon kodu",
"suz-uyari": "Yalnız uyarılı ölçümler",
deger: "Ölçülen değer (°C)",
};
const ORNEK = [
["", { oge: "button", cocuklar: ["Süz"] }],
['',
{ oge: "button", cocuklar: [{ oge: "img", oz: { alt: "Süzgeci temizle" } }] }],
['',
{ oge: "button", cocuklar: [{ oge: "img", oz: { alt: "" } }] }],
[' + label',
{ oge: "input", oz: { id: "suz-kod", type: "search" } }],
['',
{ oge: "input", oz: { id: "ara", type: "search", placeholder: "istasyon" } }],
[' + label',
{ oge: "input", oz: { id: "deger", type: "number" } }],
[' + label',
{ oge: "input", oz: { id: "suz-uyari", type: "checkbox" } }],
["