Betiğin sayfanıza maliyeti

İndirme boyutu

Bu, betik etiketi kodunun yüklediği ar.min.js dosyası; kayıt motoru (rrweb) içinde. gzip’li dosya bütçeyi aşarsa derleme başarısız olur; böylece bir bağımlılık güncellemesi her müşterinin sitesini sessizce ağırlaştıramaz. Oturumları oynatan oynatıcı içinde değildir; onu yalnızca panel yükler.

Nasıl yüklenir

• Kod küçük bir kuyruk tanımlar ve betiği async ile ekler; tarayıcı dosya inerken sayfayı ayrıştırmayı ve çizmeyi sürdürür. Dosya gelmeden yapılan çağrılar — init, identify, track — kuyrukta bekler ve sırayla çalışır.
• requireConsent ile kaydedici onay verilene kadar hiçbir şey kaydetmez, saklamaz, göndermez. sampleRate ile örneklemeye girmeyen bir ziyaretçi hiç kaydedilmez.
• Kaydedicinin yaptığı hiçbir şey sayfanıza hata fırlatamaz: hataları yakalanır ve debug: true ile konsola yazılır.

Ana iş parçacığında ne yapar

1. Sayfa başına bir kez: anlık görüntü. Kayıt başlarken sayfayı bir kez okur ve okunabilen stil sayfalarını metin olarak alıp serileştirir. Bu en büyük tek iştir ve sayfa büyüdükçe büyür.
2. Ziyaretçi sayfadayken: değişiklikler. Bir MutationObserver ve olay dinleyicileri neyin değiştiğini — öğeler, metin, kaydırma, tıklamalar, cihazda maskelenen form girdisi — sayfayı yeniden okumadan not eder.
3. 5 saniyede bir: gönderim. Değişiklikler toplanıp fetch ile gönderilir; sekme gizlenir ya da kapanırsa kalan keepalive ya da sendBeacon ile gider. Paketler JSON’dur ve kaydedici tarafından sıkıştırılmaz.
4. Hiç yapılmayanlar: canvas kaydı, yazı tipi toplama, ekran görüntüsü ya da video.

Chrome’da ölçüldü

Bir mağaza sayfasını — ürün kartları, bir form, bir stil sayfası — Chrome 156.0.8078.47 ile bir kez kaydedicisiz, bir kez müşterilerin yapıştırdığı kodun aynısıyla, her biri 5 kez yükledik ve Chrome’un kendisinin bildirdiği ana iş parçacığı süresindeki farkın ortancasını aldık. Sonra aynısını işlemciyi dört kat yavaşlatarak, Chrome’un orta segment telefon karşılığıyla yaptık. Veri alımı yerel bir taklitti; ağ bu sayılara dahil değil.

“Etkinlik”, sayfanın saniyede on kez yirmi öğeyi değiştirip kaydırdığı 10 saniyedir — çoğu ziyaretten yoğun. Chrome 50 ms ve üzeri görevi uzun sayar, çünkü sayfa o sırada bir dokunuşa yanıt veremez. Ölçüm makinesi: Apple M4.

Bilmeye değer sınırlar

Anlık görüntüsü 512 KB’tan büyük bir sayfa kaydedilmez: kaydedici o sayfa için durur ve debug: true ile konsola snapshot_too_large yazar. Test sayfamızda bu 3.000 öğenin biraz üzerinde oluyor. Bkz. kısa kesilen oturumlar.

• Anlık görüntünün maliyeti sayfayla büyür. Ağır sayfada ve yavaş işlemcide uzun bir görev olabilir; o zaman sampleRate’i ya da kimsenin görmesi gerekmeyen büyük bir bileşen için ar-block’u düşünün.
• Bunlar tek bir makineden laboratuvar sayılarıdır. Sizin sayfanız, ziyaretçilerinizin cihazları ve sayfadaki diğer betikler onları her iki yönde de değiştirir.