IMPROVING RESPONSIVENESS, SHARING COLLECTIONS, AND PARALLELIZING ALGORITHMS EĞİTİMİ

Arayüzü dondurmadan ağır işleri paralelleştirin

Web Workers, SharedArrayBuffer ve Atomics ile yanıt veren arayüzler ve paralel algoritmalar

Improving Responsiveness, Sharing Collections, and Parallelizing Algorithms Eğitimi, tarayıcıda ağır işleri arayüzü kilitlemeden yürütmeyi uygulamalı öğretir.

4 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Ana iş parçacığı yükünden Web Workers'a, paylaşılan belleğe ve paralel algoritmalara akış

Improving Responsiveness, Sharing Collections, and Parallelizing Algorithms Eğitimi, tarayıcıda ağır işleri arayüzü kilitlemeden yürütmeyi uygulamalı öğretir. Katılımcılar ana iş parçacığı yükünü ve uzun görevleri kavrar, işleri bölerek yanıt veren arayüzler kurar. Web Workers ile paralel işlem, mesajlaşma ve aktarılabilir nesneler işlenir. SharedArrayBuffer ve Atomics ile koleksiyon paylaşımı, ardından worker havuzuyla algoritmaları paralelleştirme ele alınır.

Süre ve Format

4 Gün. Her gün dört modül; ağır bir işlem, arayüzü kilitlemeyen ve paralel çalışan bir yapıya adım adım dönüştürülür.

Seviye

Orta Seviye — Web Workers, SharedArrayBuffer ve Atomics ile yanıt veren ve paralel çalışan arayüzler

Öğrenme Metodu

Her modülde yazılan kodun arayüz yanıtlığına etkisi Performance sekmesinde ölçülür; teknikler gerçek bir işlem üzerinde uygulanır.

Neden Bu Eğitim?

🧊Donmayan arayüz

Ana iş parçacığını meşgul eden uzun görevleri tanıyıp bölerek ağır işlemler sırasında bile akıcı ve yanıt veren arayüzler kurarsınız.

🧵Gerçek paralellik

Web Workers ile hesaplamaları ayrı iş parçacıklarına taşıyarak çok çekirdekli işlemcilerden yararlanan paralel çözümler üretirsiniz.

⚙️Verimli algoritma

Veriyi bölüp worker havuzuna dağıtarak ağır algoritmaları paralelleştirir ve işlem süresini belirgin biçimde kısaltmayı öğrenirsiniz.

Anahtar Konular

web workers eğitimijavascript paralel işlemsharedarraybuffer eğitimiatomics eğitimiarayüz performansı kursuworker havuzu eğitimiön yüz performans eğitimiparalel algoritma eğitimijavascript eşzamanlılıkweb performans optimizasyonu
“Tek iş parçacığı bir sınır değil, bir davettir; işi doğru bölüp paralelleştiren geliştirici arayüzü hem hızlı hem akıcı tutar.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam gereksinimleri

1
JavaScript bilgisi

Fonksiyon, dizi ve nesne gibi JavaScript kavramlarına rahat aşinalık beklenir; örnekler bunlara dayanır.

2
Asenkron JavaScript

Promise ve async/await yapısına temel aşinalık, worker mesajlaşmasını anlamayı önemli ölçüde kolaylaştırır.

3
Temel algoritma

Döngü, özyineleme ve dizi işleme gibi temel algoritma kavramları paralelleştirme modüllerinde kullanılır.

4
Editör ve tarayıcı

VS Code gibi bir editör, yerel sunucu ve Performance sekmesi olan güncel bir tarayıcı gereklidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı ana iş parçacığı yükünü ve uzun görevleri kavrar, işleri parçalayarak zamanlar ve arayüzün yanıt verebilirliğini ölçüp iyileştirir.
Modül 1
Ana İş Parçacığı ve Bloklama
  • Tek iş parçacığı ve işleme döngüsü
  • Uzun görevlerin arayüzü dondurması
  • Düzen, boyama ve kare süre bütçesi
  • Kare atlama ve takılma algısı etkisi
  • Girdi gecikmesi ve yanıt süresi
  • Bloklayan hesaplamanın belirtileri
Modül 2
Uzun Görevleri Ölçme
  • Performance sekmesiyle görev analizi
  • Uzun görev eşiği ve işaretlenmesi
  • performance.now ile süre ölçümü
  • PerformanceObserver ile görev izleme
  • Darboğaz oluşturan fonksiyonun tespiti
  • Ölçüme dayalı iyileştirme kararı
Modül 3
İşi Parçalama ve Zamanlama
  • Büyük döngüyü küçük parçalara bölme
  • setTimeout ile işi kareye yayma
  • requestAnimationFrame ile kare uyumu
  • requestIdleCallback ile boş zaman
  • scheduler ile öncelikli zamanlama
  • İşlem ile arayüz arasında denge
Modül 4
Yanıtlık İyileştirme Desenleri
  • Erteleme ve debounce ile girdi yönetimi
  • throttle ile olay sıklığını sınırlama
  • Sanal liste ile uzun listeyi hafifletme
  • Hesaplamayı gerektiğinde çalıştırma
  • Önbellekleme ile tekrar hesabı önleme
  • Algılanan performansı iyileştirme
Günün hedefiKatılımcı Web Worker oluşturur, ana iş parçacığıyla mesajlaşır, aktarılabilir nesnelerle veriyi taşır ve worker yaşam döngüsünü doğru yönetir.
Modül 1
Web Worker Temelleri
  • new Worker ile ayrı iş parçacığı
  • Worker betiği ve ayrı global kapsam
  • Ana iş parçacığı ile worker ayrımı
  • Worker içinde DOM erişiminin olmaması
  • importScripts ile betik yükleme
  • Module worker ile import kullanımı
Modül 2
Mesajlaşma ve Veri
  • postMessage ile worker'a veri gönderme
  • onmessage ile gelen veriyi alma
  • Yapısal kopyalama ve kopya maliyeti
  • Mesaj protokolü ve komut türleri
  • Hata ve istisnanın ana parçaya iletimi
  • İlerleme bildirimiyle geri bildirim
Modül 3
Aktarılabilir Nesneler
  • Transferable ile sahipliğin aktarımı
  • ArrayBuffer'ı kopyalamadan taşıma
  • Aktarım ile kopyalama performans farkı
  • MessageChannel ile port iletişimi
  • OffscreenCanvas'ı worker'a aktarma
  • Büyük veride aktarımın avantajı
Modül 4
Worker Yaşam Döngüsü
  • Worker'ı terminate ile sonlandırma
  • Worker içinden close ile kapatma
  • Hata olayı ve kurtarma yönetimi
  • Worker başlatma maliyeti ve yeniden kullanım
  • Bellek sızıntısı ve kaynak temizliği
  • Dedicated ve shared worker farkı
Günün hedefiKatılımcı SharedArrayBuffer ile bellek paylaşır, tipli dizilerle koleksiyon kurar, Atomics ile güvenli erişim sağlar ve yarış durumlarını önler.
Modül 1
SharedArrayBuffer Temelleri
  • SharedArrayBuffer ile paylaşılan bellek
  • Kopya yerine paylaşımın avantajı
  • COOP ve COEP güvenlik başlıkları
  • Çapraz köken izolasyonu gerekliliği
  • Paylaşılan bellekle worker iletişimi
  • Paylaşımın uygun olduğu senaryolar
Modül 2
Tipli Diziler ve Koleksiyon
  • Int32Array ve Float64Array görünümleri
  • Buffer üzerinde tipli dizi oluşturma
  • Paylaşılan koleksiyonun indekslenmesi
  • Veri yapısını bellek düzenine eşleme
  • Birden fazla görünümün aynı buffer'ı paylaşması
  • Bellek hizalama ve erişim deseni
Modül 3
Atomics ile Güvenli Erişim
  • Atomics.load ve store ile erişim
  • Atomics.add ile atomik güncelleme
  • compareExchange ile koşullu yazma
  • Okuma ve yazmanın bölünmezliği
  • Atomik olmayan erişimin riskleri
  • Sayaç ve biriktiricide atomik kullanım
Modül 4
Senkronizasyon ve Yarış
  • Yarış durumu ve veri bozulması
  • Atomics.wait ile iş parçacığı bekletme
  • Atomics.notify ile bekleyeni uyandırma
  • Basit kilit ve bariyer mekanizması kurma
  • Kilitlenme ve ölümcül bekleme riski
  • Paylaşılan durumu en aza indirme
Günün hedefiKatılımcı worker havuzu kurar, veriyi bölüp paralel işler, sonuçları birleştirir ve paralelleştirmenin kazancını ölçerek gerçek bir işlemi hızlandırır.
Modül 1
Worker Havuzu Kurma
  • Çekirdek sayısına göre worker sayısı
  • hardwareConcurrency ile havuz boyutu
  • İş kuyruğu ile görevlerin dağıtımı
  • Boşta worker'a iş atama mantığı
  • Görev sonucu ve Promise eşlemesi
  • Havuz ömrü ve yeniden kullanım
Modül 2
Böl ve Yönet Deseni
  • Veriyi parçalara bölme stratejisi
  • Parçaları worker'lara paralel dağıtma
  • Harita indirgeme ile paralel işleme
  • Bağımsız parça ve veri paylaşımı
  • Yük dengeleme ve parça boyutu seçimi
  • Sıralı ve paralel sürüm karşılaştırması
Modül 3
Sonuç Birleştirme
  • Parça sonuçlarını toplama ve birleştirme
  • Promise.all ile tüm parçaları bekleme
  • Kısmi sonuçları arayüze yansıtma
  • Hata ve başarısız parçanın ele alınması
  • Sonuç sırasının doğru korunması
  • Aktarımla sonuç taşıma maliyeti
Modül 4
Ölçüm ve Canlı Proje
  • Paralel ve seri sürüm süre ölçümü
  • Hızlanma ve Amdahl sınırı kavramı
  • Worker iletişim yükünün değerlendirmesi
  • Görüntü işleme veya hesabın hızlandırılması
  • WebAssembly ile ağır işin birleşimi
  • Yanıtlık ve performansın birlikte doğrulanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Yanıtlık analizi

Ana iş parçacığı yükünü ve uzun görevleri Performance sekmesiyle ölçerek arayüzü donduran darboğazları tespit eder ve giderirsiniz.

✅
İş parçalama

Büyük işleri parçalara bölüp requestIdleCallback ve zamanlayıcılarla yayarak ağır hesaplamada bile yanıt veren arayüzler kurarsınız.

✅
Web Workers

Web Worker ile hesaplamayı ayrı iş parçacığına taşır, mesajlaşmayı ve yaşam döngüsünü doğru yöneterek gerçek paralellik sağlarsınız.

✅
Verimli aktarım

Aktarılabilir nesneler ve MessageChannel ile büyük veriyi kopyalamadan taşıyarak worker iletişim maliyetini belirgin biçimde azaltırsınız.

✅
Paylaşılan bellek

SharedArrayBuffer ve tipli dizilerle worker'lar arası koleksiyon paylaşır, gerekli güvenlik başlıklarını doğru biçimde yapılandırırsınız.

✅
Atomics erişim

Atomics ile paylaşılan belleğe güvenli erişir, wait ve notify ile senkronizasyon kurar ve yarış durumlarını önlemeyi öğrenirsiniz.

✅
Worker havuzu

Çekirdek sayısına göre worker havuzu kurar, iş kuyruğuyla görevleri dağıtır ve boşta worker'lara iş atayarak verimi artırırsınız.

✅
Paralel algoritma

Veriyi böl ve yönet deseniyle paralel işler, sonuçları birleştirir ve hızlanmayı ölçerek ağır algoritmaları gerçekten hızlandırırsınız.

Kimler İçin Uygundur?

  • Ağır hesaplamalarda donmayan arayüzler isteyen ön yüz geliştiriciler
  • Web Workers
  • paralel işlemi öğrenmek isteyen JavaScript geliştiricileri ve performans odaklı web ekipleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Ağır hesaplamalarda donmayan arayüzler isteyen ön yüz geliştiriciler, Web Workers ve paralel işlemi öğrenmek isteyen JavaScript geliştiricileri ve performans odaklı web ekipleri için uygundur. JavaScript, async/await ve temel algoritma bilgisi beklenir.
Web Worker ne zaman kullanılmalı?
Arayüzü dondurabilecek ağır hesaplamalar, büyük veri işleme veya karmaşık algoritmalar söz konusu olduğunda Web Worker kullanılır. Böylece iş ana iş parçacığından ayrı yürür ve arayüz yanıt vermeye devam eder. Eğitimde hangi işin worker'a taşınacağı ve iletişim maliyetinin nasıl değerlendirileceği uygulamalı gösterilir.
SharedArrayBuffer kullanmak için özel yapılandırma gerekiyor mu?
Evet. SharedArrayBuffer'ın etkin olması için sayfanın çapraz köken izolasyonu gerektirir; bu da COOP ve COEP yanıt başlıklarının doğru ayarlanmasıyla sağlanır. Eğitimde bu başlıkların nasıl yapılandırılacağı ve paylaşılan belleğin Atomics ile güvenli kullanımı adım adım ele alınır.
Eğitimin süresi ve formatı nedir?
Eğitim dört gün sürer ve her gün dört modülden oluşur. Ağır bir işlem, arayüzü kilitlemeyen ve paralel çalışan bir yapıya adım adım dönüştürülür. Yüz yüze veya online yapılabilir; içerik kurumun gerçek performans sorunlarına göre uyarlanabilir.
Eğitim sonunda sertifika veriliyor mu?
Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve paralelleştirilen örnek projeyi belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Improving Responsiveness, Sharing Collections, and Paralleli Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

HTML ve CSSWeb Geliştiriciler için Bootstrap Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Web Geliştiriciler için Bootstrap Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Bootstrap 5 grid sistemi, bileşenler, formlar, JavaScript eklentileri ve Sass ile özelleştirmeyi kapsayan responsive arayüz geliştirme eğitimi.

Detayları Gör →
HTML ve CSSWeb Programming in Go: HTML Forms & ResponseWriter in Go Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Web Programming in Go: HTML Forms & ResponseWriter in Go Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Go net/http ile Handler, ResponseWriter, html/template, HTML form işleme, dosya yükleme ve middleware kullanarak web uygulaması geliştirme eğitimi.

Detayları Gör →
HTML ve CSSWhole Page Controls & Extending Bootstrap Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Whole Page Controls & Extending Bootstrap Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Bootstrap ile tüm sayfa düzen kontrolleri, Sass değişkenleri, utility API, özel bileşen ve koyu mod ile çatıyı genişletme ve markaya uyarlama eğitimi.

Detayları Gör →
HTML ve CSSBootstrap Giriş Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Bootstrap Giriş Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

Bootstrap 5 grid, bileşen ve yardımcı sınıflarıyla duyarlı arayüz geliştirme eğitimi. Navbar, kart, form, modal ve Sass özelleştirme uygulamalı.

Detayları Gör →
HTML ve CSSCSS Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Seçicilerden Flexbox, Grid, animasyon ve özel değişkenlere kadar modern CSS eğitimi. Duyarlı ve etkileşimli arayüz tasarımı uygulamalı.

Detayları Gör →
HTML ve CSSCSS Giriş Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

CSS Giriş Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

CSS seçicileri, kutu modeli, Flexbox ve medya sorgularıyla web biçimlendirme eğitimi. HTML bilenler için uygulamalı ve kurumsal CSS giriş programı.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn