Canvas so với DOM - Phương pháp hiển thị hình ảnh hiệu quả nhất trong HTML5 là gì?

Question

Người dùng StackOverflow

Khi tạo ứng dụng html5/trang web, trong trường hợp đó, một số lượng lớn hình ảnh được hiển thị tuần tự hoặc cùng một lúc trong trình duyệt là việc sử dụng phần tử canvas ?

Miễn là chúng tôi chỉ nói về việc trình bày hình ảnh, có bất kỳ điểm nào khi sử dụng canvas và vẽ hình ảnh trên đó thay vì sử dụng thẻ DOM < img> không? Cũng sẽ có một số thao tác hình ảnh, như chuyển đổi CSS3/di chuyển/mở rộng/thu phóng và nhận dạng cử chỉ (kéo, chạm/chạm, có thể chụm, v.v.), theo như tôi biết, có thể áp dụng cho cả canvas và thẻ img.

Điều cũng quan trọng là giữ mọi thứ càng nhiều càng tốt "html5" càng tốt và cũng tính đến hiệu suất. Ví dụ, nó sẽ quan trọng nếu trong tương lai phần tử canvas sẽ ngày càng được sử dụng và tối ưu hóa bởi các trình duyệt và nó cũng sẽ quan trọng nếu thời gian là < img> là nhanh hơn nhiều.

Vì chúng tôi đang xem xét phát triển một ứng dụng html5 phổ quát, làm việc trên máy tính để bàn và cũng trên thiết bị di động, hiệu suất và tốc độ là một yếu tố rất quan trọng. Tuy nhiên, các bài kiểm tra so sánh canvas và < img> đã nhắm mục tiêu hầu hết các trò chơi trình duyệt javascript. Trong trường hợp này, hoạt ảnh không quan trọng bằng mức tiêu thụ bộ nhớ và hiệu suất tổng thể.

Có tài nguyên/nghiên cứu nào về khía cạnh cụ thể này không?

Answer 1

UseCanvas = NeedCanvas ? true : false 

Bạn thực sự không cần canvas cho thao tác này và sẽ mất nhiều thời gian hơn để phát triển với canvas vì nó phức tạp hơn nhiều.

Sử dụng <img> thẻ bằng javascript sẽ không chỉ tăng khả năng tương thích nhưng tốc độ và khả năng truy cập - tất cả mọi thứ với trình duyệt có thể chạy CSS và Javascript. Ngoài ra còn có các yếu tố SEO, tôi khá chắc chắn rằng hình ảnh trong canvas sẽ không được lập chỉ mục.

Không sử dụng công nghệ HTML5 để sử dụng công nghệ HTML5. Khi bạn muốn bắt đầu cong vênh các hình ảnh và yêu cầu người dùng vẽ lên chúng để bạn có thể xuất/lưu, đó là nơi bạn cần canvas.