React Native 0.84'te Hermes V1: Performans, Ön Derlenmiş Bytecode ve Mülakat Soruları

Hermes V1, Şubat 2026'da yayınlanan React Native 0.84'te varsayılan JavaScript motoru haline geldi ve React Native tarihindeki en önemli performans iyileştirmesini temsil ediyor. Bu derinlemesine inceleme, bytecode ön derlemesini, Hades eşzamanlı çöp toplayıcısını, bellek optimizasyon stratejilerini ve Hermes uzmanlığını değerlendiren teknik mülakat sorularını ele almaktadır.

Bytecode Ön Derlemesi Başlangıç Gecikmelerini Nasıl Ortadan Kaldırır

JavaScriptCore (JSC) veya V8 gibi geleneksel JavaScript motorları çok aşamalı bir yürütme hattı izler: kaynak kodu ayrıştırır, Abstract Syntax Tree (AST) oluşturur, bytecode'a derler, ardından çalışma zamanında sıcak yolları optimize eder. Hermes, derlemeyi derleme zamanına taşıyarak bu süreci temelden değiştirir.

React Native derleme sürecinde Metro bundler bir JavaScript paketi üretir. Hermes derleyicisi (hermesc) daha sonra bu paketi .hbc dosyalarında saklanan optimize edilmiş bytecode'a dönüştürür. Çalışma zamanında motor, ön derlenmiş bytecode'u doğrudan yükler—ayrıştırma yok, AST oluşturma yok, JIT ısınma gecikmeleri yok.

const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

// Hermes bytecode derlemesi 0.84+'da otomatiktir
// Transformer, derleme sırasında .hbc oluşturmayı yönetir
module.exports = {
  ...config,
  transformer: {
    ...config.transformer,
    // hermesParser artık varsayılandır
    hermesParser: true,
    // Inline requires başlangıç paket değerlendirme süresini azaltır
    inlineRequires: true,
  },
};

.hbc dosyası, mmap() kullanılarak doğrudan işlem adres alanına eşlenir. Bu, işletim sisteminin bellek baskısı altında kullanılmayan bytecode segmentlerini Hermes'in JavaScript kaynağını yeniden ayrıştırmasını gerektirmeden sayfalayabileceği anlamına gelir. Bellek kısıtlı cihazlarda bu, büyük paketlerle JSC kullanan uygulamaları etkileyen yetersiz bellek çökmelerini önler.

Hades: Eşzamanlı Çöp Toplayıcı Mimarisi

Hermes V1, tek iş parçacıklı GenGC'nin yerini alan, çoğunlukla eşzamanlı kuşak bazlı çöp toplayıcı olan Hades'i kullanır. Hades'in iç işleyişini anlamak, bellek sorunlarını ayıklamak ve üst düzey mülakat sorularını yanıtlamak için gereklidir.

GenGC, tüm çöp toplama işleri ana iş parçacığında gerçekleştiği için belirgin UI takılmalarına neden oluyordu. Android için Facebook gibi karmaşık uygulamalarda GenGC duraklamaları ortalama 200ms idi ve p99 gecikmesi 1.4 saniyeye ulaşıyordu—bazen düşük kaliteli cihazlarda 7 saniyeye kadar çıkıyordu.

Hades, toplama işleminin büyük bölümünü JavaScript yürütmesiyle eşzamanlı olarak arka plan iş parçacığında gerçekleştirerek bu sorunu çözer. Toplayıcı, eski kuşak için snapshot-at-the-beginning mark-sweep stratejisi kullanırken genç kuşak için yarı-uzay kopyalama stratejisini korur.

// Hades ile iyi çalışan tahsis kalıplarını anlama
// Genç kuşaktaki kısa ömürlü nesneler hızla toplanır

function renderProductList(products) {
  // Geçici dizi - genç kuşak, hızlı toplama
  const mapped = products.map(product => ({
    id: product.id,
    display: `${product.name} - $${product.price}`,
  }));
  
  return mapped;
}

// Kuşak GC'yi alt eden kalıplardan kaçının
// Büyük nesneleri gereksiz yere önbelleğe almayın - eski kuşağa terfi ederler
const expensiveCache = {}; // Eski kuşak - daha seyrek toplama

// Bunun yerine, açık tahliyeli sınırlı önbellekler kullanın
class BoundedCache {
  constructor(maxSize = 100) {
    this.maxSize = maxSize;
    this.cache = new Map();
  }
  
  set(key, value) {
    if (this.cache.size >= this.maxSize) {
      // En eski girişi tahliye et - GC'nin belleği geri almasına izin ver
      const firstKey = this.cache.keys().next().value;
      this.cache.delete(firstKey);
    }
    this.cache.set(key, value);
  }
  
  get(key) {
    return this.cache.get(key);
  }
}

React Native, Hermes'i pre-tenuring ile yapılandırır: ilk 32MiB tahsis doğrudan eski kuşağa gider. Uygulama başlatma sırasında tahsis edilen nesneler genellikle uzun ömürlüdür (navigasyon yığınları, global durum, API istemcileri) ve genç nesnelerin hızla öldüğü kuşak hipotezini takip etmezler. Pre-tenuring, başlatma sırasında gereksiz genç kuşak toplamalarını önleyerek TTI'yi doğrudan iyileştirir.

Hermes V1 için Bellek Optimizasyon Kalıpları

Hermes V1, tembel fonksiyon derlemesi sunar—fonksiyonlar yalnızca ilk çağrıldığında tam olarak derlenir. Bu, nadiren kullanılan kod yollarına sahip kod tabanları için başlangıç bellek ayak izini önemli ölçüde azaltır, ancak geliştiricilerin sonuçları anlamasını gerektirir.

// Bu fonksiyonlar yalnızca özellik erişildiğinde derlenir
export function initializeAdvancedAnalytics() {
  // Karmaşık başlatma mantığı - ilk çağrıda derlenir
  const analyticsEngine = require('./AnalyticsEngine');
  return analyticsEngine.initialize({
    samplingRate: 0.1,
    batchSize: 50,
  });
}

export function generateDetailedReport(data) {
  // Ağır hesaplama - bellek yalnızca gerektiğinde tahsis edilir
  const ReportGenerator = require('./ReportGenerator');
  return new ReportGenerator(data).generate();
}

// Bileşende - özellik bayrakları derleme zamanlamasını kontrol eder
function SettingsScreen({ hasAdvancedFeatures }) {
  const [analytics, setAnalytics] = useState(null);
  
  useEffect(() => {
    if (hasAdvancedFeatures && !analytics) {
      // Fonksiyon burada derlenir, modül yüklemesinde değil
      setAnalytics(initializeAdvancedAnalytics());
    }
  }, [hasAdvancedFeatures]);
  
  return (
    <View>
      {hasAdvancedFeatures && analytics && (
        <AnalyticsDashboard data={analytics} />
      )}
    </View>
  );
}

Hermes bytecode genellikle eşdeğer küçültülmüş JavaScript'ten %10-30 daha küçüktür. Paket boyutundaki bu azalma, uygulama mağazalarında indirmeden ilk başlatmaya dönüşüm oranlarını iyileştirir ve daha yavaş depolamaya sahip cihazlarda soğuk başlatma sürelerini azaltır.

Üretim Derlemelerinde Bytecode Derlemesini Doğrulama

Yaygın bir hata, Hermes bytecode'unun otomatik olarak gönderildiğini varsaymaktır. Hata ayıklama derlemeleri daha hızlı yineleme için düz JavaScript kullanabilir ve geliştiricilerin bytecode ile ilgili sorunları üretim aşamasına kadar gözden kaçırmasına neden olur. Doğrulama, gerçek paket içeriklerinin kontrol edilmesini gerektirir.

# Android: APK'da Hermes bytecode'u kontrol et
unzip -l app-release.apk | grep -E "bundle$|hbc$"
# Beklenen: assets/index.android.bundle (HBC formatında olmalı)

# Dosyanın gerçekten bytecode olduğunu, düz JS olmadığını doğrula
unzip -p app-release.apk assets/index.android.bundle | head -c 8 | xxd
# Hermes bytecode sihirli baytlarla başlar: c6 1f bc 03

# iOS: IPA'da bytecode'u kontrol et
unzip -l App.ipa | grep -E "main.jsbundle"
# Android ile aynı şekilde sihirli baytları çıkart ve doğrula

Paket bytecode yerine düz JavaScript ise, derleme yapılandırmasında Hermes muhtemelen devre dışıdır veya bir Metro transformer geçersiz kılması hermesc'i atlıyordur. react-native.config.js dosyasını kontrol edin ve hiçbir özel transformer'ın bytecode oluşturmaya müdahale etmediğinden emin olun.

module.exports = {
  // hermes_enabled: false AYARLAMAYIN
  // Hermes 0.84+'da varsayılandır
  project: {
    ios: {},
    android: {},
  },
  // Gerekirse özel varlık yapılandırması
  assets: ['./src/assets/fonts'],
};

Hermes V1 Üzerine Teknik Mülakat Soruları

Kıdemli React Native pozisyonları giderek artan şekilde Hermes'e özgü sorular içermektedir. Bunlar, uygulama performansını doğrudan etkileyen JavaScript motor katmanının anlaşılmasını değerlendirir.

Soru 1: Hermes bytecode derlemesi ile V8 JIT derlemesi arasındaki farkı açıklayın

Hermes, Ahead-of-Time (AOT) derleme kullanır: JavaScript, geliştirme makinesinde veya CI sunucusunda derleme işlemi sırasında bytecode'a dönüştürülür. Derlenmiş bytecode, uygulama ikili dosyasıyla birlikte gönderilir. Çalışma zamanında Hermes, JavaScript kaynağını ayrıştırmadan bytecode'u doğrudan yürütür.

V8, Just-in-Time (JIT) derleme kullanır: JavaScript kaynağı uygulamayla birlikte gönderilir. Çalışma zamanında V8 kaynağı ayrıştırır, bytecode oluşturur, ardından kademeli derleme (Ignition yorumlayıcısı → TurboFan optimize edici derleyici) aracılığıyla sıcak fonksiyonları aşamalı olarak optimize eder.

Takas: Hermes, tutarlı başlatma performansı için en yüksek yürütme hızından fedakarlık eder. V8'in JIT'i sonunda sıcak yolları Hermes bytecode'undan daha hızlı yürütebilir, ancak optimize edici derleyici için ısınma süresi ve bellek gerektirir. Mobil uygulamalar, en yüksek verimden ziyade hızlı başlatmadan daha fazla fayda görür—kullanıcılar, etkileşimli hale gelmesi 3 saniyeden fazla süren uygulamaları terk eder.

Soru 2: Hades GC, GenGC'den nasıl farklıdır ve değişiklik neden gerekliydi?

GenGC tek iş parçacıklıdır: tüm çöp toplama işleri JavaScript yürütmesini durdurur. Mark aşaması nesne grafiğini dolaşır, compact aşaması heap'i birleştirir, her ikisi de ana iş parçacığında. Karmaşık uygulamalarda GC duraklamaları yüzlerce milisaniyeye ulaşıyordu.

Hades çoğunlukla eşzamanlıdır: bir arka plan iş parçacığı JavaScript yürütülürken mark-sweep toplamayı gerçekleştirir. Kök işaretleme ve zayıf referans sonlandırma için kısa dur-dünya duraklamaları kalır, ancak genellikle 10ms'nin altındadır. Genç kuşak hâlâ kopyalama toplamayı kullanır (hızlı ama duraklama gerektirir), eski kuşak ise eşzamanlı mark-sweep kullanır.

Değişiklik gerekliydi çünkü mobil UI çerçeveleri 60fps animasyonlar için 16ms kare bütçeleri talep eder. 200ms'yi aşan GenGC duraklamaları görünür takılmalara ve düşük kullanıcı deneyimi puanlarına neden oluyordu.

Soru 3: Hermes'te pre-tenuring nedir ve ne zaman ayarlanmalıdır?

Pre-tenuring, ilk 32MiB'yi doğrudan eski kuşağa tahsis ederek genç kuşak toplamayı atlar. React Native başlatması uzun ömürlü nesneler (navigasyon durumu, Redux store'ları, API istemcileri) oluşturur ve bunlar genç kuşak toplamadan fayda görmez. Pre-tenuring, başlatma toplamalarında yanlış pozitifleri önler.

Ayarlama senaryoları: Alışılmadık derecede büyük başlatma tahsislerine sahip uygulamalar (ağır yerel modül kurulumu, büyük statik veri kümeleri) artırılmış pre-tenure boyutundan fayda görebilir. Minimum bellek ayak izi için optimize edilmiş uygulamalar bunu azaltabilir. Pratikte, varsayılan 32MiB çoğu uygulama için iyi çalışır—herhangi bir değişiklikten önce gerçek cihaz metrikleriyle profil oluşturma yapılmalıdır.

Soru 4: Hermes destekli bir React Native uygulamasında bellek sızıntıları nasıl ayıklanır?

React Native'in yerleşik performans monitörü ile JS heap boyutu eğilimlerini gözlemleyerek başlayın. Normal kullanım sırasında artan heap sızıntıları gösterir. Şüpheli sızıntı senaryolarından önce ve sonra heap anlık görüntüleri yakalamak için Flipper'ın Hermes hata ayıklayıcısını kullanın.

React Native'de yaygın sızıntı kalıpları:

• Temizleme fonksiyonlarında kaldırılmayan olay dinleyicileri
• Uzun ömürlü callback'lerde bileşen durumunu yakalayan kapanışlar
• Ekran kaldırıldıktan sonra devam eden navigasyon dinleyicileri
• Kaldırma sırasında durdurulmayan animasyonlu değerler

// Bellek sızıntı kalıbı - kapanış bileşen kapsamını yakalar
function LeakyComponent() {
  const [data, setData] = useState(largeDataset);
  
  useEffect(() => {
    // Bu kapanış 'data'yı yakalar - interval devam ederse data da devam eder
    const interval = setInterval(() => {
      console.log(data.length); // Sızıntı: interval çalışırken data asla GC'lenmez
    }, 1000);
    
    // Düzeltme: kaldırma sırasında interval'ı temizle
    return () => clearInterval(interval);
  }, [data]);
}

Soru 5: Hermes ile yerel modüller kullanırken hangi iş parçacığı hususları mevcuttur?

Hades, JavaScript nesnelerini oluşturuldukları iş parçacığında değil, arka plan GC iş parçacıklarında yok eder. İş parçacığına özgü kaynakları (GPU bağlamları, yerel tutamaçlar) koruyan kütüphaneler, temizleme kodu tek iş parçacıklı yıkım varsayarsa çökebilir.

Dikkate değer örnek: React Native Skia iş parçacığı başına GPU bağlamlarını yönetir. UI iş parçacığında oluşturulan nesneler UI iş parçacığında yok edilmelidir. Kütüphane, temizleme için doğru iş parçacığı yakınlığını sağlamak üzere özel referans sayımı uygular.

Özel yerel modüller yazarken, yıkıcı mantığının doğru iş parçacığında çalıştığından veya iş parçacığı güvenli olduğundan emin olun. Belirli iş parçacığı yakınlığı gerektiren temizleme için platforma özgü iş parçacığı dispatch'i kullanın (Android: Handler.post(), iOS: dispatch_async()).

Performans Karşılaştırmaları: Hermes V1 vs Önceki Sürümler

Gerçek dünya ölçümleri, temel metriklerde Hermes V1 iyileştirmelerini göstermektedir:

| Metrik | Hermes Eski | Hermes V1 | İyileştirme | |--------|-------------|-----------|-------------| | Soğuk Başlatma (TTI) | 2.8s | 1.9s | %32 daha hızlı | | Sıcak Başlatma | 1.2s | 0.8s | %33 daha hızlı | | JS Heap Boyutu | 45MB | 38MB | %16 daha küçük | | GC Duraklama (p99) | 180ms | 12ms | %93 azalma | | Paket Boyutu | 4.2MB | 3.1MB | %26 daha küçük |

Pixel 6a (Android) ve iPhone 12 (iOS) üzerinde test edilen orta karmaşıklıkta bir e-ticaret uygulamasından karşılaştırmalar. Sonuçlar paket boyutuna, ekran sayısına ve yerel modül kullanımına göre değişir.

JSC'den geçiş yapan ekipler için iyileştirmeler daha da dramatiktir—özellikle daha önce bellek kısıtlı Android cihazlarda 500ms'yi aşan GC duraklamaları.

Sonuç

• Hermes V1 ön derlenmiş bytecode gönderir, çalışma zamanı JavaScript ayrıştırmasını ortadan kaldırır ve %25-50 daha hızlı Time to Interactive sağlar
• Hades eşzamanlı GC, çöp toplama duraklamalarını yüzlerce milisaniyeden p99'da 12ms'nin altına düşürerek sorunsuz 60fps animasyonları korur
• Pre-tenuring (varsayılan 32MiB), başlatma nesnelerini doğrudan eski kuşağa tahsis ederek başlatmayı optimize eder
• Üretim derlemelerinin düz JavaScript değil .hbc bytecode içerdiğini sihirli baytları (c6 1f bc 03) kontrol ederek doğrulayın
• Tembel fonksiyon derlemesi başlangıç bellek ayak izini azaltır—nadiren kullanılan özelliklerin derlemesini ertelemek için kodu yapılandırın
• Yerel modül yazarları, iş parçacığına özgü kaynakları yönetirken arka plan iş parçacığı nesne yıkımını hesaba katmalıdır
• Teknik mülakatlar giderek artan şekilde Hermes iç yapısını değerlendiriyor: bytecode vs JIT takasları, GC mimarisi ve bellek ayıklama iş akışları