“ การวาง Javascript ที่ด้านล่าง” เอาชนะวัตถุประสงค์ของ document.ready หรือไม่

ฉันรู้ว่าขอแนะนำให้วาง Javascript ไว้ที่ด้านล่างของหน้า แต่ถ้าฉันใช้ jQuery มันไม่ได้มีจุดประสงค์เพื่อเรียกใช้ขณะที่ DOM กำลังโหลดหรือไม่

หากฉันมีเมนูแบบเลื่อนลงตัวอย่างเช่นเมนูแบบเลื่อนลงจะไม่ปรากฏจนกว่าจะโหลดหน้าทั้งหมดที่เหลือ ฉันพยายามพัฒนาด้วยการปรับปรุงแบบก้าวหน้าดังนั้นฉันอาจมีองค์ประกอบที่ซ่อนอยู่ใน jQuery แทนที่จะเป็น CSS (เพื่อให้ผู้ใช้ที่ไม่ใช่ผู้ใช้ JS สามารถเห็นได้)

มีสื่อที่มีความสุขหรือเปล่า?

Document.ready รอให้ DOM โหลดก่อนเรียกใช้ JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready)

แนวคิดของการวางไว้ที่ด้านล่างหมายความว่าหาก JS ของคุณมีปัญหาหรือบุคคลนั้นมีการเชื่อมต่อที่ช้าส่วนที่เหลือของหน้าจะยังคงโหลดก่อนและไม่ "หยุด"

JS ยังคงทำงานเมื่อทุกอย่างโหลดไม่ว่าจะเป็นตอนเริ่มต้นหรือเสร็จสิ้น

การวางจาวาสคริปต์ที่ด้านล่างหมายความว่าเนื้อหาของหน้าอื่น (โดยเฉพาะข้อความ) จะโหลดก่อนที่จาวาสคริปต์เพื่อให้ผู้ใช้ไม่รอให้ JS โหลดหากมีการเชื่อมต่อที่ช้า

สิ่งนี้จะไม่มีผลกับ document.ready เนื่องจากจะถูกเรียกใช้เมื่อเบราว์เซอร์ได้เตรียม DOM สำหรับหน้าเสร็จแล้ว ทั้งสองวิธีทุกอย่างยังคงต้องโหลดก่อน

สคริปต์ไม่มีการใช้งานจริงจนกว่า HTML จะโหลดเสร็จ - สคริปต์ไม่สามารถเปลี่ยน DOM จนกว่า HTML จะโหลด document.readyรอให้โหลด DOM ดังนั้นจึงไม่มีประเด็นที่จะถือสิ่งที่สำคัญเช่นสไตล์ชีต

วางสคริปต์ที่ด้านล่างของหน้า (หน้า</body>แท็ก) เพื่อรับ HTML และ CSS ของคุณให้กับผู้ใช้อย่างรวดเร็วเท่าที่จะทำได้ เบราว์เซอร์จะสามารถแสดงหน้าเว็บได้เร็วกว่ามากและจากนั้นสคริปต์สามารถโหลดได้แทนที่จะปล่อยหน้าว่างไว้ให้ผู้ใช้จ้องที่ในขณะที่รอให้สคริปต์ดาวน์โหลด

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

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

หมายเหตุ:สิ่งที่ตรงข้ามเป็นจริงสำหรับ Stylesheets - Stylesheets ใกล้กับด้านล่างของหน้าบล็อกการเรนเดอร์แบบโปรเกรสซีฟจนกว่าสไตล์ชีททั้งหมดจะถูกดาวน์โหลดและย้ายไปที่เอกสารHEADกำจัดปัญหา

มีเคล็ดลับเรียบร้อยในการโหลด javascript โดยไม่ทำให้ผู้ใช้ต้องรอคุณสามารถสร้าง<script/>องค์ประกอบโดยใช้createElement()วิธีDOM และเพิ่มลงในหน้าก่อน</body>แท็กปิด:

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

เบราว์เซอร์ไม่เริ่มดาวน์โหลดสคริปต์ js จนกว่าจะมีการเพิ่ม<script/>องค์ประกอบใหม่ลงในหน้านั้น เมื่อการดาวน์โหลดเสร็จสิ้นเบราว์เซอร์จะตีความรหัส Javascript ที่อยู่ภายใน

ใช่. หากคุณวางสคริปต์ไว้ที่ด้านล่างคุณไม่จำเป็นต้องใช้doc.ready( DOMContentLoadedเหตุการณ์) อีกต่อไปสคริปต์ของคุณจะถูกเรียกใช้งานหลังจากที่โหลดมาก่อนหน้าทั้งหมดแล้ว

ตั้งแต่สคริปต์ที่สิ้นสุดปรับปรุงประสิทธิภาพการทำงาน (HTML แยกและการโหลดของ CSS และภาพที่ไม่ได้ถูกบล็อกโดยสคริปต์) doc.readyผมขอแนะนำให้วางสคริปต์ที่ด้านล่างแทนการใช้