ใช้ document.write()

การใช้ document.write() อาจทำให้การแสดงเนื้อหาของหน้าเว็บช้าลงหลายสิบวินาที และจะเป็นปัญหาอย่างยิ่งสำหรับผู้ใช้ที่มีการเชื่อมต่อที่ช้า Chrome จึงบล็อกการดำเนินการของ document.write() ในหลายกรณี หมายความว่าคุณไม่สามารถพึ่งพาได้

ในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณจะเห็นข้อความต่อไปนี้เมื่อใช้ document.write()

[Violation] Avoid using document.write().

คุณจะเห็นข้อความนี้ในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บของ Firefox

An unbalanced tree was written using document.write() causing
data from the network to be reparsed.

วิธีที่การตรวจสอบ document.write() ของ Lighthouse ล้มเหลว

แฟล็ก Lighthouse การโทรไปยัง document.write() ที่ไม่ถูกบล็อกโดย Chrome:

การตรวจสอบ Lighthouse ที่แสดงการใช้งาน document.write

สำหรับการใช้งานที่มีปัญหามากที่สุด Chrome จะบล็อกการเรียกใช้ document.write() หรือแสดงคำเตือนเกี่ยวกับคอนโซล ทั้งนี้ขึ้นอยู่กับความเร็วในการเชื่อมต่อของผู้ใช้ ไม่ว่าจะด้วยวิธีใด การเรียกที่ได้รับผลกระทบจะปรากฏในคอนโซล DevTools ดูข้อมูลเพิ่มเติมได้ในบทความการแทรกแซงdocument.write()ของ Google

Lighthouse จะรายงานการเรียกใช้ document.write() ที่เหลืออยู่เนื่องจากส่งผลเสียต่อประสิทธิภาพไม่ว่าจะใช้งานอย่างไร และยังมีทางเลือกอื่นๆ ที่ดีกว่า

หลีกเลี่ยง document.write()

นำการใช้ document.write() ทั้งหมดในโค้ดออก หากมีการใช้เพื่อแทรกสคริปต์ของบุคคลที่สาม ให้ลองใช้การโหลดแบบไม่พร้อมกันแทน

หากโค้ดของบุคคลที่สามใช้ document.write() ให้ขอให้ผู้ให้บริการรองรับการโหลดแบบอะซิงโครนัส

แหล่งข้อมูล