Chỉ cần hình dung xây dựng Google Maps cho một sơ đồ tầng nhà lớn với 3000 phòng.SVG rect so với div vs canvas
Tôi cần hiển thị tối đa 3000 hình chữ nhật (tốt nhất là cũng có thể hiển thị đa giác ngẫu nhiên, nhưng tại thời điểm này, đây không phải là vấn đề lớn nhất). Mỗi người trong số họ cần phải có sự kiện gắn liền với họ như di chuột qua và nhấp vào đó sẽ có một số hiệu ứng trên các yếu tố dom khác trên trang. Tôi cũng cần có khả năng phóng to và thu nhỏ.
Tôi biết tôi có thể làm điều đó với SVG (Raphael.js), hiển thị div đồng bằng hoặc canvas.
Tôi tự hỏi nếu có ai có đề xuất cụ thể để thực hiện cho những gì tôi đang cố gắng xây dựng. Nó cần hiển thị đủ nhanh (khoảng 1 giây hoặc lâu hơn) trên các trình duyệt chậm nhất. (IE8, Firefox 3.6 và hy vọng IE7, mặc dù tôi không mơ ước quá nhiều ...)
Cảm ơn sự giúp đỡ, Nicolas.
PS: Cho đến nay, tôi đã trải nghiệm việc hiển thị 3000 hình chữ nhật mất tối đa 7 giây trên IE8 với Raphael.js, điều này khá chậm. Nó cũng có vẻ hơn vẽ div đồng bằng là nhanh hơn đến 6 lần trên IE8.
Cảm ơn câu trả lời hữu ích! Một bình luận nhanh chóng mặc dù. Trên IE8 và IE7, có vẻ như render 3000 hình dạng đó (75% là hình chữ nhật) nhanh hơn nhiều so với SVG. (excanvas đã gần như nhanh chóng dựng hình chữ nhật hơn nếu tôi sử dụng divs đồng bằng, nhanh gấp 4-6 lần SVG). Bạn đang nói rằng nó sẽ trở nên chậm hơn nhiều nếu/khi tôi thêm hoạt hình và các sự kiện di chuột/nhấp chuột hoặc rằng nó thực sự phải luôn luôn chậm hơn? Cảm ơn một lần nữa! –