on
ทุกวันนี้เวลาทำเว็บ คนทำเว็บจะพบว่ามีกรณีที่เราต้องเรนเดอร์ตัว HTML ขึ้นมาในฝั่งของเบราว์เซอร์เสมอๆ เช่น หน้าทวิตเตอร์ที่สามารถโหลดข้อความมาเพิ่มเติมผ่านทาง json ได้เรื่อยๆ หรือกระทั่งหน้าเพจของ Pantip.com รุ่นใหม่ที่เรนเดอร์คอมเมนต์ทั้งหมดในฝั่งเบราว์เซอร์ ในตอนนี้มาตรฐานการเรนเดอร์ในฝั่งเบราว์เซอร์ก็ถูกเสนอมาจากกูเกิลและไมโครซอฟท์แล้ว
มาตรฐาน HTML Template สร้างแท็ก template ขึ้นใหม่ คุณสมบัติของมันคือจะไม่ถูกเรนเดอร์เลย ภาพและข้อความทั้งหมดจะไม่ถูกใช้งานใดๆ ทำให้เวลาโหลดภาพขนาดใหญ่ก็ไม่ต้องเสียแบนด์วิดท์ หากมีสคริปต์ภายในแท็กนี้ก็ไม่ต้องเสียเวลาประมวลผล แต่แท็กนี้สามารถเข้าถึงผ่านทาง DOM ปกติได้ ทำให้สามารถเข้าไปเรียกใช้ attribute ต่างๆ ได้ โดยไม่ต้องแก้ innerHTML ที่ทั้งยุ่งยากและอาจจะมีปัญหาต่อความปลอดภัยได้ หรือบางคนอาจจะใช้ CSS เพื่อกำหนด display:none; แทน โดยเรนเดอร์ล่วงหน้ามาจากฝั่งเซิร์ฟเวอร์ แต่ปัญหาคือหากมีรูปภาพอยู่ภายใน มันจะถูกโหลดทันทีทั้งที่ยังไม่ได้แสดงผล
มาตรฐานนี้อยู่ในสถานะ Working Draft ใน W3C และตอนนี้ยังมีเพียง Chrome เท่านั้นที่รองรับมาตรฐานนี้
ที่มา - HTML5 Rocks, W3C
ดีมากเลย ทุกวันนี้เปิด
figgaro Wed, 27/02/2013 - 12:34
ดีมากเลย ทุกวันนี้เปิด บนโทรศัพท์มือถือ มันกิน Memory มากต้องโหลดใหม่ทุกที
ผมว่ามันจะโหลดหนักกว่าเดิมมาก
zotix Wed, 27/02/2013 - 18:24
In reply to ดีมากเลย ทุกวันนี้เปิด by figgaro
ผมว่ามันจะโหลดหนักกว่าเดิมมากกว่า
สารภาพว่าอ่านแล้วผมนึกภาพตามไ
mp3wizard Wed, 27/02/2013 - 12:50
สารภาพว่าอ่านแล้วผมนึกภาพตามไม่ออกครับ T.T
เข้าไปดูตัวอย่างในที่มาประกอบ
lew Wed, 27/02/2013 - 13:10
In reply to สารภาพว่าอ่านแล้วผมนึกภาพตามไ by mp3wizard
เข้าไปดูตัวอย่างในที่มาประกอบน่าจะช่วยได้ครับ
แปลว่า มันช่วยลดโหลดทางฝั่ง
nowingnoid Wed, 27/02/2013 - 13:49
In reply to เข้าไปดูตัวอย่างในที่มาประกอบ by lew
แปลว่า มันช่วยลดโหลดทางฝั่ง Server ลงไปได้พอสมควรเลยใช่ไหมครับ
แล้วแต่คิดครับ
lew Wed, 27/02/2013 - 16:38
In reply to แปลว่า มันช่วยลดโหลดทางฝั่ง by nowingnoid
แล้วแต่คิดครับ อาจจะใช้เพื่อลดโหลดก็ได้ แต่ผมว่าส่วนมากใช้เพื่อเรนเดอร์แบบ Twitter/Facebook/Google+ คงจะตรงการใช้งานกว่า
ผมก็มาสารภาพว่าต้องอ่านหลายตล
hisoft Wed, 27/02/2013 - 13:48
In reply to สารภาพว่าอ่านแล้วผมนึกภาพตามไ by mp3wizard
ผมก็มาสารภาพว่าต้องอ่านหลายตลบมากครับ - -"
เอาง่ายๆ หน้าหน้าเฟสบุ๊ก
ComSci-MFU Wed, 27/02/2013 - 13:49
In reply to สารภาพว่าอ่านแล้วผมนึกภาพตามไ by mp3wizard
เอาง่ายๆ หน้าหน้าเฟสบุ๊ก ที่มันจะมีส่วนที่โหลดเพิ่มมาเรื่อยๆ ทั้งที่เราแค่เปิดหน้านั้นทิ้งไว้ ส่วนที่ไม่มีการเปลี่ยนแปลงคือส่วน template ในข่าวครับ
ไม่ใช่ครับ สมมติเฟซบุค แต่ละ
nat3738 Wed, 27/02/2013 - 14:48
In reply to เอาง่ายๆ หน้าหน้าเฟสบุ๊ก by ComSci-MFU
ไม่ใช่ครับ
สมมติเฟซบุค แต่ละ item ใน news feed มันจะมีอะไรเหมือนๆ กันใช่ไหม? เช่ร รูปโปรไฟล์ ชื่อคน กล่องคอมเมนต์ ก็จัดโครงพวกนี้ให้เสร็จ แล้วยัดลงไปเป็น template พอจะเพิ่ม item ใหม่ลงในหน้าก็แค่เรียกเทมเพลตนี้มาใช้ เป็นการให้ไม่ต้องใช้ innerHTML
+1
olan16 Thu, 28/02/2013 - 01:45
In reply to ไม่ใช่ครับ สมมติเฟซบุค แต่ละ by nat3738
+1
ลองดู screencast นี้ดูครับ
lucksad Wed, 27/02/2013 - 18:37
In reply to สารภาพว่าอ่านแล้วผมนึกภาพตามไ by mp3wizard
ลองดู screencast นี้ดูครับ http://www.youtube.com/watch?v=eJZx9c6YL8k นาทีที่ 5:07 เป็นต้นไป
รอมานานแล้ว
akira Wed, 27/02/2013 - 14:18
รอมานานแล้ว
เจ๋ง
cloverink Wed, 27/02/2013 - 14:57
เจ๋ง
ดีสำหรับมือถือ
tonhady Wed, 27/02/2013 - 16:50
ดีสำหรับมือถือ เปิดคอมสมัยนี้เน็ตไวดีว่าเมื่อก่อนเยอะ
ไม่เข้าใจ ประมาณว่า
zotix Wed, 27/02/2013 - 18:15
ไม่เข้าใจ ประมาณว่า ปกติเวลาเปิดเวบมันจะส่งโค็ดและแยกออกมาเป็นส่วนๆ มาให้ Browser จัดหน้าแสดงออกมา แต่ Tag ใหม่มันจะจัดหน้ามาให้เรียบร้อยแล้วรวมมาเป็นไฟล์เดียว เหมือน PDF ที่ไปเปิดที่ไหนก็จะเหมือนกัน ถูกไหมครับมันเหมือนการใช้ Function ในการเขียนโปรแกรม
ลองพยายามอธิบายกะเขาบ้าง พยาม
blackpigeon Wed, 27/02/2013 - 18:43
ลองพยายามอธิบายกะเขาบ้าง
พยามเปรียบเปรยให้คนไม่มีความรู้ด้าน html หรือ javascript นะครับ
เปรียบเทียบกับการกรอกใบสมัครงาน
สมมุติว่าแบบเก่า ระบบการสมัครงานล้าหลังมาก ในแบบเก่า เวลามีคนมาสมัครงาน พนักงาน HR จะซักประวัติ แล้วพิมพ์ประวัติคนสมัครงาน ลง word แล้วพิมพ์ไปให้ HR Manager
ในระบบใหม่ จะมีแบบฟอร์มรับสมัครมา แล้วพนักงาน HR จะกรอกลงแบบฟอร์ม แล้วเอาไปเสนอ HR Manager (ให้สมมุติว่าพนักงาน กรอกข้อมูลให้คนสมัครก็แล้วกัน)
ประวัติผู้สมัคร = dynamic data,
แบบฟอร์ม = template ที่ว่านี่เอง,
พนักงาน HR = JavaScript,
สิ่งที่พิมพ์หรือกรอกเสร็จแล้ว = html ที่ render แล้ว,
HR Manager = ผู้ใช้งาน
ผมพยายามอ่านมาตั้งแต่เช้าแล้ว
Diew Thu, 28/02/2013 - 01:59
ผมพยายามอ่านมาตั้งแต่เช้าแล้วแต่ผมก็งงอยู่ดี สรุปว่ามันต่างยังไงกับการที่เราทำพวก div ที่เป็น form .html ที่มี ไว้ แล้วก็ include เข้ามาเมื่อมี data ที่ต้องแสดงผล หรือมันแค่เปลี่ยน div ตัวนอกสุดเป็น template แค่นั้น ?
ผมเข้าใจว่า
boatboat001 Thu, 28/02/2013 - 07:59
In reply to ผมพยายามอ่านมาตั้งแต่เช้าแล้ว by Diew
ผมเข้าใจว่า ถ้าแบบนั้นต้องใช้วิธีต่อ string กับ innerHTML ซึ่งจะมีปัญหาเรื่อง security ครับ
แล้วก็วิธีทำ div เป็น form ซ่อนไว้ จริงๆ แล้วมันแอบ render/loading อยู่เบื้องหลังครับ
แต่ถ้าใช้วิธี template จะไม่มีการ render ใดๆ เกิดขึ้นเลยจนกว่าจะมีการเรียกใช้งานครับ