jQuery: ทำไมต้องใช้ document.ready ถ้า JS ภายนอกที่ด้านล่างของหน้า

ฉันรวม JS ทั้งหมดของฉันเป็นไฟล์ภายนอกที่โหลดที่ด้านล่างสุดของหน้า ภายในไฟล์เหล่านี้ฉันมีวิธีการหลายอย่างที่กำหนดไว้เช่นนั้นซึ่งฉันเรียกจากเหตุการณ์พร้อม:

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

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

คำถามที่ดี

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

ฉันสมมติว่าคุณกำลังอ้างถึง DOM ในฟังก์ชันเหล่านั้นที่คุณเรียกใช้ในสคริปต์ของคุณทันที (อะไรก็ได้ง่ายๆอย่างdocumentหรือdocument.getElementById) ฉันยังสมมติว่าคุณถามเฉพาะเกี่ยวกับไฟล์ [DOM-referencing] เหล่านี้ IOW สคริปต์ไลบรารีหรือสคริปต์ที่ต้องวางโค้ดอ้างอิง DOM ของคุณ (เช่น jQuery) ไว้ก่อนหน้านี้ในเพจ

เพื่อตอบคำถามของคุณ : หากคุณรวมสคริปต์อ้างอิง DOM ไว้ที่ด้านล่างของหน้าไม่คุณไม่จำเป็นต้อง$(document).readyใช้

คำอธิบาย : หากปราศจากความช่วยเหลือของ"onload"การใช้งานที่เกี่ยวข้องเช่น$(document).readyหลักทั่วไปคือ: โค้ดใด ๆ ที่โต้ตอบกับองค์ประกอบ DOM ภายในเพจควรวาง / รวมไว้ในหน้ามากกว่าองค์ประกอบที่อ้างอิง </body>สิ่งที่ง่ายที่สุดที่จะทำคือการวางรหัสว่าก่อนที่จะปิด ดูที่นี่และที่นี่ นอกจากนี้ยังทำงานรอบหวั่น IE ของ"การดำเนินการยกเลิกข้อผิดพลาด"

ต้องบอกว่าสิ่งนี้ไม่ทำให้การใช้งาน$(document).readyไฟล์. การอ้างถึงออบเจ็กต์ก่อนที่จะโหลดเป็น [หนึ่งใน] ข้อผิดพลาดที่พบบ่อยที่สุดที่เกิดขึ้นเมื่อเริ่มต้นใน DOM JavaScript (เห็นหลายครั้งเกินกว่าจะนับได้) เป็นวิธีแก้ปัญหาของ jQuery และคุณไม่จำเป็นต้องคิดว่าจะรวมสคริปต์นี้ไว้ที่ใดเมื่อเทียบกับองค์ประกอบ DOM ที่อ้างอิง นี่เป็นชัยชนะที่ยิ่งใหญ่สำหรับนักพัฒนา เป็นเพียงสิ่งเดียวที่พวกเขาต้องนึกถึง

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

สุดท้ายก็เคยเป็น "การปฏิบัติที่ดีที่สุด" ที่จะติดขัดรหัส DOM อ้างอิงทั้งหมดลงwindow.onloadแต่จะได้รับการบดบังด้วย$(document).readyการใช้งานสำหรับเหตุผลเอกสารดี

ทั้งหมดนี้$(document).readyรวมเป็นวิธีแก้ปัญหาที่เหนือกว่าใช้งานได้จริงและทั่วไปสำหรับปัญหาการอ้างถึงองค์ประกอบ DOM เร็วเกินไป