ที่ที่ดีที่สุดในการใส่รหัส Jquery (หรือแยกไฟล์ Jquery) อยู่ที่ไหน หน้าเว็บจะโหลดเร็วขึ้นหรือไม่ถ้าฉันวางไว้ในท้ายกระดาษ?
คำตอบ:
สคริปต์ทั้งหมดควรโหลดครั้งสุดท้าย
ในทุกกรณีมันเป็นการดีที่สุดที่จะวางการอ้างอิงสคริปต์ทั้งหมดของคุณไว้ที่ส่วนท้ายของหน้าก่อนหน้า</body>นี้
หากคุณไม่สามารถทำได้เนื่องจากปัญหาในการสร้างเทมเพลตและอะไรก็ตามให้ตกแต่งแท็กสคริปต์ของคุณด้วยแอdeferททริบิวต์เพื่อให้เบราว์เซอร์รู้ที่จะดาวน์โหลดสคริปต์ของคุณหลังจากดาวน์โหลด HTML แล้ว:
<script src="my.js" type="text/javascript" defer="defer"></script>กรณีขอบ
มีบางกรณีขอบมี แต่ที่คุณอาจพบริบหรี่หน้าหรือวัตถุอื่น ๆ ในระหว่างการโหลดหน้าเว็บซึ่งสามารถจะแก้ไขได้โดยเพียงแค่วางอ้างอิงสคริปต์ jQuery คุณใน<head>แท็กโดยไม่ต้องdeferแอตทริบิวต์ กรณีเหล่านี้รวมถึง jQuery UI และส่วนเสริมอื่น ๆ เช่น jCarousel หรือ Treeview ซึ่งแก้ไข DOM เป็นส่วนหนึ่งของฟังก์ชันการทำงาน
คำเตือนเพิ่มเติม
มีบางไลบรารีที่ต้องโหลดก่อนหน้า DOM หรือ CSS เช่น polyfills Modernizr เป็นหนึ่งในห้องสมุดดังกล่าวว่าจะต้องอยู่ในแท็กหัว
<head>ทำงานได้ดีขึ้นหากพวกเขากำลังอ้างถึงใน หากมาร์กอัปของคุณขึ้นอยู่กับปลั๊กอิน jQuery ที่คัดแยกเนื้อหาสำหรับคุณมันไม่มีเหตุผลที่จะวางการอ้างอิงปลั๊กอินที่ด้านล่างของหน้าเว็บในขณะที่คุณจะได้รับมาร์กอัปขี้ขลาดในหน้าเว็บของคุณจนกว่าปลั๊กอินจะโหลด มีการตั้งใจทำตามกฎจนกว่าพวกเขาจะไม่ทำงานอีกต่อไปกฎข้อใดควรถูกทำลาย
ปัญหาที่เกิดจากสคริปต์คือบล็อกการดาวน์โหลดแบบขนาน ข้อกำหนด HTTP / 1.1 แนะนำว่าเบราว์เซอร์ดาวน์โหลดไม่เกินสององค์ประกอบในแบบคู่ขนานต่อชื่อโฮสต์ หากคุณแสดงรูปภาพจากชื่อโฮสต์หลายชื่อคุณสามารถดาวน์โหลดมากกว่าสองครั้งเพื่อให้เกิดขนาน ในขณะที่สคริปต์กำลังดาวน์โหลดอย่างไรก็ตามเบราว์เซอร์จะไม่เริ่มการดาวน์โหลดอื่น ๆ แม้แต่ในชื่อโฮสต์ที่ต่างกัน ในบางสถานการณ์การย้ายสคริปต์ไปที่ด้านล่างไม่ใช่เรื่องง่าย ตัวอย่างเช่นหากสคริปต์ใช้ document.write เพื่อแทรกเนื้อหาบางส่วนของหน้าเว็บจะไม่สามารถย้ายลงในหน้านั้นได้ อาจมีปัญหาการกำหนดขอบเขต ในหลายกรณีมีวิธีแก้ไขสถานการณ์เหล่านี้
คำแนะนำอื่นที่มักเกิดขึ้นคือการใช้สคริปต์ที่เลื่อนออกไป แอตทริบิวต์ DEFER ระบุว่าสคริปต์ไม่มี document.write และเป็นเงื่อนงำสำหรับเบราว์เซอร์ที่พวกเขาสามารถแสดงผลต่อไป น่าเสียดายที่ Firefox ไม่สนับสนุนแอตทริบิวต์ DEFER ใน Internet Explorer สคริปต์อาจถูกเลื่อนออกไป แต่ไม่มากเท่าที่ต้องการ หากสคริปต์สามารถเลื่อนออกไปก็สามารถย้ายไปที่ด้านล่างของหน้า นั่นจะทำให้หน้าเว็บของคุณโหลดเร็วขึ้น
แก้ไข: Firefox รองรับแอตทริบิวต์ DEFER ตั้งแต่รุ่น 3.6
แหล่งที่มา:
โหลด jQuery เท่านั้นเองที่ส่วนหัวผ่าน CDN แน่นอน
ทำไม? ในบางสถานการณ์คุณอาจรวมเทมเพลตบางส่วน (เช่นตัวอย่างข้อมูลการลงชื่อเข้าใช้ ajax) ด้วยโค้ดพึ่งพา jQuery หากมีการโหลด jQuery ที่ด้านล่างของหน้าคุณจะได้รับข้อผิดพลาด "$ ไม่ได้กำหนด" ดีมาก
มีวิธีที่จะแก้ปัญหานี้แน่นอน (เช่นไม่ฝัง JS ใด ๆ และผนวกกับภาระที่ด้านล่าง js กำ) แต่ทำไมสูญเสียเสรีภาพในการ js โหลดอย่างเฉื่อยชาที่ความสามารถในการวาง jQuery รหัสขึ้นอยู่ทุกที่ที่คุณโปรด ? เอ็นจิ้น Javascript ไม่สนใจว่าโค้ดอยู่ใน DOM ตราบใดที่การพึ่งพา (เช่นโหลด jQuery) พอใจ
สำหรับไฟล์ js ทั่วไป / ที่ใช้ร่วมกันของคุณใช่ให้วางไว้ก่อนหน้า</body>นี้ แต่สำหรับข้อยกเว้นที่ทำให้การบำรุงรักษาแอปพลิเคชันควรใช้สติปัญญาเพื่อติดตั้งข้อมูลโค้ดที่ขึ้นกับ jQuery หรือการอ้างอิงไฟล์ที่นั่นใน html นั้น
ไม่มีประสิทธิภาพในการโหลด jquery ที่ส่วนหัว เบราว์เซอร์ใดบนโลกที่ไม่มีไฟล์ jQuery CDN ในแคช
กังวลใจมากเกี่ยวกับสิ่งใดติด jQuery ในหัวและปล่อยให้ js อิสระของคุณครอง
2%กล่าวว่าครึ่งหนึ่งจะออกไปก่อนที่หน้าโหลดเป็นครั้งแรก วิธีนี้ทำให้คุณสูญเสีย1%ผู้เข้าชม แต่อาจช่วยคุณประหยัดเวลาและปัญหาในการพัฒนาตัวเอง ดูว่านี้ทำให้รู้สึกกับรูปแบบธุรกิจของคุณ ...
Nimbuzให้คำอธิบายที่ดีมากเกี่ยวกับปัญหาที่เกี่ยวข้อง แต่ฉันคิดว่าคำตอบสุดท้ายขึ้นอยู่กับหน้าของคุณ: สิ่งที่สำคัญกว่าสำหรับผู้ใช้ที่จะมีเร็ว - สคริปต์หรือภาพ?
มีบางหน้าที่ไม่สมเหตุสมผลหากไม่มีภาพ แต่มีเพียงสคริปต์เล็กน้อยและไม่จำเป็น ในกรณีนี้ควรใส่สคริปต์ที่ด้านล่างเพื่อให้ผู้ใช้สามารถเห็นภาพได้เร็วขึ้นและเริ่มทำความเข้าใจกับหน้าเว็บ หน้าอื่น ๆ พึ่งพาการใช้สคริปต์ในการทำงาน ในกรณีนี้ควรมีหน้าทำงานที่ไม่มีภาพมากกว่าหน้าที่ไม่ทำงานพร้อมรูปภาพดังนั้นควรใส่สคริปต์ไว้ที่ด้านบนสุด
อีกสิ่งที่ควรพิจารณาคือสคริปต์มักจะมีขนาดเล็กกว่ารูปภาพ แน่นอนว่านี่เป็นลักษณะทั่วไปและคุณต้องดูว่ามันใช้กับหน้าเว็บของคุณหรือไม่ ถ้าเป็นเช่นนั้นสำหรับฉันแล้วมันเป็นข้อโต้แย้งที่ให้พวกเขาเป็นกฎง่ายๆ (นั่นคือถ้าไม่มีเหตุผลที่ดีที่จะทำอย่างอื่น) เพราะพวกเขาจะไม่หน่วงเวลาภาพเท่าที่ภาพจะทำให้สคริปต์ล่าช้า ในที่สุดมันเป็นเรื่องง่ายมากที่จะมีสคริปต์ที่ด้านบนเพราะคุณไม่ต้องกังวลว่าจะโหลดพวกเขาเมื่อคุณต้องการใช้
โดยสรุปฉันมักจะวางสคริปต์ที่ด้านบนโดยค่าเริ่มต้นและพิจารณาเพียงว่ามันคุ้มค่าที่จะย้ายพวกเขาไปที่ด้านล่างหลังจากหน้าเสร็จสมบูรณ์ มันเป็นการเพิ่มประสิทธิภาพ - และฉันไม่ต้องการทำมันก่อนเวลาอันควร
รหัส jquery ส่วนใหญ่รันบนเอกสารที่พร้อมซึ่งจะไม่เกิดขึ้นจนกว่าจะสิ้นสุดของหน้าอย่างไรก็ตาม นอกจากนี้การแสดงผลหน้าเว็บอาจล่าช้าโดยการแยกวิเคราะห์ / การเรียกใช้ javascript ดังนั้นวิธีที่ดีที่สุดในการวางจาวาสคริปต์ทั้งหมดไว้ที่ด้านล่างของหน้า
การปฏิบัติมาตรฐานคือการวางสคริปต์ทั้งหมดของคุณไว้ที่ด้านล่างของหน้า แต่ฉันใช้ ASP.NET MVC กับปลั๊กอิน jQuery จำนวนหนึ่งและฉันพบว่ามันทำงานได้ดีขึ้นถ้าฉันวางสคริปต์ jQuery ของฉันไว้ใน<head>ส่วนของต้นแบบ หน้า.
ในกรณีของฉันมีสิ่งประดิษฐ์ที่เกิดขึ้นเมื่อโหลดหน้าเว็บหากสคริปต์อยู่ที่ด้านล่างของหน้า ฉันใช้ปลั๊กอิน jQuery TreeView และหากสคริปต์ไม่โหลดตอนต้นแผนผังจะแสดงผลโดยไม่มีคลาส CSS ที่จำเป็นซึ่งปลั๊กอินกำหนดไว้ ดังนั้นคุณจะได้รับสิ่งที่ดูตลกนี้เมื่อเพจโหลดครั้งแรกตามด้วยการเรนเดอร์ที่เหมาะสมของ TreeView ดูไม่ดีมาก การวางปลั๊กอิน jQuery ใน<head>ส่วนของหน้าต้นแบบจะช่วยขจัดปัญหานี้
@Html.Actionซึ่งเขียนผลลัพธ์ไปยังเอาต์พุตแบบไดนามิกเนื่องจากบางส่วนของฉันให้$ is undefinedความหมายฉันต้องใช้. load ('@ Url.Action') เพื่อโหลดบางส่วน แต่สิ่งนี้ให้ fouc เนื่องจากการร้องขอพิเศษ จากข้อมูลที่คุณป้อนฉันจะย้าย jQuery เหนือ RenderBody () ในหน้าหลักของฉัน
แม้ว่าเว็บไซต์เกือบทั้งหมดจะยังคงวาง Jquery และ javascript อื่น ๆ ไว้ที่ส่วนหัว: D แม้ตรวจสอบ stackoverflow.com
ฉันยังแนะนำให้คุณใส่ก่อนแท็กสิ้นสุดของร่างกาย คุณสามารถตรวจสอบเวลาในการโหลดหลังจากวางในที่ใดก็ได้ แท็กสคริปต์จะหยุดหน้าเว็บของคุณชั่วคราวเพื่อโหลดเพิ่มเติม
และหลังจากวางจาวาสคริปต์ไว้ที่ส่วนท้ายคุณอาจมีลักษณะผิดปกติของหน้าเว็บของคุณจนกว่าจะโหลดจาวาสคริปต์ดังนั้นจึงวาง css ไว้ในส่วนหัวของคุณ
ก่อนหน้า</body>นี้เป็นสถานที่ที่ดีที่สุดตามแนวทางปฏิบัติที่ดีที่สุดของYahoo Developer Network สำหรับการเพิ่มความเร็วเว็บไซต์ของคุณ ลิงค์นี้เหมาะสม
สิ่งที่ดีที่สุดที่จะทำคือการทดสอบด้วยตัวเอง
สำหรับฉัน jQuery เป็นพิเศษเล็กน้อย อาจเป็นข้อยกเว้นสำหรับบรรทัดฐาน มีสคริปต์อื่น ๆ อีกมากมายที่ต้องใช้มันดังนั้นมันค่อนข้างสำคัญที่จะต้องโหลดก่อนดังนั้นสคริปต์อื่น ๆ ที่มาในภายหลังจะทำงานได้ตามที่ต้องการ เป็นคนอื่นชี้ให้เห็นแม้หน้านี้โหลด jQuery ในส่วนหัว