Web Programlama Eğitimi: Web Worker ile Ana Thread Tıkanmasını Ölçmek

Web programlama eğitimi: Tıkanmayı Long Animation Frame ile kanıtlayın

Bir Web Worker eklemeden önce problemi Chrome DevTools Performance panelinde yeniden üretin. Aynı makinede, aynı veri kümesiyle en az 10 arama veya filtreleme etkileşimi yapın; her kayıtta main thread üzerindeki 50 ms üzeri task sayısını, en uzun task süresini ve Interaction to Next Paint değerini not edin. CPU throttling kullanacaksanız tüm önce-sonra koşularında aynı katsayıyı koruyun. Amaç toplam işlem süresini değil, kullanıcı girdisi ile bir sonraki paint arasındaki ana thread rekabetini karşılaştırmaktır.

Long Animation Frames API, sahadaki tıkanmaları yalnızca laboratuvar kaydına bağlı kalmadan yakalamak için kullanılabilir. Aşağıdaki gözlemci, 50 ms üzerindeki frame'lerdeki blockingDuration değerini ve tetikleyen script bilgisini kaydeder. JSON.parse veya büyük bir Array.sort çağrısı çalışıyorsa, LoAF attribution çıktısı ilgili bundle dosyasını işaret edebilir.

if (PerformanceObserver.supportedEntryTypes.includes("long-animation-frame")) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.blockingDuration > 0) {
        console.log({
          start: entry.startTime.toFixed(1),
          duration: entry.duration.toFixed(1),
          blocking: entry.blockingDuration.toFixed(1),
          scripts: entry.scripts.map((script) => script.sourceURL)
        });
      }
    }
  });

  observer.observe({ type: "long-animation-frame", buffered: true });
}

Bu ölçüm, frontend development eğitimi içinde sık görülen bir yanılgıyı engeller: Bir fonksiyonun kendi süresinin 80 ms olması, her zaman 80 ms kullanıcı gecikmesi ürettiği anlamına gelmez. Task input event'inden hemen sonra çalışıyorsa paint'i geciktirir; boşta çalışıyorsa aynı etkiyi üretmeyebilir. DevTools flame chart'ta input event, JavaScript task ve sonraki paint sırasını inceleyin; sadece console.time sonucu ile karar vermeyin.

JavaScript eğitimi: Transferable nesnelerle Worker mesaj maliyetini azaltmak

Web Worker ağ isteğini hızlandırmaz; fetch sonrasında yapılan JSON decode, JSON.parse, arama indeksi oluşturma ve büyük filtreleme döngülerini ana thread'den taşır. Worker'a büyük bir plain object dizisi gönderirseniz structured clone her elemanı kopyalar. Bunun yerine response body'yi ArrayBuffer olarak alıp transfer list ile iletin. Transfer edilen buffer gönderen tarafta detached olur; aynı buffer'ı HTTP cache veya tekrar deneme için saklıyorsanız önce buffer.slice(0) ile ayrı bir kopya üretin.

// search.client.js
const worker = new Worker(
  new URL("./search.worker.js", import.meta.url),
  { type: "module" }
);

async function buildIndex(url, requestId) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();

  worker.postMessage({ requestId, buffer }, [buffer]);
  // buffer.byteLength burada 0 olur: ownership Worker'a devredildi.
}

// search.worker.js
self.onmessage = ({ data }) => {
  const text = new TextDecoder().decode(data.buffer);
  const rows = JSON.parse(text);
  const index = rows.map((row) => ({
    id: row.id,
    key: row.title.toLocaleLowerCase("tr-TR")
  }));

  self.postMessage({ requestId: data.requestId, index });
};

Worker'da oluşturulan index de büyükse onu tekrar on binlerce object olarak ana threade göndermek ikinci bir structured clone maliyeti doğurur. Sonuç sadece sayısal kimliklerden oluşuyorsa Uint32Array kullanın ve onun buffer'ını transfer edin. Paylaşımlı ve değiştirilebilir bir bellek alanı gerekiyorsa SharedArrayBuffer değerlendirilebilir, ancak bunun için sunucunun Cross-Origin-Opener-Policy: same-origin ve Cross-Origin-Embedder-Policy: require-corp başlıklarını göndermesi gerekir. Bu başlıklar üçüncü taraf iframe ve font davranışlarını değiştirebildiği için önce staging ortamında kontrol edilmelidir.

Frontend framework karşılaştırması: React, Angular ve Vue Worker yaşam döngüsü

Bir frontend framework karşılaştırması yapılırken Worker API'sinin kendisinden çok yaşam döngüsüne bakın. reactjs eğitimi projelerinde React Strict Mode geliştirme ortamında effect'i kurup temizleyerek hatalı cleanup kodunu görünür kılar. Worker her render'da oluşturulursa hem başlangıç maliyeti artar hem de eski worker'dan gelen mesaj yeni state'i ezebilir. Aşağıdaki hook, tek Worker örneği, requestId ile sonuç eşleme ve unmount sırasında bekleyen Promise'leri reddetme uygular.

import { useCallback, useEffect, useRef } from "react";

export function useSearchWorker() {
  const workerRef = useRef(null);
  const pendingRef = useRef(new Map());
  const nextIdRef = useRef(0);

  useEffect(() => {
    const worker = new Worker(
      new URL("./search.worker.js", import.meta.url),
      { type: "module" }
    );
    worker.onmessage = ({ data }) => {
      const pending = pendingRef.current.get(data.requestId);
      if (!pending) return;
      pendingRef.current.delete(data.requestId);
      pending.resolve(data.index);
    };
    workerRef.current = worker;

    return () => {
      worker.terminate();
      for (const { reject } of pendingRef.current.values()) {
        reject(new DOMException("Component unmounted", "AbortError"));
      }
      pendingRef.current.clear();
    };
  }, []);

  return useCallback((buffer) => new Promise((resolve, reject) => {
    const requestId = ++nextIdRef.current;
    pendingRef.current.set(requestId, { resolve, reject });
    workerRef.current.postMessage({ requestId, buffer }, [buffer]);
  }), []);
}

angular eğitimi tarafında Worker mesajını Angular zone dışında işleyip yalnızca görünür state değiştiğinde ChangeDetectorRef.markForCheck çağırmak, gereksiz component ağacı kontrolünü azaltır. vuejs eğitimi projelerinde worker sonucu reaktif store'a tek seferde yazılmalı; her sonuç öğesini ayrı push etmek binlerce reactive tetikleme yaratabilir. Eski angularjs eğitimi kodlarında ise onmessage doğrudan digest döngüsüne girmez; sonuç atamasını $rootScope.$applyAsync ile sarmalamak gerekir. react native eğitimi kapsamında aynı kodu taşımayın: React Native JavaScript runtime'ında tarayıcıdaki Worker global'i standart değildir; platforma uygun native thread veya desteklenen bir worker kütüphanesi seçilmelidir.

Worker optimizasyonunu önce-sonra testleri ve CSP ile doğrulamak

Önce-sonra karşılaştırmasında iki ayrı metriği kaydedin: Worker'a taşınan işin uçtan uca tamamlanma süresi ve ana thread blocking süresi. Worker sürümü bazen ilk sonucu 15-40 ms daha geç üretebilir; buna rağmen 50 ms üzeri main-thread task sayısı düşüyorsa yazma sırasında input gecikmesi iyileşir. Chrome DevTools Performance kaydında baseline ile Worker sürümünü yan yana açın, ana thread track'inde JSON.parse ve filtreleme bloklarının kaybolduğunu, Worker track'inde ise hesaplamanın göründüğünü doğrulayın.

CI içinde regression yakalamak için Playwright ile Chrome trace üretin. Her commit'te aynı fixture JSON'u kullanın, arama input'una yazı girin ve trace dosyasını artefact olarak saklayın. Trace tek başına eşik kontrolü sağlamaz; buna ek olarak uygulamanın LoAF observer çıktısını test ortamında window.__loafMetrics dizisine yazıp blockingDuration toplamını baseline ile karşılaştırın.

// playwright.config.ts içinde trace: "on-first-retry" yerine
// performans koşusu için her zaman trace alınabilir.
import { test, expect } from "@playwright/test";

test("search does not create a long blocking frame", async ({ page }) => {
  await page.goto("/search");
  await page.getByRole("textbox", { name: "Ara" }).fill("istanbul");
  await page.waitForTimeout(300);

  const totalBlocking = await page.evaluate(() =>
    window.__loafMetrics.reduce((sum, item) => sum + item.blocking, 0)
  );

  expect(totalBlocking).toBeLessThan(50);
});

Production'da Worker dosyasının yüklenebilmesi için Content-Security-Policy politikasında worker-src kuralını açıkça tanımlayın. Vite, new URL('./search.worker.js', import.meta.url) kalıbını build sırasında hash'li bir asset'e dönüştürür; bu nedenle worker-src 'self' çoğu dağıtımda yeterlidir. Blob tabanlı Worker oluşturmak CSP'ye blob: eklemeyi gerektirir ve politika yüzeyini genişletir. Sunucu yapılandırmasında şu başlığı doğrulayın: Content-Security-Policy: default-src 'self'; script-src 'self'; worker-src 'self'. Deploy sonrası DevTools Console'da CSP ihlali olmadığını ve Network panelinde Worker script'inin doğru cache header'larıyla geldiğini kontrol edin.

Sık Sorulan Sorular

javascript eğitimi için Web Worker ne zaman JSON.parse işini ana thread'den taşımaya değer?

Kararı veri boyutundan çok ölçümle verin. Chrome Performance kaydında JSON.parse veya sonraki indeksleme input ve paint arasına girip 50 ms üzeri task üretiyorsa Worker adayıdır. Küçük payload'larda Worker başlatma, structured clone ve mesajlaşma maliyeti daha pahalı olabilir. Aynı fixture ile en az 10 koşu yapıp p75 blockingDuration değerini karşılaştırın.

reactjs eğitimi ve angular eğitimi projelerinde Worker sonucu neden eski state'i ezebilir?

Kullanıcı hızlı yazdığında eski sorgunun Worker mesajı yeni sorgudan sonra dönebilir. Her işe artan bir requestId verin, ekranda yalnızca en son requestId sonucunu kabul edin. React'te unmount cleanup içinde worker.terminate kullanın; Angular'da component destroy aşamasında Worker'ı sonlandırın ve abonelikleri kapatın.

vuejs eğitimi veya angularjs eğitimi projesinde büyük listeyi Worker'a object olarak göndermek doğru mu?

Genellikle önce structured clone maliyetini Chrome Performance panelinde ölçün. Yüz binlerce object için clone ana threade anlamlı yük bindirebilir. Mümkünse ArrayBuffer veya TypedArray transfer edin. AngularJS tarafında Worker mesajından sonra model güncellemesini $applyAsync ile başlatın; aksi halde görünüm digest tetiklenmediği için güncellenmeyebilir.

react native eğitimi içeriğinde tarayıcıdaki Web Worker kodu doğrudan kullanılabilir mi?

Hayır. React Native ortamı tarayıcının Window ve Worker API sözleşmesini garanti etmez. Hesaplama işini native module, platformun desteklediği arka plan iş mekanizması veya seçilen React Native worker kütüphanesiyle tasarlayın. Web için yazılmış new Worker(new URL(...)) kodunu paylaşılan business logic katmanından ayırmak taşınabilirliği artırır.