Web Programlama Eğitimi: Üçüncü Taraf Scriptlerini İzole Etme

Web Programlama Eğitimi: Script Envanteri ve Etkiyi Sahiplenme

Üçüncü taraf kodunu sadece etiket yöneticisinde görünen URL'lerle sınırlı sanmayın: bir analitik etiketi runtime sırasında piksel, feature-flag, replay veya reklam endpoint'leri çağırabilir. Chrome DevTools Network sekmesinde "Initiator" sütununu açın, `third-party` filtre grubunu oluşturun ve her origin için sahibi, yükleme koşulu, aktardığı veri ve kaldırma sahibi olan takımı içeren bir envanter çıkarın. Ardından Chrome Coverage ile kullanılmayan JavaScript yüzdesini domain bazında kaydedin; örneğin ödeme akışında yüklenen ama `%0` kullanılan bir chat widget, teknik borç değil doğrudan kaldırılabilir bir bağımlılıktır.

JavaScript eğitimi içinde kritik bir ayrıntı şudur: `async` etiketi parser'ı engellemez ama script çalıştığı anda ana iş parçacığını yine bloke edebilir; `defer` ise doküman parse sırasını korur ve `DOMContentLoaded` öncesinde çalışır. Bu nedenle yalnızca `async` eklemek etkileşim maliyetini kanıtlamaz. Aşağıdaki DevTools Console komutu, açık sayfadaki harici script origin'lerini tekrar sayılarıyla listeler; sonuç, tag manager içinden enjekte edilen scriptleri de görünür kılar.

const scripts = [...document.scripts]
  .filter(s => s.src)
  .map(s => new URL(s.src).origin);

console.table([...new Set(scripts)].map(origin => ({
  origin,
  count: scripts.filter(x => x === origin).length
})));

Frontend Development Eğitimi: Long Task Önce-Sonra Ölçümü

Değişiklikten önce ve sonra aynı cihaz sınıfında ölçüm yapın: Chrome DevTools Performance ile CPU throttling'i 4脳 seçin, cache'i devre dışı bırakın, soğuk navigasyon kaydı alın ve kullanıcı akışındaki arama, sepete ekleme veya form gönderme adımını tekrarlayın. Flame chart'ta `Task` bloklarını 50 ms üstünde filtreleyin; `Self time` değeri üçüncü taraf dosyasında görünen görevleri ayrı not edin. Lighthouse puanı tek başına karşılaştırma değildir: kabul kriterini örneğin "checkout yolunda 200 ms üzeri üçüncü taraf long task sayısı 6'dan en fazla 1'e inecek" şeklinde yazın.

Saha verisinde long task sayısını RUM endpoint'inize göndererek laboratuvar sonucunu doğrulayın. `PerformanceObserver`, tarayıcının desteklediği `longtask` girdilerinde attribution sağlayabilir; ancak cross-origin scriptlerde attribution alanı boş veya sınırlı olabilir. Bu yüzden kendi yükleyicinizde script ID'sini de işaretleyin ve `sendBeacon` yükünü küçük tutun.

if (PerformanceObserver.supportedEntryTypes.includes('longtask')) {
  const observer = new PerformanceObserver(list => {
    const tasks = list.getEntries().map(entry => ({
      duration: Math.round(entry.duration),
      start: Math.round(entry.startTime),
      container: entry.attribution?.[0]?.containerName || 'unknown'
    }));
    navigator.sendBeacon('/rum/long-tasks', JSON.stringify({
      path: location.pathname,
      tasks
    }));
  });
  observer.observe({ type: 'longtask', buffered: true });
}

Önce-sonra analizinde median'a ek olarak p75 ve p95 kullanın; birkaç hızlı kullanıcı ortalamayı yanıltır. BigQuery, ClickHouse veya Datadog RUM üzerinde sürüm/experiment kolonu ile iki cohort karşılaştırın. Bir scripti geciktirdiğinizde dönüşüm olayının eksik düşmediğini de aynı sorguda kontrol edin; performans kazancı uğruna consent veya satın alma event'ini kaybetmek, ölçümde görünmeyen bir regresyondur.

ReactJS Eğitimi ve VueJS Eğitimi: Koşullu Script Yükleme

ReactJS eğitimi sırasında sık görülen hata, provider scriptini modülün en üst seviyesinde import etmektir; bu yaklaşım route hiç açılmasa bile kodun indirilmesine veya çalışmasına yol açar. Bunun yerine kullanıcı onayı ve ilgili route birlikte sağlandıktan sonra idempotent bir loader çağırın. `data-vendor` işareti, React Strict Mode geliştirme ortamında effect'in yeniden çalışmasıyla aynı scriptin iki kez eklenmesini önler.

export function loadVendor(src) {
  const existing = document.querySelector(
    `script[data-vendor='support-widget']`
  );
  if (existing) return Promise.resolve();

  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.dataset.vendor = 'support-widget';
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// React route bileşeninde: useEffect(() => { if (consent.analytics) loadVendor(url) }, [consent.analytics])

VueJS eğitimi için aynı desen `onMounted` ve route guard ile uygulanabilir; ancak SSR kullanan projede `document` erişimini yalnızca istemci tarafında yapın. Örneğin Nuxt/Vue tarafında `if (import.meta.client && consent.value.marketing)` koruması olmadan yükleyici çalıştırmak, server render sırasında `document is not defined` hatasına neden olur. Widget'ın yalnızca destek sayfasında gerektiği durumlarda Vue Router'ın `beforeEnter` guard'ında izin kontrolü yapıp loader'ı orada başlatmak, homepage kritik yoluna bu bağımlılığı sokmaz.

Script erişimini CSP ile kısıtlayın; whitelist'i sadece `https:` gibi geniş bir şemaya açmak, ele geçirilmiş bir DOM enjeksiyonunun herhangi bir HTTPS origininden kod çalıştırabilmesine izin verir. Sunucunun ürettiği nonce'u hem HTTP başlığına hem gerekli inline bootstrap'e koyun. Harici sağlayıcı sürüm URL'sini değiştirdiğinde CSP ihlallerini Reporting API endpoint'inden izleyin.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-r4nd0m' https://cdn.example-vendor.com;
  connect-src 'self' https://api.example-vendor.com;
  report-to csp-endpoint

Angular Eğitimi ve AngularJS Eğitimi: Legacy Widget Sınırları

Angular eğitimi alan ekipler için üçüncü taraf DOM manipülasyonunu Angular'ın render ağacından ayırmak gerekir. Widget'ı bir `ElementRef` host'una ekleyin, route değişiminde sağlayıcının `destroy()` API'sini çağırın ve callback içinden state güncelliyorsanız `NgZone.run()` ile bilinçli olarak zone'a dönün. Aksi halde widget callback'i ekranda veri değiştirip Angular change detection'ı tetiklemeyebilir; tersine her mouse event'ini zone içinde dinlemek de gereksiz uygulama turu başlatır.

AngularJS eğitimi verilen legacy kod tabanlarında `$compile` ile sağlayıcıdan gelen HTML'i derlemek ciddi bir sınır ihlalidir: template içindeki directive ifadeleri scope'a erişebilir. Bunun yerine widget'ı sandbox'lı iframe içinde çalıştırın ve dar bir `postMessage` protokolü tanımlayın. `event.origin` doğrulaması yapılmadan gelen mesajı işlemek, iframe'in yönlendirildiği veya başka bir pencerenin mesaj gönderdiği durumda sahte event üretir.

<iframe id='chat-frame' sandbox='allow-scripts' src='https://widget.example.com'></iframe>
<script>
window.addEventListener('message', event => {
  if (event.origin !== 'https://widget.example.com') return;
  if (event.data?.type === 'chat:opened') {
    document.body.dataset.chatOpen = 'true';
  }
});
</script>

Bir frontend framework karşılaştırması yapılırken React, Angular ve Vue'nun render maliyetlerini yalnız değerlendirmek yanıltıcıdır; aynı vendor scripti frameworkten bağımsız olarak main thread'i tüketir. Karşılaştırmayı eşit akışta yapın: aynı widget, aynı CPU throttling ve aynı izin durumu ile Chrome trace alın; frameworke ait scripting süresini vendor originine ait scripting süresinden ayırın. Böylece `zone.js`, React commit veya Vue component update maliyetini reklam/analitik kodunun maliyetiyle yanlış biçimde birleştirmezsiniz.

React Native Eğitimi: WebView İçindeki Üçüncü Taraf Kod

React Native eğitimi bağlamında WebView'a bir web widget'ı koymak, onu native uygulamanın ağ ve mesajlaşma sınırlarından muaf yapmaz. `react-native-webview` kullanırken `originWhitelist={['https://help.example.com']}` tanımlayın, `onMessage` içindeki JSON'u şema doğrulamasından geçirin ve WebView'a token enjekte etmeyin. Özellikle `injectedJavaScript` içine string birleştirerek kullanıcı verisi koymak, widget sayfasındaki XSS'in uygulama köprüsüne erişmesini kolaylaştırır.

WebView köprüsünde izin verilen mesaj türlerini açıkça sınırlayın; aşağıdaki örnekte beklenmeyen payload native navigasyon başlatamaz. Bu yaklaşımı Android emulator ve iOS simulator üzerinde proxy ile test ederken Charles Proxy veya mitmproxy kullanarak widget'ın açtığı ek originleri de envantere ekleyin.

const allowed = new Set(['support:close', 'support:opened']);

<WebView
  source={{ uri: 'https://help.example.com/widget' }}
  originWhitelist={['https://help.example.com']}
  onMessage={({ nativeEvent }) => {
    let message;
    try { message = JSON.parse(nativeEvent.data); } catch { return; }
    if (!allowed.has(message.type)) return;
    if (message.type === 'support:close') navigation.goBack();
  }}
/>

Sık Sorulan Sorular

Web programlama eğitimi kapsamında üçüncü taraf JavaScript maliyeti nasıl ölçülür?

Chrome DevTools Performance kaydında 4脳 CPU throttling ile aynı kullanıcı akışını çalıştırın, 50 ms üzerindeki Task bloklarının URL ve self time değerlerini kaydedin. Ardından PerformanceObserver ile saha long task verisini toplayıp p75/p95 değerlerini script sürümü veya deney koluna göre karşılaştırın.

ReactJS eğitimi için async script kullanmak neden yeterli değildir?

`async`, HTML parser beklemesini azaltır; indirilen dosyanın parse ve execute aşaması yine ana iş parçacığında gerçekleşir. Scripti kullanıcı izni ve route koşulundan sonra, tekrar eklemeyi önleyen idempotent loader ile başlatın; sonuçta long task sayısını önce-sonra trace ile doğrulayın.

Angular eğitimi projelerinde üçüncü taraf widget callback'i neden görünümü güncellemez?

Harici callback Angular zone dışında çalışırsa Angular change detection turu başlamaz. State güncellemesini `ngZone.run(() => { ... })` içine alın; fakat yüksek frekanslı scroll veya mouse event'lerini bu blokta tutmayın, aksi halde her event uygulama genelinde change detection tetikleyebilir.

AngularJS eğitimi alan legacy ekipler widget HTML'ini $compile ile çalıştırmalı mı?

Hayır. Sağlayıcı HTML'ini `$compile` etmek directive expression'larının AngularJS scope'una ulaşmasına yol açabilir. Sandbox iframe kullanın, yalnızca sabit bir origin'den gelen ve türü allowlist'te bulunan `postMessage` payload'larını işleyin.

Frontend framework karşılaştırması yapılırken vendor script etkisi nasıl ayrıştırılır?

Her frameworkte aynı widget ve aynı cihaz profiliyle trace alın. Chrome Performance flame chart'ında vendor originine ait Evaluate Script/Function Call sürelerini framework kaynaklı React commit, Angular change detection veya Vue update sürelerinden ayrı gruplayın; toplam scripting süresini tek bir framework metriği olarak yorumlamayın.