หนังสือ / บทความเกี่ยวกับจาวาสคริปต์และการพัฒนาเว็บส่วนใหญ่บอกว่าคุณต้องใส่ CSS ในแท็ก head และ javascript ที่ด้านล่างของหน้า
แต่เมื่อฉันเปิดแหล่ง html ของเว็บไซต์ที่มีชื่อเสียงเช่น stackoverflow นี้ฉันพบว่าพวกเขาใส่ไฟล์ js ไว้ใน head tag
ข้อดีข้อเสียของทั้งสองวิธีคืออะไรและควรใช้เมื่อใด
พบคำถามอื่นสำหรับปัญหาเดียวกัน: ฉันจะประกาศไฟล์ JavaScript ที่ใช้ในหน้าของฉันได้ที่ไหน? ใน <head> </head> หรือใกล้ </body>?
คำตอบ:
จากแนวทางปฏิบัติที่ดีที่สุดของ Yahoo ในการเร่งความเร็วเว็บไซต์ของคุณ :
ปัญหาที่เกิดจากสคริปต์คือบล็อกการดาวน์โหลดแบบขนาน ข้อกำหนด HTTP / 1.1 แนะนำว่าเบราว์เซอร์ดาวน์โหลดไม่เกินสององค์ประกอบพร้อมกันต่อชื่อโฮสต์ หากคุณให้บริการรูปภาพของคุณจากชื่อโฮสต์หลายชื่อคุณสามารถดาวน์โหลดได้มากกว่าสองรายการพร้อมกัน อย่างไรก็ตามในขณะที่กำลังดาวน์โหลดสคริปต์เบราว์เซอร์จะไม่เริ่มการดาวน์โหลดอื่น ๆ แม้ในชื่อโฮสต์ที่ต่างกัน
ในบางสถานการณ์การย้ายสคริปต์ไปที่ด้านล่างไม่ใช่เรื่องง่าย ตัวอย่างเช่นหากสคริปต์ใช้ document.write เพื่อแทรกส่วนหนึ่งของเนื้อหาของเพจจะไม่สามารถย้ายไปต่ำกว่าในเพจได้ นอกจากนี้ยังอาจมีปัญหาในการกำหนดขอบเขต ในหลาย ๆ กรณีมีวิธีแก้ปัญหาสถานการณ์เหล่านี้
ข้อเสนอแนะทางเลือกที่มักเกิดขึ้นคือการใช้สคริปต์รอการตัดบัญชี แอตทริบิวต์ DEFER ระบุว่าสคริปต์ไม่มี document.write และเป็นเบาะแสสำหรับเบราว์เซอร์ที่สามารถแสดงผลต่อไปได้ ขออภัย Firefox ไม่สนับสนุนแอตทริบิวต์ DEFER ใน Internet Explorer สคริปต์อาจถูกเลื่อนออกไป แต่ไม่มากเท่าที่ต้องการ หากสคริปต์สามารถเลื่อนออกไปได้ก็สามารถย้ายไปที่ด้านล่างของหน้าได้ ซึ่งจะทำให้หน้าเว็บของคุณโหลดเร็วขึ้น
ดังนั้นโดยทั่วไปจึงนิยมวางไว้ด้านล่าง แต่ก็เป็นไปไม่ได้เสมอและมันมักจะไม่ได้ทำให้ที่แตกต่างกันมากอยู่แล้ว
อย่างที่คนอื่น ๆ พูดกันเมื่อคุณใส่ javascript ไว้ในหัวมันจะทำให้การแสดงผลของหน้าล่าช้าออกไปจนกว่าจะโหลดสคริปต์เสร็จซึ่งหมายความว่าหน้าเว็บอาจใช้เวลาโหลดนานขึ้นโดยเฉพาะอย่างยิ่งหากคุณกำลังดาวน์โหลดไฟล์สคริปต์ขนาดใหญ่
หากคุณย้ายแท็กสคริปต์ของคุณไปที่ส่วนท้ายของหน้าคุณจะต้องแน่ใจว่าเบราว์เซอร์ดาวน์โหลดรูปภาพและสไตล์ชีตก่อนแท็กสคริปต์และหน้ามีแนวโน้มที่จะแสดงผลก่อนที่สคริปต์จะเริ่มทำงาน นอกจากนี้ยังหมายความว่าหากคุณขึ้นอยู่กับฟังก์ชันการทำงานบางอย่างจากสคริปต์ของคุณสิ่งนี้จะไม่สามารถใช้งานได้จนกว่าผู้ใช้จะมองเห็นเพจได้เล็กน้อย
หากคุณกำลังเพิ่มสไตล์หรือองค์ประกอบ (ฯลฯ การสลับฟิลด์ข้อความด้วยโปรแกรมแก้ไขที่สมบูรณ์ยิ่งขึ้นบางรูปแบบ) ผู้ใช้จะมองเห็นได้ว่ากะพริบ
หากคุณกำลังเพิ่มเหตุการณ์การคลิกลงในองค์ประกอบพวกเขาจะไม่สามารถคลิกได้จนกว่าจะมองเห็นองค์ประกอบนั้นได้เล็กน้อย
บางครั้งปัญหาเหล่านี้คุณต้องใส่สคริปต์ของคุณไว้ในหัวบางครั้งคุณจะสบายดีโดยติดไว้ที่ด้านล่าง
IMHO (เทียบกับ YSlow และคนฉลาด ๆ มากมาย) คุณควรเก็บสคริปต์ของคุณไว้ในแท็กหัวและเพียงแค่พึ่งพาพวกเขาในการแคชเกือบตลอดเวลา
โดยทั่วไปคุณควรวางการอ้างอิงสคริปต์ที่ด้านล่างของหน้าของคุณ สคริปต์ไม่เพียง แต่ต้องดาวน์โหลดเท่านั้น แต่ยังต้องได้รับการประเมินและดำเนินการก่อนที่จะปล่อยบล็อกและเพจจะดำเนินการตามขั้นตอนการแสดงผล สิ่งต่างๆเช่น Modernizr ควรอยู่ในอันดับต้น ๆ เนื่องจากมีการตรวจจับคุณลักษณะบางอย่างเช่นเดียวกับ HTML5 shims ที่คุณอาจต้องการ
อีกเหตุผลหนึ่งที่คุณต้องการวางสคริปต์ไว้ที่ด้านล่างของหน้าคือ Single Points of Failure หรือ SPOFs นี่คือจุดที่การเรียกสคริปต์หมดเวลาหรือด้วยเหตุผลอื่นบล็อกการเรียกใช้เพจ สิ่งนี้สามารถเกิดขึ้นได้มากมายกับไลบรารีโฆษณาของบุคคลที่สามเป็นต้น
ใช่คุณอาจต้องคิดหนักขึ้นเล็กน้อยเกี่ยวกับวิธีการออกแบบแอปพลิเคชันของคุณ แต่ฉันพบว่ามันกลายเป็นธรรมชาติอย่างรวดเร็วสำหรับฉัน ฉันได้สร้างเว็บแอปหลายร้อยรายการในช่วง 4 ปีที่ผ่านมาโดยมีสคริปต์ที่ด้านล่างและสามารถบอกความแตกต่างได้ ฉันอาจจะเป็น 500 มิลลิวินาทีมันอาจจะเป็น 5,000 มิลลิวินาที แต่มันก็สำคัญทั้งหมด
ขึ้นอยู่กับเว็บไซต์ของคุณจริงๆ หากคุณกำลังเข้าถึงและเรียกใช้ฟังก์ชัน JavaScript ภายในเนื้อหาจะต้องอ้างอิงในส่วนหัวเพื่อให้โหลดได้ ถ้าคุณจะเรียกใช้ JavaScript ก็ต่อเมื่อโหลดเอกสารทั้งหมดแล้วคุณควรใส่ JavaScript ไว้ที่ส่วนท้ายของเนื้อหา การใส่ไฟล์. JS ในตอนท้ายคุณจะโหลดทั้งหน้าจากนั้นดึงไฟล์. JS ด้วยวิธีนี้ผู้ใช้จะสามารถดูเพจได้อย่างรวดเร็วและเมื่อเริ่มคุ้นเคยกับเพจไฟล์. JS ได้ถูกดาวน์โหลดไปแล้ว
จาวาสคริปต์ใด ๆ ในส่วนหัวจะได้รับการประเมินก่อนที่จะโหลดหน้าเว็บซึ่งหมายความว่าหน้าจะใช้เวลาโหลดนานขึ้น มันยากกว่าเล็กน้อยที่จะทำให้เหตุการณ์ทำงานได้อย่างถูกต้องหากจาวาสคริปต์ทั้งหมดอยู่ในตอนท้าย แต่ jQuery สามารถแก้ปัญหานี้ให้คุณได้