Tags:
Node Thumbnail

ทุกวันนี้เวลาทำเว็บ คนทำเว็บจะพบว่ามีกรณีที่เราต้องเรนเดอร์ตัว HTML ขึ้นมาในฝั่งของเบราว์เซอร์เสมอๆ เช่น หน้าทวิตเตอร์ที่สามารถโหลดข้อความมาเพิ่มเติมผ่านทาง json ได้เรื่อยๆ หรือกระทั่งหน้าเพจของ Pantip.com รุ่นใหม่ที่เรนเดอร์คอมเมนต์ทั้งหมดในฝั่งเบราว์เซอร์ ในตอนนี้มาตรฐานการเรนเดอร์ในฝั่งเบราว์เซอร์ก็ถูกเสนอมาจากกูเกิลและไมโครซอฟท์แล้ว

มาตรฐาน HTML Template สร้างแท็ก template ขึ้นใหม่ คุณสมบัติของมันคือจะไม่ถูกเรนเดอร์เลย ภาพและข้อความทั้งหมดจะไม่ถูกใช้งานใดๆ ทำให้เวลาโหลดภาพขนาดใหญ่ก็ไม่ต้องเสียแบนด์วิดท์ หากมีสคริปต์ภายในแท็กนี้ก็ไม่ต้องเสียเวลาประมวลผล แต่แท็กนี้สามารถเข้าถึงผ่านทาง DOM ปกติได้ ทำให้สามารถเข้าไปเรียกใช้ attribute ต่างๆ ได้ โดยไม่ต้องแก้ innerHTML ที่ทั้งยุ่งยากและอาจจะมีปัญหาต่อความปลอดภัยได้ หรือบางคนอาจจะใช้ CSS เพื่อกำหนด display:none; แทน โดยเรนเดอร์ล่วงหน้ามาจากฝั่งเซิร์ฟเวอร์ แต่ปัญหาคือหากมีรูปภาพอยู่ภายใน มันจะถูกโหลดทันทีทั้งที่ยังไม่ได้แสดงผล

มาตรฐานนี้อยู่ในสถานะ Working Draft ใน W3C และตอนนี้ยังมีเพียง Chrome เท่านั้นที่รองรับมาตรฐานนี้

ที่มา - HTML5 Rocks, W3C

Get latest news from Blognone

Comments

By: figgaro
ContributorAndroidWindows
on 27 February 2013 - 12:34 #546068
figgaro's picture

ดีมากเลย ทุกวันนี้เปิด บนโทรศัพท์มือถือ มันกิน Memory มากต้องโหลดใหม่ทุกที


Texion Business Solutions

By: zotix
ContributoriPhoneAndroidWindows
on 27 February 2013 - 18:24 #546205 Reply to:546068

ผมว่ามันจะโหลดหนักกว่าเดิมมากกว่า

By: mp3wizard
iPhone
on 27 February 2013 - 12:50 #546075

สารภาพว่าอ่านแล้วผมนึกภาพตามไม่ออกครับ T.T

By: lew
FounderJusci's WriterMEconomicsAndroid
on 27 February 2013 - 13:10 #546083 Reply to:546075
lew's picture

เข้าไปดูตัวอย่างในที่มาประกอบน่าจะช่วยได้ครับ


lewcpe.com, @wasonliw

By: nowingnoid
iPhoneAndroidUbuntu
on 27 February 2013 - 13:49 #546097 Reply to:546083
nowingnoid's picture

แปลว่า มันช่วยลดโหลดทางฝั่ง Server ลงไปได้พอสมควรเลยใช่ไหมครับ

By: lew
FounderJusci's WriterMEconomicsAndroid
on 27 February 2013 - 16:38 #546169 Reply to:546097
lew's picture

แล้วแต่คิดครับ อาจจะใช้เพื่อลดโหลดก็ได้ แต่ผมว่าส่วนมากใช้เพื่อเรนเดอร์แบบ Twitter/Facebook/Google+ คงจะตรงการใช้งานกว่า


lewcpe.com, @wasonliw

By: hisoft
ContributorWindows PhoneWindows
on 27 February 2013 - 13:48 #546096 Reply to:546075
hisoft's picture

ผมก็มาสารภาพว่าต้องอ่านหลายตลบมากครับ - -"

By: ComSci-MFU
Windows PhoneAndroidWindows
on 27 February 2013 - 13:49 #546098 Reply to:546075
ComSci-MFU's picture

เอาง่ายๆ หน้าหน้าเฟสบุ๊ก ที่มันจะมีส่วนที่โหลดเพิ่มมาเรื่อยๆ ทั้งที่เราแค่เปิดหน้านั้นทิ้งไว้ ส่วนที่ไม่มีการเปลี่ยนแปลงคือส่วน template ในข่าวครับ

By: nat3738
ContributorAndroidRed HatUbuntu
on 27 February 2013 - 14:48 #546124 Reply to:546098

ไม่ใช่ครับ

สมมติเฟซบุค แต่ละ item ใน news feed มันจะมีอะไรเหมือนๆ กันใช่ไหม? เช่ร รูปโปรไฟล์ ชื่อคน กล่องคอมเมนต์ ก็จัดโครงพวกนี้ให้เสร็จ แล้วยัดลงไปเป็น template พอจะเพิ่ม item ใหม่ลงในหน้าก็แค่เรียกเทมเพลตนี้มาใช้ เป็นการให้ไม่ต้องใช้ innerHTML

By: olan16
AndroidWindowsIn Love
on 28 February 2013 - 01:45 #546343 Reply to:546124
olan16's picture

+1

By: lucksad
iPhoneRed Hat
on 27 February 2013 - 18:37 #546210 Reply to:546075

ลองดู screencast นี้ดูครับ http://www.youtube.com/watch?v=eJZx9c6YL8k นาทีที่ 5:07 เป็นต้นไป

By: akira on 27 February 2013 - 14:18 #546110

รอมานานแล้ว

By: cloverink
iPhoneAndroidUbuntuWindows
on 27 February 2013 - 14:57 #546126
cloverink's picture

เจ๋ง

By: tonhady
Red HatUbuntu
on 27 February 2013 - 16:50 #546174
tonhady's picture

ดีสำหรับมือถือ เปิดคอมสมัยนี้เน็ตไวดีว่าเมื่อก่อนเยอะ

By: zotix
ContributoriPhoneAndroidWindows
on 27 February 2013 - 18:15 #546198

ไม่เข้าใจ ประมาณว่า ปกติเวลาเปิดเวบมันจะส่งโค็ดและแยกออกมาเป็นส่วนๆ มาให้ Browser จัดหน้าแสดงออกมา แต่ Tag ใหม่มันจะจัดหน้ามาให้เรียบร้อยแล้วรวมมาเป็นไฟล์เดียว เหมือน PDF ที่ไปเปิดที่ไหนก็จะเหมือนกัน ถูกไหมครับ

มันเหมือนการใช้ Function ในการเขียนโปรแกรม

By: blackpigeon
iPhoneWindows PhoneAndroidBlackberry
on 27 February 2013 - 18:43 #546211
blackpigeon's picture

ลองพยายามอธิบายกะเขาบ้าง
พยามเปรียบเปรยให้คนไม่มีความรู้ด้าน html หรือ javascript นะครับ

เปรียบเทียบกับการกรอกใบสมัครงาน

  • สมมุติว่าแบบเก่า ระบบการสมัครงานล้าหลังมาก ในแบบเก่า เวลามีคนมาสมัครงาน พนักงาน HR จะซักประวัติ แล้วพิมพ์ประวัติคนสมัครงาน ลง word แล้วพิมพ์ไปให้ HR Manager

  • ในระบบใหม่ จะมีแบบฟอร์มรับสมัครมา แล้วพนักงาน HR จะกรอกลงแบบฟอร์ม แล้วเอาไปเสนอ HR Manager (ให้สมมุติว่าพนักงาน กรอกข้อมูลให้คนสมัครก็แล้วกัน)

ประวัติผู้สมัคร = dynamic data,
แบบฟอร์ม = template ที่ว่านี่เอง,
พนักงาน HR = JavaScript,
สิ่งที่พิมพ์หรือกรอกเสร็จแล้ว = html ที่ render แล้ว,
HR Manager = ผู้ใช้งาน

By: Diew
ContributoriPhoneWindows PhoneAndroid
on 28 February 2013 - 01:59 #546345
Diew's picture

ผมพยายามอ่านมาตั้งแต่เช้าแล้วแต่ผมก็งงอยู่ดี สรุปว่ามันต่างยังไงกับการที่เราทำพวก div ที่เป็น form .html ที่มี ไว้ แล้วก็ include เข้ามาเมื่อมี data ที่ต้องแสดงผล หรือมันแค่เปลี่ยน div ตัวนอกสุดเป็น template แค่นั้น ?

By: boatboat001
iPhoneWindows
on 28 February 2013 - 07:59 #546376 Reply to:546345
boatboat001's picture

ผมเข้าใจว่า ถ้าแบบนั้นต้องใช้วิธีต่อ string กับ innerHTML ซึ่งจะมีปัญหาเรื่อง security ครับ
แล้วก็วิธีทำ div เป็น form ซ่อนไว้ จริงๆ แล้วมันแอบ render/loading อยู่เบื้องหลังครับ
แต่ถ้าใช้วิธี template จะไม่มีการ render ใดๆ เกิดขึ้นเลยจนกว่าจะมีการเรียกใช้งานครับ