Bu bileşen için kapsamlı bir manuel test stratejisi, erişilebilirlik denetimleri, performans profillemesi ve dayanıklılık doğrulamasını birleştiren çok katmanlı bir yaklaşım gerektirir.
Öncelikle, miras kurumsal kısıtlamaları simüle etmek için Internet Explorer 11'i Girişim Modunda bir temel ortamda kurun. Herhangi bir gereksiz çağrı olmadan düğümlerin aşamalı olarak alındığından emin olmak için ağ isteklerini izleyerek ağaçta farklı hızlarla kaydırarak tembel yükleme işlevini doğrulayın. WCAG 2.1 uyumu için, her etkileşimli öğenin Tab navigasyonu aracılığıyla erişilebilir olduğunu, Ok tuşlarının mantıklı bir şekilde hiyerarşik seviyelerde seyahat ettiğini ve ARIA-live bölgelerinin dinamik içerik eklenmesini ekran okuyucularına (NVDA veya JAWS gibi) duyurduğunu doğrulayın.
Bellek sızıntılarını tespit etmek için, derinlemesine iç içe dallar üzerinde 50 hızlı genişletme/kapama döngüsü gerçekleştirmeden önce ve sonra Hafıza profilcisini kullanarak yığın anlık görüntüleri alın; hayalet düğümleri tespit etmek için Detached DOM tree sayısını karşılaştırın. Seçim yapmak için Space kullanarak ve öğeleri yeniden konumlandırmak için Ok tuşlarını kullanarak sürükle-bırak alternatiflerini test edin ve görsel odak göstergelerinin her zaman görünür kaldığından emin olun. Durum sürekliliğini doğrulama için, bozulmuş JSON'ları (kısmi dizgeler, dairesel referanslar veya null değerleri) localStorage'a manuel olarak enjekte edin ve bileşenin çökmeden yerine boş bir geri dönüş durumu sunduğunu doğrulayın. Son olarak, ağaç başlatılmadan önce localStorage'ı sahte verilerle 5MB doldurarak depolama kotası aşıldığı hatalarını simüle edin ve oturumdan sadece moduna nazik bir düşüşü onaylayın.
Miras bir hukuk belge yönetim sistemini web tabanlı bir platforma aktarırken, ekibimiz, birden fazla yetki alanında 50,000'den fazla vaka dosyasını göstermek zorunda kalan klasör hiyerarşi görünümünde ciddi bir performans düşüşü ile karşılaştı; aynı zamanda hükümet müşterileri için IE11 uyumluluğunu sürdürmeliydi.
Beta testleri sırasında kritik sorun ortaya çıktı: yoğun kullanımın yaklaşık 30. dakikasında—özellikle avukatlar vaka dosyalarını yeniden düzenlemek için hızlı sürükle-bırak işlemleri gerçekleştirdiğinde—IE11 tarayıcısı "Bellek dışı" hatasıyla dondu veya çöktü. İlk araştırmalar, JavaScript ağaç kütüphanesinin ayrılmış DOM düğümlerine referansları tuttuğunu, her genişleme döngüsünde 4MB bellek sızıntısına neden olduğunu ortaya çıkardı. Ayrıca, kullanıcılar sayfayı yeniledikten sonra dikkatlice düzenlenmiş ağaç durumlarının zaman zaman boş ekranlar olarak gösterildiğini bildirdi; bu, eşzamanlı sekme yazımlarından kaynaklanan localStorage bozulmasından kaynaklanıyordu.
Çözüm 1: Sanal DOM Uygulaması ile Polyfill'ler
Bileşeni React ile sanal DOM farklılaştırma algoritması kullanarak ve IE11 için polyfill'ler kullanarak yeniden yapılandırmayı düşündük. Bu yaklaşım, etkili uzlaşma sayesinde üstün bellek yönetimi vaat etti. Ancak, pürüzsüz performans artıları, önemli eksileri tarafından gölgede bırakıldı: polyfill yükü, parça boyutunu 300KB artırdı, bu da hükümet VPN'lerinde yükleme sürelerini olumsuz etkiledi ve kapsamlı geriye dönük testler, bağımlı olduğumuz sürükle-bırak kütüphanesinin, IE11'de sentetik olay delegasyonu ile birleştiğinde işlevsel olarak arızalandığını ortaya çıkardı.
Çözüm 2: Sunucu Tarafı Sayfalama ile Breadcrumb Navigasyonu
Bir diğer seçenek, derin ağaç metaforunu tamamen terk ederek geleneksel sayfalama ve ekmek kırıntılarıyla değişmeyi içeriyordu. Bu çözüm, basitlik sundu ve bellek kararlılığını garanti etti. Ancak, eksileri, hukuki iş akışı için kabul edilemezdi: avukatlar, belgeleri farklı dallar üzerinden görsel olarak karşılaştırma yetisini kaybettiler ve birden fazla sayfalama tıklamasıyla gezinmenin bilişsel yükü, kullanıcı testlerinde görev tamamlama süresini %40 artırdı.
Çözüm 3: Agresif Düğüm Temizliği ile Geçikmeli Seri Yazım
Sonuç olarak, çökmüş dalların çocuk DOM öğelerini hemen ortadan kaldırdığı ve JavaScript referanslarını serbest bıraktığı agresif düğüm temizliği ile birlikte 5 saniyede bir durum değişikliklerini topluca yazan gecikmeli localStorage yazımları içeren bir hibrit çözüm uyguladık. Artıları arasında %70 oranında bellek ayak izinde azalma ve durum kayıtları sırasında yarış durumlarının ortadan kaldırılması yer alıyordu. Tek önemli eksisi, düğümler bir ekran okuyucusu tarafından duyurulurken yok edildiğinde odak yönetimini sürdürmenin artan karmaşıklığıydı ve bunu sanal yer tutuculara işaret eden aria-owns özniteliklerini uygulayarak hafiflettik.
Bu çözüm, ağaç metaforunun temel kullanıcı deneyimini korurken IE11 bellek kısıtlamalarını karşıladığı için seçildi. Sonuç, tarayıcı çökmesi olmadan sürekli 8 saatlik çalışma oturumlarını destekleyen ve tüm hükümet müşteri sitelerinde dağıtım onayı alan kararlı bir uygulamaydı.
Bellek sızıntılarını Internet Explorer 11'de nasıl doğru bir şekilde tespit edersiniz? Performans sekmesinin Chrome DevTools'ün ayrıntılarından yoksun olduğu durumlarda?
Birçok aday, IE11'in etkili bir şekilde profillenemeyeceğini yanlış bir şekilde varsayıyor, ancak bu, belirli iş akışı ayarlamalarıyla birlikte F12 Geliştirici Araçları'ndaki Profiler sekmesinin kullanılmasını gerektirir. Öncelikle, Internet Seçenekleri'nde "Hata Ayıklamayı Etkinleştir" seçeneğini açmalısınız, ardından IE11'in güncellenmiş geliştirici araçlarında mevcut olan Hafıza aracını kullanarak manuel yığın anlık görüntüleri alabilirsiniz. Anlık görüntüler arasında, temel karşılaştırmaların doğru olması için anlık görüntüler arasında çöp toplama işlemini zorlamanız gerektiği, özel IE11'e özgü olan çöp kutusu simgesine tıklamanız veya konsolda CollectGarbage() JavaScript yöntemini kullanmanız önemlidir. Özellikle, her etkileşim döngüsü ile birlikte büyüyen kalan nesne boyutunu gösterecek Detached DOM tree girdilerine bakın; bu, ağaç bileşeninin düğüm referanslarını serbest bırakmadığını gösterir.
Hiyerarşik ağaç görünümlerinde klavye navigasyonunu test ederken aria-expanded ve aria-pressed arasındaki belirgin ayrım nedir ve bu, WCAG 2.1 uyumu açısından neden önemlidir?
Adaylar genellikle bu durumları karıştırarak yanlış erişilebilirlik uygulamalarına neden olurlar. aria-expanded, bir düğümün şu anda görünür veya gizli olan çocuk öğeleri olduğunu belirtir; bu, ekran okuyucularının dalları gezerken "genişletilmiş" veya "daraltılmış" şeklinde bildirmesi için gereklidir. Buna karşın, aria-pressed, bir geçiş düğmesi durumunu belirtir ve düğüm kendisi bir onay kutusu gibi davranmadıkça ağaç düğümleri için uygun değildir. WCAG 2.1 Başarı Kriteri 4.1.2 (Ad, Rol, Değer) için normal genişletilebilir ağaç düğümünde aria-pressed kullanmak, ekran okuyucularının yanlış kontrol türünü bildirmesine neden olur; bu, kullanıcılar için bir düğmeyi mi etkinleştirdikleri yoksa bir yapıda mı gezindikleri konusunda kafa karışıklığı yaratır. Manuel testçiler, doğru özniteliklerin beklenen duyuruyu tetiklediğini doğrulamak için NVDA'nın konuşma görüntüleyicisinden faydalanmalıdır.
Manuel bir testçi, localStorage kota aşıldığı senaryolarını nasıl doğrulamalıdır? Storage API'sı IE11'de kalan alanı sorgulamak için doğrudan yöntemler sağlamadığında?
Çoğu aday, IE11'in her bir köken için 5MB sınırı uyguladığını ancak belirgin bir kota istisnası yerine genel bir "SCRIPT5022: Geçersiz argüman" hatası verdiğini gözden kaçırıyor. Bunu test etmek için, büyük Base64 dizgeleri yazarak bir döngü kullanarak programatik olarak localStorage'ı doldurmalısınız; bu, hata vermeden önce yazılarak yapılır ve ardından bir durum kaydetmeyi tetikleyen bir sürükle-bırak işlemi gerçekleştirilir. Sağlam bir uygulama, bu belirli hatayı yakalamalı ve sessionStorage veya bellek içi duruma geçerek müdahaleci olmayan bir uyarı banneri içermelidir. Testçiler, geri dönüş mekanizmasının mevcut oturumun değişikliklerini koruduğunu, tarayıcıdan yeniden başlatmalara persistanın kaybolduğu durumda bile doğrulamalıdır ve başarısız yazım girişimi sırasında mevcut localStorage girişlerinde veri bozulması meydana gelmediğinden emin olmalıdır.