ฉันเพิ่งอ่านรายการวิธีปฏิบัติที่ดีที่สุดของ Yahoo เพื่อเร่งความเร็วเว็บไซต์ของคุณ พวกเขาแนะนำให้ใส่ JavaScript ที่ด้านล่างของโค้ด HTML เมื่อเราทำได้
แต่ที่ไหนกันแน่และเมื่อไหร่?
เราควรใส่ก่อนปิด</html>หรือหลัง? และเหนือสิ่งอื่นใดเมื่อเราควรใส่ไว้ใน<head>ส่วนนี้?
คำตอบ:
มีความเป็นไปได้สองประการสำหรับสคริปต์ที่ไม่สร้างความรำคาญอย่างแท้จริง:
</body></html>)อันที่สองสามารถทำงานได้เร็วขึ้นเนื่องจากการวิจัยของ Yahoo ดั้งเดิมแสดงให้เห็นว่าเบราว์เซอร์บางตัวพยายามโหลดไฟล์สคริปต์เมื่อพวกเขากดแท็กสคริปต์ดังนั้นจึงไม่โหลดส่วนที่เหลือของหน้าจนกว่าจะเสร็จสิ้น อย่างไรก็ตามหากสคริปต์ของคุณมีส่วน 'พร้อม' ซึ่งต้องดำเนินการทันทีที่ DOM พร้อมคุณอาจต้องมีไว้ในหัว ปัญหาอีกประการหนึ่งคือการจัดวาง - หากสคริปต์ของคุณกำลังจะเปลี่ยนเค้าโครงหน้าที่คุณต้องการให้โหลดโดยเร็วที่สุดเพื่อให้หน้าของคุณไม่ต้องใช้เวลานานในการวาดใหม่ต่อหน้าผู้ใช้ของคุณ
หากไซต์สคริปต์ภายนอกอยู่ในโดเมนอื่น (เช่นวิดเจ็ตภายนอก) อาจคุ้มค่าที่จะวางไว้ที่ด้านล่างเพื่อหลีกเลี่ยงการโหลดหน้าเว็บล่าช้า
และสำหรับปัญหาด้านประสิทธิภาพใด ๆ ให้ทำเกณฑ์มาตรฐานของคุณเองสิ่งที่อาจเป็นจริงในครั้งเดียวเมื่อการศึกษาเสร็จสิ้นอาจเปลี่ยนแปลงได้เมื่อตั้งค่าในเครื่องของคุณเองหรือเปลี่ยนแปลงเบราว์เซอร์
ไม่เคยขาดและแห้ง - Yahoo แนะนำให้วางสคริปต์ไว้หน้า</body>แท็กปิดซึ่งจะสร้างภาพลวงตาว่าหน้าเว็บโหลดเร็วขึ้นบนแคชว่าง (เนื่องจากสคริปต์จะไม่บล็อกการดาวน์โหลดส่วนที่เหลือของเอกสาร) อย่างไรก็ตามหากคุณมีโค้ดบางโค้ดที่ต้องการเรียกใช้ในการโหลดเพจโค้ดจะเริ่มดำเนินการหลังจากโหลดทั้งเพจแล้วเท่านั้น หากคุณใส่สคริปต์ใน<head>แท็กสคริปต์จะเริ่มดำเนินการก่อนดังนั้นในแคชที่เตรียมไว้แล้วหน้าเว็บจะโหลดได้เร็วขึ้น
นอกจากนี้สิทธิ์ในการวางสคริปต์ที่ด้านล่างของหน้าก็ไม่สามารถใช้ได้เสมอไป หากคุณต้องการรวมสคริปต์แบบอินไลน์ในมุมมองของคุณที่ขึ้นอยู่กับไลบรารีหรือโค้ด JavaScript อื่น ๆ ที่โหลดมาก่อนคุณต้องโหลดการอ้างอิงเหล่านั้นใน<head>แท็ก
คำแนะนำทั้งหมดของ Yahoo นั้นน่าสนใจ แต่ใช้ไม่ได้เสมอไปและควรพิจารณาเป็นกรณี ๆ ไป
<script>แท็กแบบอินไลน์ไม่ได้หมายความถึงจาวาสคริปต์ที่น่ารำคาญ
<script>แท็กแยกจากมาร์กอัปและสามารถใช้กับโค้ดที่ปรับปรุงอินเทอร์เฟซได้ แต่ไม่จำเป็นต้องใช้ ดังนั้นจึงไม่มีสิ่งใดมารบกวน<script>แท็กแบบอินไลน์
<script>แท็กเพื่อเข้ารหัสค่าเหล่านั้นให้เป็นตัวแปรจาวาสคริปต์เพื่อใช้กับ การแก้ไขแบบอินไลน์หรือพฤติกรรมอื่น ๆ ที่คล้ายคลึงกัน
อย่างที่คนอื่นบอกให้วางไว้หน้าแท็กhtml เนื้อหา ปิด
เมื่อวันก่อนเราได้รับโทรศัพท์จำนวนมากจากลูกค้าที่บ่นว่าไซต์ของพวกเขาทำงานช้ามาก เราไปเยี่ยมพวกเขาในพื้นที่และพบว่าพวกเขาใช้เวลา 20-30 วินาทีในการโหลดหน้าเดียว คิดว่าเป็นเซิร์ฟเวอร์ที่ทำงานได้ไม่ดีเราจึงเข้าสู่ระบบ - แต่เซิร์ฟเวอร์ทั้งเว็บและ sql มีกิจกรรม ~ 0%
หลังจากนั้นไม่กี่นาทีเราพบว่าไซต์ภายนอกไม่ทำงานซึ่งเรากำลังเชื่อมโยงไปยังแท็กติดตาม Javascript ซึ่งหมายความว่าเบราว์เซอร์กำลังกดแท็กสคริปต์ในส่วนหัวของไซต์และรอดาวน์โหลดไฟล์สคริปต์
ดังนั้นสำหรับบุคคลที่สาม / สคริปต์ภายนอกอย่างน้อยฉันขอแนะนำให้วางไว้เป็นสิ่งสุดท้ายในหน้า จากนั้นหากไม่สามารถใช้งานได้เบราว์เซอร์จะโหลดหน้าเว็บจนถึงจุดนั้นเป็นอย่างน้อย - และผู้ใช้จะลืมมันไป
สรุปตามคำแนะนำข้างต้น:
</body>แท็ก</body>เว้นแต่คุณจะมีเหตุผลในการวางสคริปต์ไว้ในส่วนหัวหากคุณต้องการปรับตำแหน่งของสคริปต์ของคุณ YSlow เป็นเครื่องมือที่ยอดเยี่ยมในการเพิ่มรสชาติให้กับคุณหากจะปรับปรุงหรือส่งผลเสียต่อประสิทธิภาพ การวางจาวาสคริปต์ในตำแหน่งเอกสารบางตำแหน่งสามารถฆ่าเวลาในการโหลดหน้าเว็บได้จริงๆ
ไม่ควรจะเป็นหลังจาก</html>นั้นจะไม่ถูกต้อง ตำแหน่งที่ดีที่สุดในการวางสคริปต์คือหน้าไฟล์</body>
โดยพื้นฐานแล้วเป็นเพราะเบราว์เซอร์ส่วนใหญ่หยุดการแสดงผลหน้าในขณะที่พวกเขาประเมินสคริปต์ที่คุณระบุ ดังนั้นจึงเป็นเรื่องปกติที่จะใส่รหัสที่ไม่ปิดกั้นที่ใดก็ได้ในหน้า (ฉันคิดถึงสิ่งที่แนบฟังก์ชันเข้ากับonLoadเหตุการณ์เป็นหลักเนื่องจากการเชื่อมโยงเหตุการณ์นั้นเร็วมากจนเป็นอิสระอย่างมีประสิทธิภาพ) นักฆ่าตัวยงที่นี่คือจุดเริ่มต้นของหน้าโดยมีสคริปต์เซิร์ฟเวอร์โฆษณาบางตัวซึ่งสามารถป้องกันไม่ให้หน้าเว็บโหลดก่อนที่โฆษณาจะดาวน์โหลดทั้งหมดทำให้เวลาในการโหลดหน้าเว็บของคุณเป็นบอลลูน
หากคุณวางไว้ที่ด้านล่างมันจะโหลดครั้งสุดท้ายดังนั้นจึงเร่งความเร็วที่ผู้ใช้สามารถดูหน้าเว็บได้ จำเป็นต้องอยู่ก่อนขั้นสุดท้าย</html>แม้ว่ามิฉะนั้นจะไม่เป็นส่วนหนึ่งของ DOM
หากต้องการรหัสทันทีให้ใส่ไว้ในหัว
ที่ดีที่สุดคือวางสิ่งต่างๆเช่นวิดเจ็ตบล็อกไว้ที่ด้านล่างเพื่อที่ว่าหากไม่โหลดก็จะไม่ส่งผลต่อการใช้งานของหน้า