ฉันรู้ว่าdocument.writeมันเป็นการปฏิบัติที่ไม่ดี; และฉันหวังว่าจะรวบรวมรายการเหตุผลที่จะส่งให้ผู้ขายบุคคลที่สามว่าทำไมพวกเขาไม่ควรใช้document.writeในการใช้งานการวิเคราะห์รหัสของพวกเขา

โปรดระบุเหตุผลของคุณในการอ้างว่าdocument.writeเป็นการปฏิบัติที่ไม่ดีด้านล่าง

ปัญหาที่ร้ายแรงบางประการ:

• document.write (ต่อจากนี้ไป DW) ไม่ทำงานใน XHTML

• DW ไม่ได้ปรับเปลี่ยน DOM โดยตรงป้องกันการจัดการเพิ่มเติม (พยายามค้นหาหลักฐานนี้ แต่เป็นสถานการณ์ที่ดีที่สุด)

• DW ที่ดำเนินการหลังจากที่หน้าโหลดเสร็จแล้วจะเขียนทับหน้าหรือเขียนหน้าใหม่หรือไม่ทำงาน

• DW ดำเนินการเมื่อพบ: มันไม่สามารถทำการฉีดที่จุดโหนดที่กำหนด

• DW กำลังเขียนข้อความที่ทำให้เป็นลำดับซึ่งไม่ใช่วิธีที่ DOM ใช้งานในเชิงแนวคิดและเป็นวิธีที่ง่ายในการสร้างข้อบกพร่อง (.innerHTML มีปัญหาเดียวกัน)

ดีกว่าที่จะใช้วิธีการจัดการ DOM ที่ปลอดภัยและเป็นมิตรกับDOM

มีจริงอะไรผิดปกติกับdocument.writeต่อ se ปัญหาคือมันง่ายต่อการใช้ผิดวัตถุประสงค์ อย่างไม่มีการลดแม้แต่

ในแง่ของผู้ขายที่จัดหารหัสการวิเคราะห์ (เช่น Google Analytics) เป็นวิธีที่ง่ายที่สุดสำหรับพวกเขาในการแจกจ่ายตัวอย่างข้อมูลดังกล่าว

1. มันทำให้สคริปต์เล็ก
2. พวกเขาไม่ต้องกังวลเกี่ยวกับการแทนที่เหตุการณ์ onload ที่สร้างไว้แล้วหรือรวมถึงนามธรรมที่จำเป็นเพื่อเพิ่มเหตุการณ์ onload อย่างปลอดภัย
3. มันเข้ากันได้อย่างมาก

ตราบใดที่คุณไม่พยายามใช้มันหลังจากเอกสารโหลดแล้วdocument.writeมันก็ไม่ได้เลวร้ายในความคิดของฉัน

การใช้งานที่ถูกกฎหมายอีกอย่างdocument.writeมาจากตัวอย่างHTML5 Boilerplate index.html

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>

ฉันได้เห็นเทคนิคเดียวกันสำหรับการใช้json2.js JSON แจง / stringify polyfill ( ต้องการโดย IE7 และด้านล่าง )

<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>

มันสามารถบล็อกหน้าของคุณ

document.writeใช้งานได้เฉพาะในขณะที่หน้ากำลังโหลด; ถ้าคุณเรียกมันว่าหลังจากโหลดหน้าเสร็จแล้วมันจะเขียนทับทั้งหน้า

สิ่งนี้หมายความว่าคุณต้องเรียกมันจากบล็อกสคริปต์แบบอินไลน์ - และนั่นจะป้องกันไม่ให้เบราว์เซอร์ประมวลผลส่วนต่างๆของหน้าเว็บที่ตามมา สคริปต์และรูปภาพจะไม่ถูกดาวน์โหลดจนกว่าบล็อกการเขียนจะเสร็จสิ้น

มือโปร:

• เป็นวิธีที่ง่ายที่สุดในการฝังเนื้อหาแบบอินไลน์จากสคริปต์ภายนอก (ไปยังโฮสต์ / โดเมนของคุณ)
• คุณสามารถเขียนทับเนื้อหาทั้งหมดในเฟรม / iframe ฉันเคยใช้เทคนิคนี้มากสำหรับชิ้นส่วนเมนู / การนำทางก่อนที่จะมีเทคนิค Ajax ที่ทันสมัยมากขึ้นอย่างกว้างขวาง (1998-2002)

Con:

• มันทำให้เครื่องมือเรนเดอร์แสดงผลเป็นแบบหยุดชั่วคราวจนกว่าจะมีการโหลดสคริปต์ภายนอกซึ่งอาจใช้เวลานานกว่าสคริปต์ภายใน
• โดยปกติจะใช้ในลักษณะที่วางสคริปต์ภายในเนื้อหาซึ่งถือว่าเป็นรูปแบบที่ไม่ดี

ต่อไปนี้เป็นมูลค่าทวีคูณของฉันโดยทั่วไปคุณไม่ควรใช้document.writeสำหรับการยกของหนัก แต่มีตัวอย่างหนึ่งที่มันมีประโยชน์อย่างแน่นอน:

http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html

ฉันค้นพบสิ่งนี้เมื่อเร็ว ๆ นี้พยายามสร้างแกลเลอรีตัวเลื่อน AJAX ฉันสร้าง div ที่ซ้อนกันสองอันและใช้width/ heightและoverflow: hiddenภายนอก<div>กับ JS นี่เป็นเหตุให้ในกรณีที่เบราว์เซอร์ปิดการใช้งาน JS div จะลอยเพื่อรองรับภาพในแกลเลอรี่ซึ่งเป็นการย่อยสลายที่สวยงาม

สิ่งที่เป็นเช่นเดียวกับบทความข้างต้นการจี้ JS นี้ของ CSS ไม่เริ่มต้นจนกว่าจะโหลดหน้าเว็บทำให้แฟลชชั่วขณะขณะที่ div ถูกโหลด ดังนั้นฉันจึงจำเป็นต้องเขียนกฎ CSS หรือรวมแผ่นงานเป็นหน้าโหลด

เห็นได้ชัดว่าสิ่งนี้จะไม่ทำงานใน XHTML แต่เนื่องจาก XHTML ดูเหมือนจะเป็นเป็ดตาย (และแสดงเป็นแท็กซุปใน IE) จึงอาจคุ้มค่าที่จะประเมินการเลือก DOCTYPE อีกครั้ง ...

มันเขียนทับเนื้อหาบนหน้าซึ่งเป็นเหตุผลที่ชัดเจนที่สุด แต่ฉันจะไม่เรียกมันว่า "ไม่ดี"

มันไม่ค่อยมีประโยชน์อะไรมากนักเว้นแต่คุณจะสร้างเอกสารทั้งหมดโดยใช้ JavaScript ซึ่งในกรณีนี้คุณอาจเริ่มด้วย document.write

ถึงกระนั้นคุณก็ไม่ได้ใช้ประโยชน์จาก DOM จริงๆเมื่อคุณใช้ document.write - คุณแค่ทิ้งข้อความขนาดเล็กลงในเอกสารดังนั้นฉันจึงบอกว่ามันเป็นรูปแบบที่ไม่ดี

มันแบ่งหน้าโดยใช้การแสดงผล XML (เช่นหน้า XHTML)

ดีที่สุด : เบราว์เซอร์บางตัวกลับไปใช้การแสดงผล HTML และทุกอย่างทำงานได้ดี

น่าจะเป็น : เบราว์เซอร์บางตัวปิดการใช้งานฟังก์ชั่น document.write () ในโหมดการแสดงผล XML

แย่ที่สุด : บางเบราว์เซอร์จะเริ่มทำงานข้อผิดพลาด XML ทุกครั้งที่ใช้ฟังก์ชั่น document.write ()

ปิดส่วนหัวของฉัน:

1. document.writeจำเป็นต้องใช้ในการโหลดหน้าเว็บหรือโหลดเนื้อหา ดังนั้นหากคุณต้องการใช้สคริปต์ในเวลาอื่น ๆ เพื่ออัปเดตเนื้อหาเนื้อหาหน้าของคุณ

2. ทางเทคนิคdocument.writeจะอัปเดตหน้า HTML ไม่ใช่ XHTML / XML ดูเหมือนว่า IE จะให้อภัยความจริงข้อนี้ แต่เบราว์เซอร์อื่นจะไม่เป็นเช่นนั้น

http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

Chrome อาจบล็อกdocument.writeที่แทรกสคริปต์ในบางกรณี เมื่อสิ่งนี้เกิดขึ้นมันจะแสดงคำเตือนนี้ในคอนโซล:

มีการเรียกใช้สคริปต์ตัวแยกวิเคราะห์ Parser, cross-origin ผ่าน document.write เบราว์เซอร์นี้อาจถูกบล็อกหากอุปกรณ์มีการเชื่อมต่อเครือข่ายไม่ดี

อ้างอิง:

• บทความเกี่ยวกับ developers.google.comนี้มีรายละเอียดเพิ่มเติม
• https://www.chromestatus.com/feature/5718547946799104

การละเมิดเบราว์เซอร์

.writeถูกพิจารณาว่าเป็นการละเมิดเบราว์เซอร์เนื่องจากหยุดการทำงานของ parser ในการแสดงผลหน้าเว็บ parser ได้รับข้อความว่าเอกสารกำลังถูกแก้ไข ดังนั้นมันจะถูกบล็อกจนกว่า JS จะเสร็จสิ้นกระบวนการ ในขณะนี้โปรแกรมแยกวิเคราะห์จะทำงานต่อ

ประสิทธิภาพ

ผลที่ใหญ่ที่สุดของการใช้วิธีการดังกล่าวคือประสิทธิภาพลดลง เบราว์เซอร์จะใช้เวลาโหลดเนื้อหาของหน้าเว็บนานขึ้น ปฏิกิริยาที่ไม่พึงประสงค์ต่อความเร็วในการโหลดขึ้นอยู่กับสิ่งที่ถูกเขียนไปยังเอกสาร คุณจะไม่เห็นความแตกต่างมากนักถ้าคุณเพิ่ม<p>แท็กลงใน DOM แทนที่จะส่งผ่านการอ้างอิงไปยังไลบรารี JavaScript 50 รายการ (สิ่งที่ฉันเห็นในโค้ดการทำงานและทำให้เกิดความล่าช้า 11 วินาที) แน่นอนขึ้นอยู่กับฮาร์ดแวร์ของคุณ)

สรุปก็คือควรหลีกเลี่ยงวิธีการนี้หากคุณสามารถช่วยได้

สำหรับข้อมูลเพิ่มเติมโปรดดูที่การแทรกแซงกับ document.write ()

จากการวิเคราะห์ทำโดยที่ Google Chrome Dev Tools' ประภาคารตรวจสอบ ,

สำหรับผู้ใช้ในการเชื่อมต่อที่ช้าสคริปต์ภายนอกที่ส่งผ่านทางไดนามิกdocument.write()สามารถหน่วงเวลาในการโหลดหน้าเว็บโดยใช้เวลานับสิบวินาที

• เหตุผลง่ายๆว่าทำไมdocument.writeการปฏิบัติที่ไม่ดีคือคุณไม่สามารถคิดสถานการณ์ที่คุณไม่สามารถหาทางเลือกที่ดีกว่าได้
• อีกเหตุผลหนึ่งคือคุณกำลังจัดการกับสตริงแทนที่จะเป็นวัตถุ (ดั้งเดิม)
• มันจะผนวกเข้ากับเอกสารเท่านั้น
• มันมีอะไรของความงามของตัวอย่างที่MVC (Model-View-Controller)รูปแบบ
• มันเป็นจำนวนมากที่มีประสิทธิภาพมากขึ้นในเนื้อหาแบบไดนามิกในปัจจุบันกับอาแจ็กซ์ + jQueryหรือangularJS

หนึ่งสามารถคิดถึง document.write () (และ .innerHTML) เป็นการประเมินสตริงซอร์สโค้ด สิ่งนี้มีประโยชน์มากสำหรับแอปพลิเคชั่นมากมาย ตัวอย่างเช่นถ้าคุณได้รับโค้ด HTML เป็นสตริงจากแหล่งข้อมูลบางอย่างมันจะสะดวกหากเพียงแค่ "ประเมิน" มัน

ในบริบทของ Lisp การจัดการ DOM จะเหมือนกับการจัดการโครงสร้างรายการเช่นสร้างรายการ (สีส้ม) โดยทำดังนี้

(cons 'orange '())

และ document.write () จะเหมือนกับการประเมินสตริงเช่นสร้างรายการโดยการประเมินสตริงซอร์สโค้ดดังนี้:

(eval-string "(cons 'orange '())")

เสียงกระเพื่อมยังมีความสามารถที่มีประโยชน์มากในการสร้างรหัสโดยใช้การจัดการรายการ (เช่นการใช้ "DOM style" เพื่อสร้าง JS parse tree) ซึ่งหมายความว่าคุณสามารถสร้างโครงสร้างรายการโดยใช้ "สไตล์ DOM" แทน "สไตล์สตริง" จากนั้นเรียกใช้รหัสนั้นเช่นนี้:

(eval '(cons 'orange '()))

หากคุณใช้เครื่องมือการเขียนโค้ดเช่น live editors แบบง่ายจะมีประโยชน์มากที่จะมีความสามารถในการประเมินสตริงอย่างรวดเร็วตัวอย่างเช่นการใช้ document.write () หรือ .innerHTML เสียงกระเพื่อมเหมาะในแง่นี้ แต่คุณสามารถทำสิ่งที่เจ๋งมากใน JS และหลายคนกำลังทำเช่นนั้นเช่นhttp://jsbin.com/

ข้อเสียของ document.write ส่วนใหญ่ขึ้นอยู่กับ 3 ปัจจัยเหล่านี้:

a) การนำไปใช้

document.write () ส่วนใหญ่จะใช้ในการเขียนเนื้อหาไปยังหน้าจอทันทีที่จำเป็นต้องใช้เนื้อหานั้น ซึ่งหมายความว่ามันเกิดขึ้นได้ทุกที่ไม่ว่าจะในไฟล์ JavaScript หรือภายในแท็กสคริปต์ภายในไฟล์ HTML หากวางแท็กสคริปต์ไว้ที่ใดก็ได้ภายในไฟล์ HTML ดังกล่าวเป็นความคิดที่ดีที่จะมีคำสั่ง document.write () ภายในบล็อกสคริปต์ที่เชื่อมโยงกับ HTML ภายในเว็บเพจ

ข) การแสดงผล

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

c) การจัดการที่เป็นไปไม่ได้

เมื่อเขียนเสร็จแล้วก็จบด้วย เราไม่สามารถย้อนกลับไปจัดการได้โดยไม่ต้องแตะที่ DOM

ฉันไม่คิดว่าการใช้ document.write เป็นแนวปฏิบัติที่ไม่ดีเลย ในคำง่าย ๆ มันก็เหมือนไฟฟ้าแรงสูงสำหรับคนที่ไม่มีประสบการณ์ หากคุณใช้วิธีที่ผิดคุณจะได้รับการปรุง มีนักพัฒนาหลายคนที่ใช้วิธีนี้และวิธีที่อันตรายอื่น ๆ อย่างน้อยหนึ่งครั้งและพวกเขาไม่เคยขุดลงไปในความล้มเหลวของพวกเขา เมื่อมีอะไรผิดพลาดพวกเขาก็แค่ประกันตัวและใช้สิ่งที่ปลอดภัยกว่า เหล่านี้คือคนที่ทำให้งบดังกล่าวเกี่ยวกับสิ่งที่ถือว่าเป็น "การปฏิบัติที่ไม่ดี"

มันเหมือนกับการฟอร์แมตฮาร์ดไดรฟ์เมื่อคุณต้องการลบไฟล์เพียงไม่กี่ไฟล์แล้วพูดว่า "การฟอร์แมตไดรฟ์นั้นเป็นวิธีปฏิบัติที่ไม่ดี"

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

เป็นการดีกว่ามากในการตั้งองค์ประกอบตัวยึดตำแหน่งบนหน้าเว็บจากนั้นจัดการกับองค์ประกอบด้านใน HTML