อะไรคือความแตกต่าง / ข้อดี / ข้อเสียของการเขียนสคริปต์ที่ด้านล่างของหน้าและการเขียนสคริปต์ใน
$(document).ready(function(){});
คำตอบ:
ในตัวของมันเองน้อยมากไม่ว่าจะด้วยวิธีใด DOM จะพร้อมให้คุณใช้งาน (ฉันกังวลเกี่ยวกับเรื่องนี้จนกว่าฉันจะอ่านสิ่งนี้จาก Google ) หากคุณใช้เคล็ดลับในตอนท้ายของหน้าโค้ดของคุณอาจถูกเรียกว่าน้อยที่สุดเร็วที่สุดเล็กน้อย แต่ก็ไม่มีอะไรสำคัญ แต่ที่สำคัญกว่านั้นคือตัวเลือกนี้เกี่ยวข้องกับตำแหน่งที่คุณเชื่อมโยง JavaScript เข้ากับหน้า
หากคุณรวมscriptแท็กของคุณไว้ในheadและพึ่งพาreadyเบราว์เซอร์จะพบscriptแท็กของคุณก่อนที่แท็กจะแสดงสิ่งใด ๆ ต่อผู้ใช้ ในเหตุการณ์ปกติเบราว์เซอร์จะหยุดชะงักและไปและดาวน์โหลดสคริปต์ของคุณเริ่มการทำงานของตัวแปล JavaScript และส่งสคริปต์ไปที่สคริปต์นั้นจากนั้นรอในขณะที่ล่ามประมวลผลสคริปต์ (จากนั้น jQuery จะดูในรูปแบบต่างๆ เพื่อให้ DOM พร้อมใช้งาน) (ฉันพูดว่า "ตามปกติของสิ่งต่างๆ" เนื่องจากเบราว์เซอร์บางตัวรองรับasyncหรือdeferแอตทริบิวต์บนscriptแท็ก)
หากคุณใส่scriptแท็กไว้ที่ส่วนท้ายของbodyองค์ประกอบเบราว์เซอร์จะไม่ดำเนินการทั้งหมดจนกว่าหน้าเว็บของคุณจะแสดงต่อผู้ใช้เป็นส่วนใหญ่ ซึ่งจะช่วยเพิ่มเวลาในการโหลดหน้าเว็บของคุณ
ดังนั้นเพื่อให้ได้เวลาโหลดที่รับรู้ได้ดีที่สุดให้วางสคริปต์ของคุณที่ด้านล่างของหน้า (นี่เป็นแนวทางจากชาว Yahooด้วย) และหากคุณกำลังจะทำเช่นนั้นก็ไม่จำเป็นต้องใช้readyแต่แน่นอนว่าคุณทำได้ถ้าคุณชอบ
มีราคาสำหรับสิ่งนั้น: คุณต้องแน่ใจว่าสิ่งที่ผู้ใช้เห็นนั้นพร้อมที่จะโต้ตอบด้วย การย้ายเวลาในการดาวน์โหลดไปที่หลังจากที่เพจแสดงเป็นส่วนใหญ่คุณจะเพิ่มความเป็นไปได้ที่ผู้ใช้จะเริ่มโต้ตอบกับเพจก่อนที่สคริปต์ของคุณจะโหลด นั่นเป็นหนึ่งในข้อโต้แย้งในการวางscriptแท็กที่ท้าย บ่อยครั้งไม่ใช่ปัญหา แต่คุณต้องดูที่เพจของคุณเพื่อดูว่าเป็นหรือไม่และหากเป็นเช่นนั้นคุณต้องการจัดการกับมันอย่างไร (คุณสามารถใส่อิลิเมนต์อินไลน์ ขนาดเล็กลงscriptในheadที่ตั้งค่าตัวจัดการเหตุการณ์ทั้งเอกสารเพื่อรับมือกับสิ่งนี้ด้วยวิธีนี้คุณจะได้รับเวลาในการโหลดที่ดีขึ้น แต่ถ้า พวกเขาพยายามทำบางอย่างเร็วเกินไปคุณสามารถบอกพวกเขาว่าหรือดีกว่าจัดคิวสิ่งที่พวกเขาต้องการทำและทำเมื่อสคริปต์ฉบับเต็มของคุณพร้อม)
หน้าของคุณจะโหลดช้าลงโดยการกระจาย$(document).ready()สคริปต์ไปทั่ว DOM (แทนที่จะเป็นทั้งหมดที่ส่วนท้าย) เนื่องจากต้องใช้ jQuery ในการโหลดแบบซิงโครนัสก่อน
$ = jQuery. ดังนั้นคุณจึงไม่สามารถใช้$ในสคริปต์ของคุณได้โดยไม่ต้องโหลด jQuery ก่อน วิธีนี้บังคับให้คุณโหลด jQuery ใกล้กับจุดเริ่มต้นของหน้าซึ่งจะหยุดการโหลดหน้าจนกว่า jQuery จะดาวน์โหลดเสร็จสมบูรณ์
คุณไม่สามารถasyncโหลด jQuery ได้เนื่องจากในหลาย ๆ กรณี$(document).ready()สคริปต์ของคุณจะพยายามดำเนินการก่อนที่ jQuery จะโหลดแบบ async อย่างสมบูรณ์และทำให้เกิดข้อผิดพลาดเนื่องจาก$ยังไม่ได้กำหนดอีกครั้ง
ที่ถูกกล่าวว่ามีวิธีการหลอกระบบ โดยพื้นฐานแล้วการตั้งค่า$เท่ากับฟังก์ชันที่ผลัก$(document).ready()ฟังก์ชันไปยังคิว / อาร์เรย์ จากนั้นที่ด้านล่างของหน้าให้โหลด jQuery จากนั้นวนซ้ำตามคิวและดำเนินการทีละ$(document).ready()รายการ สิ่งนี้ช่วยให้คุณเลื่อน jQuery ไปที่ด้านล่างของหน้า แต่ยังคงใช้$ด้านบนใน DOM โดยส่วนตัวแล้วฉันยังไม่ได้ทดสอบว่ามันทำงานได้ดีเพียงใด แต่ทฤษฎีนั้นฟังดูดี แนวคิดนี้เกิดขึ้นมาระยะหนึ่งแล้ว แต่ฉันไม่ค่อยได้เห็นการนำไปใช้มากนัก แต่ดูเหมือนเป็นความคิดที่ดี:
http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax