ตกลง Javascript ควรใส่ไว้ที่ไหน ?

หลายๆ คน คงสับสน ว่า Javascript ควรใส่ไว้ตรงไหนกันแน่ ระหว่างข้างใน <head> กับก่อนปิด </body> ก่อนอื่นต้องบอกว่า ประเด็นนี้ยังคงเป็นที่ถกเถียงกันอย่างมาก เพราะแต่ละที่ก็มีข้อดีข้อเสีย แตกต่างกันไป ซึ่งผมสรุปมาให้อ่านง่ายๆ ดังนี้ครับ

กลุ่มพวกที่ให้ใส่ก่อนปิด </body> อ้างว่า

  • หากใส่ Javascript ไว้ที่ <head> จะต้องรอให้ Javascript ตัวก่อนหน้าโหลดเสร็จก่อน จึงจะโหลด Javascript ตัวต่อไปได้ แม้ว่าจะคนละ Hostname ก็ตาม ดังนั้น ควรใส่ Javascript ไว้ใน <body> เพราะจะทำให้สามารถโหลดแบบ Parallel ได้
  • การใส่ Javascript ไว้ก่อนปิด </body> ทำให้ผู้ใช้งานรู้สึกว่าหน้าเว็บแสดงผลรวดเร็วกว่า เพราะจะโหลดแต่ Text, Images, Stylesheet ก่อน จึงค่อยมาโหลด Javascript ทีหลัง
  • Web Crawler บางตัว อาจไม่อ่านเว็บทุกตัวอักษร แต่จะกำหนด Limit ตัวอักษรเอาไว้ ดังนั้น การใส่ Javascript ไว้ด้านบนมากๆ อาจทำให้ Web Crawler นั้นๆ ไม่ได้มา Index ตัว Content จริงๆ

กลุ่มพวกที่ให้ใส่ข้างใน <head> อ้างว่า

  • สิ่งที่ไม่แสดงผลออกมา ไม่ควรอยู่ใน <body> ดังนั้น Javascript ควรอยู่ใน <head>
  • หากใส่ Javascript ไว้ก่อนปิด </body> จะทำให้การพัฒนามีความยากลำบากในบางกรณี เช่น ถ้าเราใส่ jQuery ไว้ล่างสุด เราจะไม่สามารถใช้ document.ready ก่อนหน้าที่เราเรียก jQuery ได้ เป็นต้น
  • หาก Javascript โหลดทีหลัง Content อาจทำให้ User Experience เปลี่ยนไป เช่น Javascript ที่มีการเปลี่ยนแปลง Layout หรือ สีสัน หากโหลดช้ากว่า Content ผู้ใช้งานจะสัมผัสได้

จะเห็นได้ว่า แต่ละฝ่าย ต่างมีเหตุผลที่ต่างกันครับ ซึ่งข้อมูลที่ผมได้บอกไปนั้น ค่อนข้างล้าหลังพอสมควร เพราะในปัจจุบัน Web Browser ได้มีการพัฒนาไปอย่างมาก เช่น ไม่ว่า Javascript จะอยู่ใน <head> หรืออยู่ใน <body> ก็สามารถโหลดแบบ Parallel ได้เหมือนกับ CSS, Images ครับ ไม่จำเป็นต้องรอให้ Javascript ด้านบนโหลดเสร็จก่อนอีกต่อไป

หากเราต้องการให้หน้าเว็บโหลดไวขึ้น อีกวิธีหนึ่งที่นิยมทำกันก็คือ การเก็บไฟล์ Static ไว้หลายๆ Hostname ทั้งนี้เพราะว่า การโหลดผ่าน HTTP นั้น แต่ละ Web Browser จะมีการจำกัดจำนวน Persistent Connection ของแต่ละ Hostname ไว้ครับ เช่น Firefox 16.0.1 กำหนด Persistent Connection ไว้สูงสุดที่ 6 ก็หมายความว่า Firefox จะยอมโหลดข้อมูลจาก Hostname เดียวกัน ในเวลาเดียวกันไม่เกิน 6 การเชื่อมต่อครับ ดังนั้น สมมติว่าเราเรียกไฟล์ Static จาก http://static1.yourdomain.com และ http://static2.yourdomain.com โดยเรียกสลับ Hostname กันไปเรื่อยๆ ดังนี้

จากตัวอย่างนี้ Web Browser อย่าง Firefox จะโหลดทั้ง 8 ไฟล์ แบบ Parallel ได้ครับ ในทางกลับกัน หากทั้ง 8 ไฟล์มาจากโดเมนเดียวกัน 6 ไฟล์แรกจะโหลดแบบ Parallel ส่วนไฟล์ที่ 7 และ 8 จะอยู่ในสถานะ Blocking คือต้องรอ Connection ที่ 1 และ 2 ให้ว่างก่อนครับ

โดยส่วนตัวแล้ว Javascript จะวางไว้ตรงไหนนั้น ผมว่าไม่มีถูกหรือผิด เพียงแต่เราควรดูว่า เว็บของเราในหน้านั้นๆ เหมาะกับทางเลือกไหน ต้องการให้ผู้ใช้งานมองว่าโหลดเร็ว (ซึ่งจริงๆ แล้วโหลดไวเท่าเดิม) หรือต้องการความสะดวกในการพัฒนา หรือจะนำทางเลือกทั้งสองมาประยุกต์ รวมกันก็ได้ครับ

(Visited 6,418 times, 17 visits today)

4 Responses to “ตกลง Javascript ควรใส่ไว้ที่ไหน ?”

  1. Benz Multidev says:

    Thank you ครับ

  2. Apilak Cee Sangkhwan says:

    การใส่ก่อน ใส่หลัง … ขึ้นอยู่กับงานที่ JavaScript ทำครับ …

    • Siam HTML says:

      เห็นด้วยครับ เป็นอีกหลักหนึ่งที่ใช้พิจารณาว่าเราควรใส่ JS ที่ไหนครับ

  3. สงสัยครับใน บทความเรื่อง JavaScript Loader คืออะไร + สอนวิธีใช้ LABjs นั้น บอกว่า เอา script ไว้ใน head ช้าสุด เอา script ไว้ล่างสุด เร็วกว่า อย่างนี้ที่บทความนี่บอกว่าในปัจจุบัน Web Browser ได้มีการพัฒนาไปอย่างมาก เช่น ไม่ว่า Javascript จะอยู่ใน <head> หรืออยู่ใน <body> ก็สามารถโหลดแบบ Parallel ได้ ผมเลยสงสัยว่าในเมื่อเอาไว้ตรงไหนก็ทำงานแบบ Parallel ได้เหมือนกัน แต่ทำไมความเร็วยังต่างกันอะครับ

Leave a Reply