Trong bối cảnh các công cụ phát triển web không ngừng phát triển, việc chụp và chuyển đổi các phần tử DOM thành hình ảnh vẫn là một thách thức phổ biến đối với các nhà phát triển. Thư viện snapDOM mới phát hành hứa hẹn chuyển đổi các phần tử HTML thành hình ảnh SVG có khả năng mở rộng với độ chính xác cao, nhưng các bài kiểm tra từ cộng đồng đã cho kết quả trái chiều, thách thức một số tuyên bố cốt lõi của công cụ này.
Các tuyên bố về hiệu suất bị xem xét kỹ lưỡng
Thư viện snapDOM tuyên bố có tốc độ cực kỳ nhanh trong việc chụp cấu trúc DOM, với các bài kiểm tra đối chuẩn cho thấy nó vượt trội hơn các giải pháp phổ biến như html2canvas và modern-screenshot, đặc biệt là với các phần tử lớn hơn. Theo tài liệu, snapDOM trở nên nhanh hơn đáng kể khi kích thước DOM tăng lên, với tuyên bố nhanh hơn đến 15,98 lần so với html2canvas đối với các phần tử rất lớn.
Tuy nhiên, các bài kiểm tra thực tế của các nhà phát triển đã mâu thuẫn với những tuyên bố về hiệu suất này. Một nhà phát triển đã sử dụng html2canvas rộng rãi cho trang web mô phỏng bóng rổ của họ đã báo cáo kết quả ngược lại:
Tôi đã sử dụng html2canvas trong một thời gian dài nên tôi đã thử thư viện của bạn. Nó chậm hơn nhiều (Tôi biết README của bạn có các đối chuẩn nói điều ngược lại nên tôi không biết) và kết quả trông tệ hơn nhiều.
Nhà phát triển đã chia sẻ ảnh chụp màn hình so sánh cho thấy html2canvas tạo ra kết quả hình ảnh tốt hơn so với snapDOM, làm dấy lên câu hỏi về phương pháp đối chuẩn được sử dụng trong tài liệu của thư viện.
Các Tuyên Bố về Hiệu Suất của snapDOM so với Các Giải Pháp Thay Thế
| Kích thước Phần tử | Người chiến thắng | so với modern-screenshot | so với html2canvas |
|---|---|---|---|
| 200x100 (Nhỏ) | modern-screenshot | nhanh hơn 1,18 lần | nhanh hơn 4,46 lần |
| 400x300 (Modal) | snapDOM | nhanh hơn 1,04 lần | nhanh hơn 4,07 lần |
| 1200×800 (Xem trang) | snapDOM | nhanh hơn 2,43 lần | nhanh hơn 5,74 lần |
| 2000×1500 (Khu vực cuộn lớn) | snapDOM | nhanh hơn 5,02 lần | nhanh hơn 9,35 lần |
| 4000×2000 (Rất lớn) | snapDOM | nhanh hơn 11,35 lần | nhanh hơn 15,98 lần |
Lưu ý: Đây là những tuyên bố được đưa ra trong tài liệu của snapDOM, nhưng các thử nghiệm thực tế từ một số nhà phát triển đã cho kết quả trái ngược.
Triển khai kỹ thuật và hạn chế
snapDOM sử dụng phần tử foreignObject của SVG để nhúng nội dung HTML, một kỹ thuật cho phép khả năng mở rộng tốt hơn so với các giải pháp dựa trên canvas. Cách tiếp cận này đã làm dấy lên các cuộc thảo luận kỹ thuật về sự khác biệt cơ bản giữa các phương pháp chụp dựa trên SVG và canvas.
Một thành viên cộng đồng đặt câu hỏi làm thế nào SVG có thể nhanh hơn và chính xác hơn canvas, đặc biệt khi xử lý các tính năng CSS phức tạp như đổ bóng. Một nhà phát triển khác giải thích rằng snapDOM nhúng HTML trực tiếp vào SVG thông qua foreignObject, mặc dù họ bày tỏ sự không chắc chắn về việc liệu cách tiếp cận này có đáng tin cậy hơn hoặc nhất quán hơn trên các môi trường xem khác nhau hay không.
Người tạo thư viện đã thừa nhận một số thách thức ban đầu với việc tối ưu hóa kích thước tệp, lưu ý: Tôi đã buồn về kích thước của tệp svg được tạo ra vì ban đầu tất cả các kiểu đều được nội tuyến trong từng phần tử. Vì vậy, tôi đã tạo một hàm để tạo các lớp css nhỏ (.c1, c2, c3,...) Vì vậy, kích thước cuối cùng khá nhỏ.
Khả năng tương thích với trình duyệt và môi trường
Một số nhà phát triển đã hỏi về khả năng tương thích của snapDOM với các môi trường khác nhau ngoài trình duyệt web tiêu chuẩn. Khi được hỏi về khả năng tương thích với tiện ích mở rộng trình duyệt, nhà phát triển thừa nhận họ chưa kiểm tra nó trong bối cảnh đó. Tương tự, khi được hỏi về khả năng tương thích với Node.js với các polyfill DOM, người tạo cho biết điều này chưa được kiểm tra.
Thư viện dường như hoạt động trên các trình duyệt chính, với nhà phát triển xác nhận đã kiểm tra trên Chrome, Firefox và Safari. Điều này trái ngược với một số cách tiếp cận thay thế được đề cập trong cuộc thảo luận, chẳng hạn như Media Capture API, hiện có hỗ trợ trình duyệt hạn chế.
Các tính năng chính của snapDOM
- Chuyển đổi phần tử HTML thành hình ảnh SVG có khả năng mở rộng
- Giữ nguyên kiểu dáng, phông chữ, hình nền, nội dung shadow DOM, và các phần tử giả
- Các tùy chọn xuất: SVG, PNG, JPG, WebP, hoặc canvas
- Không có phụ thuộc, sử dụng các API Web tiêu chuẩn
- Xử lý đặc biệt cho shadow DOM và các phần tử giả
- Tùy chọn loại trừ phần tử và đặt giữ chỗ thông qua thuộc tính dữ liệu
Yêu cầu tính năng và phát triển trong tương lai
Cuộc thảo luận của cộng đồng cho thấy sự quan tâm đến các tính năng bổ sung, với một nhà phát triển đề xuất chức năng xuất PDF. Mặc dù người tạo coi điều này nằm ngoài phạm vi hiện tại, họ thừa nhận rằng điều đó có thể thực hiện được bằng cách sử dụng các thư viện bên ngoài như jsPDF hoặc svg2pdf.js.
Các nhà phát triển khác yêu cầu cải thiện tài liệu với các ví dụ trực quan hiển thị đầu ra của thư viện. Như một người bình luận đã lưu ý, Hình ảnh trong tệp readme thực sự sẽ rất hữu ích. Thực tế, bất cứ khi nào có đầu ra trực quan, việc đưa vào một hình ảnh là điều có ý nghĩa.
Khi snapDOM tiếp tục phát triển, những hiểu biết từ cộng đồng này có thể giúp định hình lộ trình phát triển và cải thiện tiện ích của nó cho các ứng dụng thực tế. Hiện tại, các nhà phát triển dường như đang cân nhắc cách tiếp cận dựa trên SVG độc đáo của nó so với các công cụ đã được thiết lập hơn như html2canvas, với các cân nhắc thực tế như hiệu suất, độ chính xác trực quan và khả năng tương thích giữa các môi trường là những yếu tố chính trong đánh giá của họ.
Tham khảo: snapDOM