ทุกวันนี้เวลาทำเว็บ คนทำเว็บจะพบว่ามีกรณีที่เราต้องเรนเดอร์ตัว HTML ขึ้นมาในฝั่งของเบราว์เซอร์เสมอๆ เช่น หน้าทวิตเตอร์ที่สามารถโหลดข้อความมาเพิ่มเติมผ่านทาง json ได้เรื่อยๆ หรือกระทั่งหน้าเพจของ Pantip.com รุ่นใหม่ที่เรนเดอร์คอมเมนต์ทั้งหมดในฝั่งเบราว์เซอร์ ในตอนนี้มาตรฐานการเรนเดอร์ในฝั่งเบราว์เซอร์ก็ถูกเสนอมาจากกูเกิลและไมโครซอฟท์แล้ว
มาตรฐาน HTML Template สร้างแท็ก template
ขึ้นใหม่ คุณสมบัติของมันคือจะไม่ถูกเรนเดอร์เลย ภาพและข้อความทั้งหมดจะไม่ถูกใช้งานใดๆ ทำให้เวลาโหลดภาพขนาดใหญ่ก็ไม่ต้องเสียแบนด์วิดท์ หากมีสคริปต์ภายในแท็กนี้ก็ไม่ต้องเสียเวลาประมวลผล แต่แท็กนี้สามารถเข้าถึงผ่านทาง DOM ปกติได้ ทำให้สามารถเข้าไปเรียกใช้ attribute ต่างๆ ได้ โดยไม่ต้องแก้ innerHTML
ที่ทั้งยุ่งยากและอาจจะมีปัญหาต่อความปลอดภัยได้ หรือบางคนอาจจะใช้ CSS เพื่อกำหนด display:none;
แทน โดยเรนเดอร์ล่วงหน้ามาจากฝั่งเซิร์ฟเวอร์ แต่ปัญหาคือหากมีรูปภาพอยู่ภายใน มันจะถูกโหลดทันทีทั้งที่ยังไม่ได้แสดงผล
มาตรฐานนี้อยู่ในสถานะ Working Draft ใน W3C และตอนนี้ยังมีเพียง Chrome เท่านั้นที่รองรับมาตรฐานนี้
ที่มา - HTML5 Rocks, W3C
Comments
ดีมากเลย ทุกวันนี้เปิด บนโทรศัพท์มือถือ มันกิน Memory มากต้องโหลดใหม่ทุกที
Texion Business Solutions
ผมว่ามันจะโหลดหนักกว่าเดิมมากกว่า
สารภาพว่าอ่านแล้วผมนึกภาพตามไม่ออกครับ T.T
เข้าไปดูตัวอย่างในที่มาประกอบน่าจะช่วยได้ครับ
lewcpe.com, @wasonliw
แปลว่า มันช่วยลดโหลดทางฝั่ง Server ลงไปได้พอสมควรเลยใช่ไหมครับ
แล้วแต่คิดครับ อาจจะใช้เพื่อลดโหลดก็ได้ แต่ผมว่าส่วนมากใช้เพื่อเรนเดอร์แบบ Twitter/Facebook/Google+ คงจะตรงการใช้งานกว่า
lewcpe.com, @wasonliw
ผมก็มาสารภาพว่าต้องอ่านหลายตลบมากครับ - -"
เอาง่ายๆ หน้าหน้าเฟสบุ๊ก ที่มันจะมีส่วนที่โหลดเพิ่มมาเรื่อยๆ ทั้งที่เราแค่เปิดหน้านั้นทิ้งไว้ ส่วนที่ไม่มีการเปลี่ยนแปลงคือส่วน template ในข่าวครับ
ไม่ใช่ครับ
สมมติเฟซบุค แต่ละ item ใน news feed มันจะมีอะไรเหมือนๆ กันใช่ไหม? เช่ร รูปโปรไฟล์ ชื่อคน กล่องคอมเมนต์ ก็จัดโครงพวกนี้ให้เสร็จ แล้วยัดลงไปเป็น template พอจะเพิ่ม item ใหม่ลงในหน้าก็แค่เรียกเทมเพลตนี้มาใช้ เป็นการให้ไม่ต้องใช้ innerHTML
+1
ลองดู screencast นี้ดูครับ http://www.youtube.com/watch?v=eJZx9c6YL8k นาทีที่ 5:07 เป็นต้นไป
รอมานานแล้ว
เจ๋ง
ดีสำหรับมือถือ เปิดคอมสมัยนี้เน็ตไวดีว่าเมื่อก่อนเยอะ
ไม่เข้าใจ ประมาณว่า ปกติเวลาเปิดเวบมันจะส่งโค็ดและแยกออกมาเป็นส่วนๆ มาให้ Browser จัดหน้าแสดงออกมา แต่ Tag ใหม่มันจะจัดหน้ามาให้เรียบร้อยแล้วรวมมาเป็นไฟล์เดียว เหมือน PDF ที่ไปเปิดที่ไหนก็จะเหมือนกัน ถูกไหมครับมันเหมือนการใช้ Function ในการเขียนโปรแกรม
ลองพยายามอธิบายกะเขาบ้าง
พยามเปรียบเปรยให้คนไม่มีความรู้ด้าน html หรือ javascript นะครับ
เปรียบเทียบกับการกรอกใบสมัครงาน
สมมุติว่าแบบเก่า ระบบการสมัครงานล้าหลังมาก ในแบบเก่า เวลามีคนมาสมัครงาน พนักงาน HR จะซักประวัติ แล้วพิมพ์ประวัติคนสมัครงาน ลง word แล้วพิมพ์ไปให้ HR Manager
ในระบบใหม่ จะมีแบบฟอร์มรับสมัครมา แล้วพนักงาน HR จะกรอกลงแบบฟอร์ม แล้วเอาไปเสนอ HR Manager (ให้สมมุติว่าพนักงาน กรอกข้อมูลให้คนสมัครก็แล้วกัน)
ประวัติผู้สมัคร = dynamic data,
แบบฟอร์ม = template ที่ว่านี่เอง,
พนักงาน HR = JavaScript,
สิ่งที่พิมพ์หรือกรอกเสร็จแล้ว = html ที่ render แล้ว,
HR Manager = ผู้ใช้งาน
ผมพยายามอ่านมาตั้งแต่เช้าแล้วแต่ผมก็งงอยู่ดี สรุปว่ามันต่างยังไงกับการที่เราทำพวก div ที่เป็น form .html ที่มี ไว้ แล้วก็ include เข้ามาเมื่อมี data ที่ต้องแสดงผล หรือมันแค่เปลี่ยน div ตัวนอกสุดเป็น template แค่นั้น ?
ผมเข้าใจว่า ถ้าแบบนั้นต้องใช้วิธีต่อ string กับ innerHTML ซึ่งจะมีปัญหาเรื่อง security ครับ
แล้วก็วิธีทำ div เป็น form ซ่อนไว้ จริงๆ แล้วมันแอบ render/loading อยู่เบื้องหลังครับ
แต่ถ้าใช้วิธี template จะไม่มีการ render ใดๆ เกิดขึ้นเลยจนกว่าจะมีการเรียกใช้งานครับ