Laboratuvar / Açık yöntem
Ön yüz optimizasyonu: 50 bin faturalık liste
50.000 faturayı filtreleyip listeleme: 1,39 sn → 16,5 ms. Sentetik laboratuvar; 10 tekrarın medyanı. Kod ve ham veri açık.
Tüm eşleşmeleri ekrana ekleşu sistemeGörünür satırları çiz
Web arayüzü / Web UI LABORATUVAR ÖLÇÜMÜ
50 bin fatura. Ekranda yalnız gereken satırlar.
Vadesi geçen faturaları filtreleme. Aynı kayıtlar ve aynı kaydırma alanı; ekrana çizilen satır sayısı değişiyor.
Finans ekibi kalabalık listede çalışırken arayüzün toparlanmasını beklemez. Tam sonuç kümesi korunur; görünür bölüm çizilir.
Tüm eşleşmeleri ekrana ekle
Her eşleşme için ayrı DOM satırı.
- DOM’daki fatura satırı
- 33.333
Görünür satırları çiz
Tam sonuç listesi; 40 satırlık görünür pencere.
- DOM’daki fatura satırı
- 40
Çubuklar sıfırdan başlar; tüm uygulamalarda aynı süre ölçeği kullanılır.
Bütün eşleşmeleri DOM’a eklemek yerine 40 satırlık görünür pencere kullanıldı. Aynı filtre tüm kayıtlara uygulanır; aşağı kaydırıldıkça pencere yenilenir.
Tüm yük noktaları ve ölçüm tablosu
| Uygulama | Medyan süre | DOM’daki fatura satırı |
|---|---|---|
| Tüm eşleşmeleri ekrana ekle | 29,4 ms | 666 |
| Görünür satırları çiz | 16,6 ms | 40 |
| Uygulama | Medyan süre | DOM’daki fatura satırı |
|---|---|---|
| Tüm eşleşmeleri ekrana ekle | 244,9 ms | 6.666 |
| Görünür satırları çiz | 16,55 ms | 40 |
| Uygulama | Medyan süre | DOM’daki fatura satırı |
|---|---|---|
| Tüm eşleşmeleri ekrana ekle | 1,386 sn | 33.333 |
| Görünür satırları çiz | 16,5 ms | 40 |
Müşteri adı metin olarak kalır.
Customer 42
ÖnceMetin korundu
✓ SonraMetin korundu; HTML öğesi oluşmadı
A & B
ÖnceMetin korundu
✓ SonraMetin korundu; HTML öğesi oluşmadı
North < East > West
ÖnceMetin korundu
✓ SonraMetin korundu; HTML öğesi oluşmadı
Quote " and apostrophe '
ÖnceMetin korundu
✓ SonraMetin korundu; HTML öğesi oluşmadı
<b data-probe>Customer 42</b>
ÖnceHTML öğesi oluştu
✓ SonraMetin korundu; HTML öğesi oluşmadı
<span title="synthetic">Invoice</span>
ÖnceHTML öğesi oluştu
✓ SonraMetin korundu; HTML öğesi oluşmadı
Kendiniz deneyin
Kayıtlı laboratuvar sonuçlarını birlikte oynatın.
Ölçek arttığında
İş yüküne göre süre
- Önce
- Sonra
İş yüküne göre süre (ms)
Tablo olarak göster
| Kaynak fatura kaydı | Önce | Sonra |
|---|---|---|
| 1.000 | 29,4 ms | 16,6 ms |
| 10.000 | 244,9 ms | 16,55 ms |
| 50.000 | 1.385,8 ms | 16,5 ms |
Nasıl ölçtük?
Ortam, protokol ve teknik değerlendirme
Ortam ve veri
- Ortam
- Chrome 154 · macOS · 8 logical cores · viewport 1280 × 720
- Veri seti
- 1.000 / 10.000 / 50.000 sentetik fatura; aynı vade filtresi ve tam sonuç kontrol toplamı.
- Araçlar
- performance.now · requestAnimationFrame · DOM / scroll checks · Python independent result oracle
- Tekrarlar
- 3 yük × 2 uygulama × 10 ölçüm + 12 ısınma; bütün tekrarlar korunur.
50 bin fatura. Ekranda yalnız gereken satırlar.
Vadesi geçen faturaları filtreleme. Aynı kayıtlar ve aynı kaydırma alanı; ekrana çizilen satır sayısı değişiyor.
Görünür tarayıcı sekmesinde dönüşümlü uygulamalar. İki ısınma sonrası kol ve boyut başına 10 tekrar. Her ölçümde tüm eşleşen kayıtların kontrol toplamı, üst/alt görünüm ve kaydırma yüksekliği doğrulanır. Zaman aralığı filtrelemeyle başlar; DOM, layout ve iki requestAnimationFrame içerir. Fiziksel ekran sunumu ölçülmez. Birincil nokta 50.000 kaynak fatura.
Ölçüm betiğini inceleyin ↗İşinize ne kazandırır?
Finans ekibi kalabalık listede çalışırken arayüzün toparlanmasını beklemez. Tam sonuç kümesi korunur; görünür bölüm çizilir.
Değişiklik ve kapsam
Bütün eşleşmeleri DOM’a eklemek yerine 40 satırlık görünür pencere kullanıldı. Aynı filtre tüm kayıtlara uygulanır; aşağı kaydırıldıkça pencere yenilenir.
Sentetik faturalar; Chrome 154, macOS, 1280 × 720. Filtre, DOM değişimi, layout ve iki animation-frame aralığı ölçüldü. Ağ, veritabanı ve gerçek kullanıcı INP ölçümü dahil değil.
Daha az satır çizmek, daha az veriye bakmak değildir
50.000 faturanın 33.333’ü filtreye uyar. Her iki uygulama da bu kayıtların tamamını bulur. Yenilenen ekran yalnız 40 DOM satırı tutar; liste sonuna kaydırma da doğrulanır. Modern koldaki en yavaş 112,7 ms koşu ham kayıtlarda korunur.
Metin ve HTML sınırı
Altı zararsız kodlama kontrolünde textContent girdiyi metin olarak korudu. Eski HTML birleştirme biçimi iki girdiyi HTML öğesine dönüştürdü. Bu test veri gösterimini sınar; bütün XSS türlerinin veya uygulama güvenliğinin denetimi değildir.
Kendi sisteminizde başlangıç
En çok bekleten işlemi, veri miktarını ve yoğun saatleri birlikte belirleyelim. Önce bu işin baz ölçümünü alır, sonra kodu ve erişim biçimini değiştirip aynı sonucu karşılaştırırız.
Ne yaptık?
İş kuralı ve veri
YZSentetik iş akışı, testler ve ölçüm otomasyonu hazırlandı.
DoğrulamaYayınlanan kod ve ham sonuçlar incelemeye açıktır; müşteri projesi değildir.
Uygulama değişikliği
YZBütün eşleşmeleri DOM’a eklemek yerine 40 satırlık görünür pencere kullanıldı. Aynı filtre tüm kayıtlara uygulanır; aşağı kaydırıldıkça pencere yenilenir.
DoğrulamaÇıktı eşitliği bağımsız kontrolle doğrulandı; bütün tekrarlar pakette tutuldu.