ในภูมิทัศน์ของเครื่องมือพัฒนาเว็บที่มีการเปลี่ยนแปลงอยู่เสมอ การจับภาพและแปลงองค์ประกอบ DOM เป็นรูปภาพยังคงเป็นความท้าทายทั่วไปสำหรับนักพัฒนา ไลบรารี snapDOM ที่เพิ่งเปิดตัวสัญญาว่าจะแปลงองค์ประกอบ HTML เป็นภาพ SVG ที่ปรับขนาดได้ด้วยความเที่ยงตรงสูง แต่การทดสอบจากชุมชนได้ให้ผลลัพธ์ที่หลากหลายซึ่งท้าทายข้อกล่าวอ้างหลักของเครื่องมือนี้
ข้อกล่าวอ้างด้านประสิทธิภาพถูกตรวจสอบอย่างละเอียด
ไลบรารี snapDOM อ้างว่ามีความเร็วสูงมากในการจับโครงสร้าง DOM โดยการทดสอบเกณฑ์มาตรฐานระบุว่ามีประสิทธิภาพเหนือกว่าตัวเลือกยอดนิยมอย่าง html2canvas และ modern-screenshot โดยเฉพาะสำหรับองค์ประกอบขนาดใหญ่ ตามเอกสารประกอบ snapDOM จะมีความเร็วเพิ่มขึ้นอย่างมากเมื่อขนาด DOM เพิ่มขึ้น โดยอ้างว่าเร็วกว่า html2canvas ถึง 15.98 เท่าสำหรับองค์ประกอบขนาดใหญ่มาก
อย่างไรก็ตาม การทดสอบในสถานการณ์จริงโดยนักพัฒนาได้ขัดแย้งกับข้อกล่าวอ้างด้านประสิทธิภาพเหล่านี้ นักพัฒนาคนหนึ่งที่ใช้ html2canvas อย่างกว้างขวางสำหรับเว็บไซต์จำลองบาสเกตบอลของพวกเขารายงานผลตรงกันข้าม:
ผมใช้ html2canvas มานานแล้วจึงลองใช้ไลบรารีของคุณ มันช้ากว่ามาก (ผมรู้ว่า README ของคุณมีการเปรียบเทียบที่บอกว่าตรงกันข้าม ดังนั้นผมไม่แน่ใจ) และผลลัพธ์ดูแย่กว่ามาก
นักพัฒนาได้แชร์ภาพหน้าจอเปรียบเทียบที่ดูเหมือนจะแสดงให้เห็นว่า html2canvas ให้ผลลัพธ์ทางภาพที่ดีกว่า snapDOM ซึ่งทำให้เกิดคำถามเกี่ยวกับวิธีการเปรียบเทียบที่ใช้ในเอกสารของไลบรารี
การเปรียบเทียบประสิทธิภาพของ snapDOM กับตัวเลือกอื่น
| ขนาดองค์ประกอบ | ผู้ชนะ | เทียบกับ modern-screenshot | เทียบกับ html2canvas |
|---|---|---|---|
| 200x100 (เล็ก) | modern-screenshot | เร็วกว่า 1.18 เท่า | เร็วกว่า 4.46 เท่า |
| 400x300 (โมดอล) | snapDOM | เร็วกว่า 1.04 เท่า | เร็วกว่า 4.07 เท่า |
| 1200×800 (มุมมองหน้า) | snapDOM | เร็วกว่า 2.43 เท่า | เร็วกว่า 5.74 เท่า |
| 2000×1500 (พื้นที่เลื่อนขนาดใหญ่) | snapDOM | เร็วกว่า 5.02 เท่า | เร็วกว่า 9.35 เท่า |
| 4000×2000 (ขนาดใหญ่มาก) | snapDOM | เร็วกว่า 11.35 เท่า | เร็วกว่า 15.98 เท่า |
หมายเหตุ: นี่เป็นข้อมูลที่อ้างในเอกสารของ snapDOM แต่การทดสอบในสภาพแวดล้อมจริงโดยนักพัฒนาบางรายได้ให้ผลลัพธ์ที่ขัดแย้งกัน
การใช้งานทางเทคนิคและข้อจำกัด
snapDOM ใช้องค์ประกอบ foreignObject ของ SVG เพื่อฝังเนื้อหา HTML ซึ่งเป็นเทคนิคที่อาจช่วยให้ปรับขนาดได้ดีกว่าโซลูชันที่ใช้ canvas วิธีการนี้ได้จุดประกายการอภิปรายทางเทคนิคเกี่ยวกับความแตกต่างพื้นฐานระหว่างวิธีการจับภาพแบบ SVG และ canvas
สมาชิกชุมชนคนหนึ่งตั้งคำถามว่า SVG จะสามารถเร็วกว่าและแม่นยำกว่า canvas ได้อย่างไร โดยเฉพาะเมื่อต้องจัดการกับคุณสมบัติ CSS ที่ซับซ้อนเช่นเงา นักพัฒนาอีกคนอธิบายว่า snapDOM ฝัง HTML โดยตรงใน SVG ผ่าน foreignObject แม้ว่าพวกเขาจะแสดงความไม่แน่ใจว่าวิธีการนี้จะน่าเชื่อถือหรือสอดคล้องกันมากกว่าในสภาพแวดล้อมการดูที่แตกต่างกันหรือไม่
ผู้สร้างไลบรารียอมรับความท้าทายในช่วงแรกเกี่ยวกับการปรับขนาดไฟล์ โดยกล่าวว่า: ผมรู้สึกไม่พอใจเกี่ยวกับขนาดของไฟล์ SVG ที่สร้างขึ้นเพราะตอนแรกสไตล์ทั้งหมดถูกฝังในแต่ละองค์ประกอบ ดังนั้นผมจึงสร้างฟังก์ชันเพื่อสร้างคลาส CSS ขนาดเล็ก (.c1, c2, c3,...) ทำให้ขนาดสุดท้ายค่อนข้างเล็ก
ความเข้ากันได้ข้าม Browser และสภาพแวดล้อม
นักพัฒนาหลายคนสอบถามเกี่ยวกับความเข้ากันได้ของ snapDOM กับสภาพแวดล้อมต่างๆ นอกเหนือจากเว็บเบราว์เซอร์มาตรฐาน เมื่อถูกถามเกี่ยวกับความเข้ากันได้กับส่วนขยายของเบราว์เซอร์ นักพัฒนายอมรับว่าพวกเขายังไม่ได้ทดสอบในบริบทนั้น ในทำนองเดียวกัน เมื่อถูกถามเกี่ยวกับความเข้ากันได้กับ Node.js ที่มี DOM polyfills ผู้สร้างระบุว่ายังไม่ได้ทดสอบ
ไลบรารีดูเหมือนจะทำงานได้บนเบราว์เซอร์หลัก โดยนักพัฒนายืนยันการทดสอบบน Chrome, Firefox และ Safari ซึ่งแตกต่างจากวิธีการทางเลือกบางอย่างที่กล่าวถึงในการอภิปราย เช่น Media Capture API ซึ่งปัจจุบันมีการสนับสนุนเบราว์เซอร์ที่จำกัด
คุณสมบัติหลักของ snapDOM
- แปลงอิลิเมนต์ HTML เป็นรูปภาพ SVG ที่ปรับขนาดได้
- รักษารูปแบบ ฟอนต์ พื้นหลัง เนื้อหา shadow DOM และ pseudo-elements
- ตัวเลือกการส่งออก: SVG, PNG, JPG, WebP หรือ canvas
- ไม่มีการพึ่งพาไลบรารีภายนอก ใช้ Web API มาตรฐาน
- การจัดการพิเศษสำหรับ shadow DOM และ pseudo-elements
- ตัวเลือกการยกเว้นอิลิเมนต์และการใช้ตัวยึดตำแหน่งผ่าน data attributes
คำขอฟีเจอร์และการพัฒนาในอนาคต
การอภิปรายในชุมชนแสดงให้เห็นถึงความสนใจในฟีเจอร์เพิ่มเติม โดยนักพัฒนาคนหนึ่งแนะนำฟังก์ชันการส่งออก PDF ในขณะที่ผู้สร้างพิจารณาว่าอยู่นอกขอบเขตปัจจุบัน พวกเขายอมรับว่าอาจเป็นไปได้โดยใช้ไลบรารีภายนอกเช่น jsPDF หรือ svg2pdf.js
นักพัฒนาคนอื่นๆ ขอให้ปรับปรุงเอกสารด้วยตัวอย่างภาพที่แสดงผลลัพธ์ของไลบรารี ตามที่ผู้แสดงความคิดเห็นคนหนึ่งกล่าวว่า รูปภาพใน readme จะช่วยได้มาก จริงๆ แล้วทุกครั้งที่มีผลลัพธ์ที่เป็นภาพ มันมีเหตุผลที่จะใส่รูปภาพ
ขณะที่ snapDOM ยังคงพัฒนาต่อไป ข้อมูลเชิงลึกจากชุมชนเหล่านี้อาจช่วยกำหนดแผนการพัฒนาและปรับปรุงประโยชน์ของมันสำหรับการใช้งานในโลกจริง ในตอนนี้ นักพัฒนาดูเหมือนจะชั่งน้ำหนักวิธีการที่ใช้ SVG แบบเฉพาะตัวกับเครื่องมือที่มีการใช้งานมากกว่าอย่าง html2canvas โดยมีข้อพิจารณาในทางปฏิบัติเช่น ประสิทธิภาพ ความแม่นยำทางภาพ และความเข้ากันได้ข้ามสภาพแวดล้อมเป็นปัจจัยสำคัญในการประเมินของพวกเขา
อ้างอิง: snapDOM