Seçici biçim okuma: Async Clipboard API için daha iyi bir varsayılan

Prashant Singh

Yayınlanma tarihi: 3 Temmuz 2026

Daha önce bir doküman düzenleyici, e-tablo uygulaması veya panodan içerik yapıştırmanın temel etkileşim olduğu herhangi bir uygulama kullandıysanız kullanıcı beklentisini bilirsiniz: Yapıştırma işlemi anında gerçekleşmelidir.

Maalesef web uygulamaları çoğu durumda gerekenden daha fazla pano verisi okur. Bu durum, içeriğin yapıştırılmasını yavaşlatabilir, CPU döngülerini boşa harcayabilir ve uygulamanın asla ihtiyaç duymadığı veriler için bellek kullanabilir.

Seçici biçim okuma, Async Clipboard API'yi değiştirerek bu performans sorununu giderir. Bu sayede, kullanıcı beklentileri daha iyi karşılanır ve geliştiricilerin ihtiyaç duyduğu biçimler (uygulamanın gerçekten ihtiyaç duyduğu biçimler) okunur.

Sorun: Tüm veri biçimlerini önceden okuma

Bir kullanıcı herhangi bir uygulamadan (ör. Excel, Google Dokümanlar veya Photoshop) kopyalama yaptığında uygulama genellikle aynı verilerin birkaç gösterimini sistem panosuna yazar: düz metin, HTML, resim ve bazen de özel biçimler. Verileri okuyan web uygulaması (kullanıcı panodan yapıştırdığında) nadiren bu temsillerin tümüne ihtiyaç duyar. E-tablo düzenleyiciler HTML isteyebilir. Bir metin düzenleyici, "düz metin olarak yapıştır" komutunu kullanıma sunmak isteyebilir. Bir kod düzenleyici yalnızca metni ve başka hiçbir şeyi istemeyebilir.

Şimdiye kadar, navigator.clipboard.read() sistemdeki panodan verilerin mevcut tüm temsillerini getiriyor, temizleme işlemi (özellikle büyük HTML veya resim yüklerinde zaman alabilir) uyguluyor ve uygulamaların asla kullanmayacağı biçimler için bile baytları bellekte tutuyordu. Kullanılmayan yük ne kadar büyük olursa kullanıcının beklemesi o kadar uzun sürer ve sekme, yapıştırma yanıt verme hızının en önemli olduğu anda o kadar çok bellek tüketir.

Çözüm: Yalnızca numaralandırın, ardından isteğe bağlı olarak okuyun

Chrome ve Edge 149'dan itibaren, ClipboardItem navigator.clipboard.read() yöntemi tarafından döndürülen nesneler, verilere hemen erişim izni vermek yerine yalnızca navigator.clipboard.read() yöntemi tarafından döndürülen nesneleri açıklar. panoda ne olduğunu açıklar. Belirli bir biçimin gerçek baytları, yalnızca ClipboardItem.getType(mimeType) çağrıldığında panodan okunur. API yüzeyi değişmemiştir. Dün yazdığınız kod bugün de çalışmaya devam ederek size anında performans avantajları sağlar:

// Enumerate the available MIME types.
// No payload is fetched yet.
const items = await navigator.clipboard.read();

for (const item of items) {
  if (item.types.includes('text/html')) {
    // Only read the HTML data.
    // The data is fetched (and sanitized) here only.
     const blob = await item.getType('text/html');
     useThePastedHtml(await blob.text());
     break;
   }

   // text/plain, image/png, or any other custom formats
   // stored in the clipboard are never read.
}

Buradaki bir diğer performans avantajı ise önbelleğe almanın otomatik olmasıdır. Aynı ClipboardItem üzerinde getType('text/html') iki kez çağrıldığında, sistem panosundan yalnızca bir kez okunur ve ikinci çağrıda önbelleğe alınmış Blob döndürülür.

Faydaları

Gecikme. navigator.clipboard.read() çağrıldığında yapılması gereken işlemler (ör. süreçler arasında bayt kopyalama, HTML'yi temizleme veya görüntüleri kod çözme) artık yalnızca uygulamanızın gerçekten ihtiyaç duyduğu biçimler için gerçekleştiriliyor. Yalnızca tek bir biçimi okuyan uygulamalar en fazla tasarrufu sağlar. Ne kadar büyük biçimleri atlarsanız o kadar çok kazanırsınız. HTML temizleme işlemi maliyetli olduğundan en çok HTML yararlanır.

Bellek. Daha önce, pano 50 MB'lık bir resim içerdiğinde navigator.clipboard.read() çağrıldığında, uygulama yalnızca verilerin text/plain gösterimini gerektirse bile ClipboardItem serbest bırakılana kadar web sayfasının oluşturucu belleğinde 50 MB kullanılması gerekiyordu. Artık yalnızca ClipboardItem.getType() çağrılırken uygulamanızın okuduğu biçimler oluşturma işlemi sırasında bellek kullanır. Yapıştırmanın yaygın olduğu uygulamalarda (ör. doküman düzenleyiciler, posta oluşturucular veya tasarım araçları) bu özellik, yapıştırma sırasında bellek kullanımını önemli ölçüde azaltır. Özellikle birden fazla düzenleyicinin panoyu paralel olarak okuyabileceği çok sekmeli oturumlarda bu durum daha belirgindir.

Etkinleştirme gerekmez. Web'deki her site bu avantajlardan otomatik olarak yararlanır. Kod taşımanız veya kodu özellik algılama mantığının arkasına yerleştirmeniz gerekmez.

Bilmeniz gereken bir davranış değişikliği

Verilerin daha sonra okunması davranışta küçük bir değişikliğe neden olur: ClipboardItem nesnesi artık navigator.clipboard.read() çağrısının çözüldüğü andaki panonun dondurulmuş anlık görüntüsü değildir.

read() çağrılıp ClipboardItem döndürdüğünde bu öğe, sistemdeki pano verileri için yalnızca bir geç yüklenen tutamaçtır. Pano içeriği, read() çağrısı ile daha sonraki bir getType() çağrısı arasında değişirse bu çağrı InvalidStateError ile reddedilir. Bu durum, aynı ClipboardItem üzerinde daha önce başarıyla okuduğunuz bir biçim için bile geçerlidir.

// Read from the clipboard.
const items = await navigator.clipboard.read();
// Get the first ClipboardItem.
const item = items[0];

// Actually fetch the data now, which works fine.
const text = await item.getType('text/plain');

// The user writes something new to the clipboard
// by copying from another app, or your own code writes to
// the clipboard again.
await navigator.clipboard.writeText('something new');

// Fetching the data from the earlier ClipboardItem
// rejects with InvalidStateError, because the contents
// of the clipboard changed.
const html = await item.getType('text/html');

Bunun nedeni, artık panoyu yansıtmayan verilerin döndürülmesinin kafa karıştırıcı olması ve aksi takdirde hata ayıklaması zor sorunlara yol açmasıdır.

Uygulamalar genellikle aynı yapıştırma işleyicisi içinde read() ve getType() işlevlerini arka arkaya çağırdığından, bu değişiklik çoğu kod için görünmezdir. Ancak, eşzamansız sınırlar arasında ClipboardItem tutan kodunuzun olduğu durumları gözden geçirmeniz gerekebilir.

Bu değişikliğin sorun olabileceği bir örnek: ClipboardItem nesnelerini window önbelleğe alma, bunları pano geçmişi kullanıcı arayüzünde gösterme veya getType() işlevini çağırmadan önce kullanıcı etkileşimini bekleme. Bu tür bir senaryoyla ilgili sorun yaşamamak için:

• getType() çağrılarını try / catch bloklarına sarın ve InvalidStateError öğesini, panonun taşındığı ve kodun tekrar okunması gerektiği sinyali olarak değerlendirin.
• Pano verilerini saklamanız gerekiyorsa Blob verilerini getType() işlemi yapar yapmaz kendi yapınıza kopyalayın. ClipboardItem bölümünü uzun vadeli depolama alanı olarak kullanmayın.
• Eski tutmaçları proaktif olarak geçersiz kılmak için clipboardChange etkinliğini kullanın.

Standartlar ve tarayıcı desteği

Seçici biçim okuma, Web Editing Working Group ve Microsoft Edge web platformu ekibi tarafından desteklenen bir Clipboard API'leri spesifikasyon değişikliğidir.

Safari de bu davranışı destekler. Firefox ise standartlarla ilgili olumlu bir tutum sergilediğini ve uyum sağlamayı amaçladığını belirtmiştir.

Chromium artık aynı modele yakınsadığı için Pano API'sinde sessiz ama anlamlı bir performans ve birlikte çalışabilirlik iyileştirmesi yapıldı.