Published: July 3, 2026
หากคุณเคยใช้โปรแกรมแก้ไขเอกสาร แอปสเปรดชีต หรือแอปใดก็ตามที่การวางเนื้อหาจากคลิปบอร์ดเป็นการโต้ตอบหลัก คุณจะทราบถึงความคาดหวังของผู้ใช้ว่าการวางควรจะเกิดขึ้นทันที
อย่างไรก็ตาม ในหลายๆ กรณี เว็บแอปจะอ่านข้อมูลคลิปบอร์ดมากกว่าที่จำเป็น ซึ่งอาจทำให้การวางเนื้อหาช้ากว่าที่ควรจะเป็น สิ้นเปลืองรอบ CPU และใช้หน่วยความจำสำหรับข้อมูลที่แอปไม่จำเป็นต้องใช้
การอ่านรูปแบบที่เลือก ช่วยแก้ปัญหาด้านประสิทธิภาพนี้โดยการแก้ไข Async Clipboard API เพื่อให้ตรงกับความคาดหวังของผู้ใช้มากขึ้นและมอบสิ่งที่นักพัฒนาแอปต้องการ นั่นคือการอ่านเฉพาะ รูปแบบที่แอปต้องการจริงๆ
ปัญหา: อ่านรูปแบบข้อมูลทั้งหมดล่วงหน้า
เมื่อผู้ใช้คัดลอกจากแอปใดก็ตาม เช่น Excel, Google เอกสาร หรือ Photoshop โดยปกติแล้วแอปจะเขียนข้อมูลเดียวกันในรูปแบบต่างๆ ลงในคลิปบอร์ดของระบบ ได้แก่ ข้อความธรรมดา, HTML, รูปภาพ และบางครั้งก็เป็นรูปแบบที่กำหนดเอง เว็บแอปที่อ่านข้อมูล (เมื่อผู้ใช้วางจากคลิปบอร์ด) ไม่ค่อยจำเป็นต้องใช้ข้อมูลในรูปแบบทั้งหมดนี้ โปรแกรมแก้ไขสเปรดชีตอาจต้องการ HTML โปรแกรมแก้ไขข้อความอาจต้องการแสดงคำสั่ง "วางเป็นข้อความธรรมดา" โปรแกรมแก้ไขโค้ดอาจต้องการเพียงข้อความเท่านั้น
จนถึงตอนนี้
navigator.clipboard.read()
จะดึงข้อมูลในทุกรูปแบบที่มีจากคลิปบอร์ดของระบบ
เรียกใช้การตรวจสอบความถูกต้อง (ซึ่งอาจใช้เวลา โดยเฉพาะอย่างยิ่งกับเพย์โหลด HTML หรือ
รูปภาพขนาดใหญ่) และเก็บไบต์ไว้ในหน่วยความจำ แม้ว่าจะเป็นรูปแบบที่แอปจะไม่มีวันใช้ก็ตาม ยิ่งเพย์โหลดที่ไม่ได้ใช้มีขนาดใหญ่เท่าใด ผู้ใช้ก็ยิ่งต้องรอนานขึ้น และแท็บก็จะใช้หน่วยความจำมากขึ้น ซึ่งเป็นช่วงเวลาที่การตอบสนองของการวางมีความสำคัญมากที่สุด
วิธีแก้ปัญหา: แสดงรายการก่อน แล้วอ่านตามต้องการ
ตั้งแต่ Chrome และ Edge 149 เป็นต้นไป
ClipboardItem
ออบเจ็กต์ที่แสดงผลโดยเมธอด navigator.clipboard.read() จะอธิบายเพียง
สิ่งที่อยู่ในคลิปบอร์ด แทนที่จะให้สิทธิ์เข้าถึงข้อมูลทันที ระบบจะอ่านไบต์จริงสำหรับรูปแบบที่กำหนดจากคลิปบอร์ดก็ต่อเมื่อคุณเรียกใช้
ClipboardItem.getType(mimeType)
API Surface ไม่มีการเปลี่ยนแปลง โค้ดที่คุณเขียนเมื่อวานยังคงใช้งานได้ในวันนี้ ซึ่งจะช่วยให้คุณได้รับประโยชน์ด้านประสิทธิภาพทันที ดังนี้
// 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.
}
ประโยชน์ด้านประสิทธิภาพอีกอย่างหนึ่งคือการแคชจะเกิดขึ้นโดยอัตโนมัติ การเรียกใช้
getType('text/html') 2 ครั้งใน ClipboardItem เดียวกันจะอ่านจากคลิปบอร์ดของระบบเพียงครั้งเดียวและแสดงผล Blob ที่แคชไว้ในการเรียกใช้ครั้งที่ 2
ประโยชน์
เวลาในการตอบสนอง งานที่ต้องเกิดขึ้นเมื่อมีการเรียกใช้ navigator.clipboard.read() เช่น การคัดลอกไบต์ระหว่างกระบวนการ การตรวจสอบความถูกต้องของ HTML หรือการถอดรหัสรูปภาพ จะเกิดขึ้นเฉพาะกับรูปแบบที่แอปของคุณต้องการจริงๆ เท่านั้น แอปที่อ่านเพียงรูปแบบเดียวจะได้รับประโยชน์มากที่สุด ยิ่งคุณข้ามรูปแบบมากเท่าใด คุณก็จะยิ่งได้รับประโยชน์มากขึ้นเท่านั้น HTML ได้รับประโยชน์มากที่สุดเนื่องจากการตรวจสอบความถูกต้องของ HTML ใช้ทรัพยากรมาก
หน่วยความจำ ก่อนหน้านี้ การเรียกใช้ navigator.clipboard.read() เมื่อคลิปบอร์ดมีรูปภาพขนาด 50 MB หมายความว่าจะต้องใช้หน่วยความจำของโปรแกรมแสดงผลของหน้าเว็บ 50 MB จนกว่าจะมีการเผยแพร่ ClipboardItem แม้ว่าแอปจะต้องการเพียงข้อมูลในรูปแบบ text/plain ก็ตาม ตอนนี้เฉพาะรูปแบบที่แอปอ่านเมื่อเรียกใช้ ClipboardItem.getType() เท่านั้นที่จะใช้หน่วยความจำในกระบวนการแสดงผล สำหรับแอปที่มีการวางข้อมูลบ่อยๆ เช่น โปรแกรมแก้ไขเอกสาร โปรแกรมเขียนอีเมล หรือเครื่องมือออกแบบ การดำเนินการนี้จะช่วยลดการใช้หน่วยความจำอย่างมากระหว่างการวาง โดยเฉพาะอย่างยิ่งในเซสชันแบบหลายแท็บที่โปรแกรมแก้ไขหลายรายการอาจอ่านคลิปบอร์ดพร้อมกัน
ไม่ต้องเลือกใช้ ทุกเว็บไซต์บนเว็บจะได้รับประโยชน์เหล่านี้โดยอัตโนมัติ คุณไม่จำเป็นต้องย้ายโค้ดหรือควบคุมการเข้าถึงโค้ดด้วยตรรกะการตรวจหาฟีเจอร์
การเปลี่ยนแปลงลักษณะการทำงานที่ควรทราบ
การอ่านข้อมูลในภายหลังจะทำให้เกิดการเปลี่ยนแปลงลักษณะการทำงานเล็กน้อย นั่นคือออบเจ็กต์ ClipboardItem จะไม่ใช่สแนปชอตแบบคงที่ของคลิปบอร์ดอีกต่อไปในขณะที่การเรียกใช้ navigator.clipboard.read() เสร็จสมบูรณ์
เมื่อมีการเรียกใช้ read() และแสดงผล ClipboardItem รายการนี้จะเป็นเพียง แฮนเดิลแบบเลซี่ ของข้อมูลในคลิปบอร์ดของระบบ
หากเนื้อหาของคลิปบอร์ดมีการเปลี่ยนแปลงระหว่างการเรียกใช้ read() กับการเรียกใช้ getType() ในภายหลัง ระบบจะปฏิเสธการเรียกใช้นั้นด้วย InvalidStateError ซึ่งจะเป็นจริงแม้ว่าคุณจะอ่านรูปแบบนั้นสำเร็จก่อนหน้านี้ใน ClipboardItem เดียวกันก็ตาม
// 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');
การดำเนินการนี้เกิดขึ้นเนื่องจากการแสดงผลข้อมูลที่ไม่ตรงกับคลิปบอร์ดอีกต่อไปจะทำให้เกิดความสับสนและนำไปสู่ปัญหาที่แก้ไขข้อบกพร่องได้ยาก
ในทางปฏิบัติ การเปลี่ยนแปลงนี้จะมองไม่เห็นสำหรับโค้ดส่วนใหญ่ เนื่องจากโดยปกติแล้วแอปจะเรียกใช้ read() และ getType() ติดๆ กันภายในตัวจัดการการวางเดียวกัน อย่างไรก็ตาม คุณอาจต้องระมัดระวังในกรณีที่คุณมีโค้ดที่เก็บ ClipboardItem ไว้ในขอบเขตแบบไม่พร้อมกัน
ตัวอย่างต่อไปนี้แสดงให้เห็นว่าการเปลี่ยนแปลงนี้อาจกลายเป็นปัญหาได้ นั่นคือการแคชออบเจ็กต์ ClipboardItem ใน window, การแสดงออบเจ็กต์เหล่านั้นใน UI ประวัติคลิปบอร์ด หรือการรอการโต้ตอบของผู้ใช้ก่อนที่จะเรียกใช้ getType() วิธีหลีกเลี่ยงปัญหาในสถานการณ์เช่นนี้
- ใส่การเรียกใช้
getType()ไว้ในบล็อกtry / catchและถือว่าInvalidStateErrorเป็นสัญญาณว่าคลิปบอร์ดมีการเปลี่ยนแปลงและโค้ดควรอ่านอีกครั้ง - หากต้องการเก็บข้อมูลคลิปบอร์ดไว้ ให้คัดลอก
Blobลงในโครงสร้างของคุณเองทันทีที่คุณเรียกใช้getType()อย่าถือว่าClipboardItemเป็นที่เก็บข้อมูลระยะยาว - ใช้เหตุการณ์
clipboardChangeเพื่อยกเลิกแฮนเดิลที่ล้าสมัยอย่างเชิงรุก
มาตรฐานและการรองรับเบราว์เซอร์
การอ่านรูปแบบที่เลือกเป็นการเปลี่ยนแปลงข้อกำหนดของ Clipboard API ที่ขับเคลื่อนโดย Web Editing Working Group และทีมแพลตฟอร์มเว็บ Microsoft Edge
การปรับปรุงประสิทธิภาพและการทำงานร่วมกันของ Clipboard API ที่เงียบแต่มีความหมาย โดยตอนนี้ Chromium กำลังปรับให้เป็นไปตามโมเดลเดียวกัน