Yapay zeka temsilcileriyle bellek sızıntılarını analiz etme

Matthias Rohmer
José Luis Zapata

Ajanlar için Chrome Geliştirici Araçları, kodlama aracınızın uygulamanızdaki istemci tarafı bellek sızıntılarını (JavaScript ve WebAssembly dahil) analiz edip düzeltmesine olanak tanır. Yığın anlık görüntülerinin toplanması ve analiz edilmesi işlemini otomatikleştirerek aracınız, düzgün şekilde çöp toplama işlemi yapılmayan nesneleri belirleyebilir ve hedeflenen kod yeniden düzenlemesini önerebilir.

Ajan tabanlı iş akışında, kodlama aracınız farklı uygulama durumlarında birden fazla anlık görüntü alır ve özel analiz araçları kullanır.

Yaygın bellek sızıntısı kalıpları

Bellek analizi, aşağıdakiler de dahil olmak üzere yaygın bellek sızıntısı kalıplarını bulmaya odaklanır:

  • Temizlenmemiş etkinlik işleyicileri: Atık toplama işlemini engelleyen, genel nesnelere (ör. window veya document) eklenmiş etkinlik işleyicileri.
  • Ayrılmış DOM düğümleri: Belge ağacından kaldırılan ancak JavaScript değişkeni tarafından hâlâ referans verilen düğümler.
  • İstenmeden oluşturulan genel değişkenler: Uygun kapsam olmadan tanımlanan ve bellekte kalıcı olarak kalan değişkenler.
  • Kapanışlar: Kendi kapsamlarında büyük nesnelere yapılan referansları istemeden tutan kapanışlar.
  • Sınırsız veri yapıları: Sınırsız büyüyen, önbelleğe alma için kullanılan veri yapıları.

Bellek analiziyle ilgili dikkat edilmesi gereken noktalar

Bellek analizini kullanırken aşağıdakileri göz önünde bulundurun:

  • Ham anlık görüntüleri doğrudan okumayın: Ajanınızın ham .heapsnapshot dosyalarını doğrudan okumasına izin vermeyin. Çok büyükler ve bağlam sınırlarını aşıyorlar. Bellek sızıntısı hata ayıklama becerisi, dosya okumaktan kaçınmaları için aracıları açıkça yönlendirir.

  • Üç anlık görüntü yöntemi: Sızıntıları güvenilir bir şekilde bulmak için aracınızın genellikle üç anlık görüntü yakalaması gerekir: işlemden önce bir temel, işlemden sonra bir hedef ve işlemi geri aldıktan sonra son bir anlık görüntü. Zamanlayıcılar (setTimeout) veya animasyonlar (requestAnimationFrame) tarafından tetiklenenler gibi bazı işlemlerin kullanıcı etkileşimi olmadan gerçekleştiğini ve geri alma adımı gerektirmeyebileceğini unutmayın.

    Zamanlayıcılar (setTimeout) veya animasyonlar (requestAnimationFrame) tarafından tetiklenenler gibi bazı işlemlerin kullanıcı etkileşimi olmadan gerçekleştiğini ve yine de bellek kullanımını artırabileceğini unutmayın.

  • Düzeltmeden önce doğrulayın: Önerilen işlemlerin uygulamanızın mantığı için geçerli ve doğru olduğundan emin olmak üzere her zaman aracının bulgularını inceleyin. Örneğin, ajana referansları geçersiz kılmasını söylemeden önce ayrılmış bir düğümün kasıtlı bir önbelleğin parçası olup olmadığını doğrulayın.

Bellek sızıntısı analizi kullanım alanları

Ajanınıza, zamanlayıcılar ve kullanıcı etkileşimleri gibi tekrarlayan işlemler sırasında hafızayı profillemesini söyleyin. Böylece, manuel olarak anlık görüntüler almak ve bunları elle karşılaştırmak zorunda kalmazsınız. Aşağıdaki iş akışlarıyla bellek analizini hata ayıklama sürecinize entegre edin.

Not: Aracı yürütme adımları, olası davranış örnekleridir. Ajanınız farklı şekilde hareket edebilir.

Navigasyon sırasında temizlenmemiş etkinlik işleyicileri algılama

Tek sayfalık uygulamalarda (SPA'lar), geliştiriciler bir bileşen kaldırıldıktan sonra genel etkinlik işleyicilerini kaldırmayı unuttuğunda genellikle bellek sızıntısı oluşur. Görünümler arasında gezinirken belleğin doğru şekilde boşaltıldığını doğrulamasını istemek için aracınızı görevlendirebilirsiniz.

Örnek istem:

Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.

Örnek aracı yürütme: Aracınız ana sayfada temel bir yığın anlık görüntüsü alır, kontrol paneline gider ve son bir anlık görüntü almak için ana sayfaya geri döner. Ardından, anlık görüntüleri değerlendirmek için dahili analiz araçlarını kullanır, window nesnesine eklenen bir scroll dinleyicisinin hiçbir zaman temizlenmediğini algılar ve bileşeninizin temizleme işlevinde removeEventListener işlevini çağırmak için gereken kodu sağlar.

Kullanıcı arayüzü bileşenlerindeki ayrılmış DOM düğümlerini tanımlama

Modallar, açılır listeler ve karmaşık kullanıcı arayüzü bileşenleri, DOM'dan kaldırıldıktan sonra bunlara yapılan referanslar JavaScript değişkenlerinde tutulursa genellikle ayrılmış DOM düğümleri bırakır.

Örnek istem:

Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.

Örnek ajan yürütme: Ajanınız, gerekli temel, hedef ve son anlık görüntüleri toplarken ayarlar kalıcı öğesiyle etkileşim kurar. Analiz, Detached HTMLDivElement olarak etiketlenmiş, büyüyen birkaç nesneyi ortaya çıkarıyor. Ajan, bulguyu size bildirir ve DOM referanslarını tutan değişkenleri null olarak ayarlamak için kodu değiştirmeden önce onayınızı ister.

Sürekli etkileşimlerde sınırsız önbellekleri bulma

Altta yatan diziler veya haritalar sınırsız bir şekilde büyürse sonsuz kaydırma veya sürekli veri getirme gibi özellikler belleği sızdırabilir.

Örnek istem:

Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.

Örnek temsilci yürütme: Temsilciniz, kaydırma işleminden önce ve sonra bellek durumunu analiz eder. Sınırsız büyüyen büyük bir diziyi istemeden yakalayan bir kapatmayı tanımlar. Ajan, uygun çöp toplama işlemine izin vermek için nesne yaşam döngüleriyle ilişkili verilerde önbelleğe alma sınırları uygulamanızı veya WeakMap kullanmanızı önerir.

Arka plan işlemlerindeki bellek sızıntılarını ayıklama

Animasyon ve arka plan zamanlayıcıları, kullanıcı etkileşimi olmadan belleği sızdırabilir. Aracıya, bu işlemler için bellek sızıntılarını bulmak amacıyla bellek büyümesini zaman içinde izlemesini söyleyebilirsiniz.

Örnek istem:

Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.

Aracı yürütme örneği: Aracınız, tuval uygulamasını keşfeder ve zaman içindeki bellek kullanımını izlemek için otomatik olarak düzenli anlık görüntüler alır. Bu araç, yığını analiz eder ve oluşturma döngüsünün, önceki WebGL ağlarını çöp toplama işlemine tabi tutmadan her karede bir diziye yeni WebGL ağları gönderdiğini belirler. Bu durum, nesne yeniden kullanımı için optimizasyon önerilmesine neden olur.