Thực hiện di chuyển hình ảnh trên trang web thông qua CSS vs HTML5 Canvas

Question

Tôi có một hình ảnh và di chuyển nó xung quanh trang web của tôi (JavaScript) như thế này:

satelliteImage.style.top = coordinates.top + "px"; 
satelliteImage.style.left = coordinates.left + "px"; 

Thật không may, hiệu suất là khá xấu trong tất cả các trình duyệt trừ Chrome. Nút cổ chai đang hiển thị tốc độ. Tôi không có hy vọng cho IE, nhưng tôi muốn cải thiện Firefox ít nhất. Có ai có kinh nghiệm với hiệu suất của HTML5 Canvas trong khi di chuyển một hình ảnh, so với thay đổi Style?

Answer 1

Tôi đã tạo các thử nghiệm tương đương để so sánh tốc độ khung hình để di chuyển hình ảnh qua CSS so với vẽ hình ảnh trên khung HTML. Dưới đây là các bài kiểm tra:

• Moving an Image via Canvas
• Moving an Image via CSS
• Moving 20 Sprites via Canvas trên nền 1024x768
• Moving 20 Sprites via CSS trên nền 1024x768

Và đây là the FPS results (xem URL để biết chi tiết kiểm tra):

 
        Image Image Sprite Sprite 
     Browser Canvas CSS Canvas  CSS 
---------------------------------------------- 
    Safari v5.0.3  59  95  59  89 
Firefox v3.6.13  59  95  60  90 
Firefox v4.0b8  75  89  78  82 
    Chrome v8.0  108 230  120  204 
    iPad, Horiz  17  44  2  14 
    iPad, Vert  4  75  2  15 

Như bạn có thể thấy:

1. Bạn tôi luôn đi để có được kết quả tốt hơn di chuyển một hình ảnh như một phần tử HTML hơn vẽ lại một phần của vải, và
2. Bạn khả năng có thể làm điều gì đó sai nếu bạn chỉ nhận được 5 khung hình/giây.

Chỉnh sửa: Đã thêm kiểm tra để di chuyển 20 hình động nhỏ trên nền. Các kết luận vẫn giữ nguyên.

Answer 2

Theo kinh nghiệm của tôi với Canvas, bạn sẽ có thể nhận được 50 fps tốt trên Firefox và thậm chí là 15 fps tốt trên iOS. IE9 có lẽ sẽ là trình duyệt nhanh nhất, các phiên bản khác không thực sự triển khai Canvas.

Answer 3

Hiện đã hơn 2 năm và tôi đã quyết định chạy các thử nghiệm này để xem điều này có đúng không. Nó không ... và nó không.

1. và di động cả hoạt ảnh CSS chạy nhanh hơn đáng kể so với canvas.

2. desktop Chrome chạy canvas và CSS hình ảnh động về cùng

3. Chrome Mobile (trên Nexus 7) thực hiện hoàn toàn ngược lại: vải chạy nhanh hơn đáng kể so với CSS!

(Sử dụng Firefox Android với Nexus 7 và máy tính để bàn các trình duyệt trên Linux với độ phân giải 1920x1080)

 

Browser/OS   Canvas Image CSS IMage Canvas Sprites CSS Sprites  
-----------   ------------ ---------- -------------- ----------- 
Firefox 16   56.7fps  215.6 fps 59.2fps   203.6fps 
Firefox 16 Android 17.1 fps  179.6fps 11.5fps   35.7 
Chrome 22   192.3fps  223.5fps 170.1fps   164.3fps 
Chrome Android  48.3fps  39.9fps  92.8fps   13.1fps 

gì mọi người khác được? Bất cứ ai có thể kiểm tra IE9, 10 cho điều này?

Answer 4

đặn Tôi muốn cập nhật câu hỏi cũ này với những phát hiện của tôi trên một iPad thế hệ thứ 3:

Canvas thắng 2: 1 với sprite Ảnh động trung bình khoảng 120 fps với thanh toán bù trừ nền toggled cả hai cách. CSS hầu như không thể đáp ứng 60 khung hình/giây.

Đối với một hình ảnh, CSS chắc chắn nhanh hơn.

Answer 5

Thêm vào MyNameIsKo kết quả trên iPad 3 hiệu suất. Tôi đã tự hỏi nếu nó đã được làm với thực tế là phương pháp CSS DOM đã phải lo lắng về việc vẽ trên màn hình võng mạc của iPad 3 trong khi vải sẽ được rút ra ở độ phân giải thấp hơn và sau đó blt'd để màn hình. IPad 1 nhanh hơn đáng kể cho các bản cập nhật CSS hơn iPad3!

Tôi cũng đã thực hiện một số thay đổi đối với canvas canvas để có thể vẽ đến canvas độ phân giải võng mạc. Tôi đã thêm mã sau đây sau canv.height = h; trong hàm bg.onload:

if (window.devicePixelRatio) { 
    ctx.canvas.style.width = w + "px"; 
    ctx.canvas.style.height = h + "px"; 
    ctx.canvas.height = h * window.devicePixelRatio; 
    ctx.canvas.width = w * window.devicePixelRatio; 
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio); 
} 

khiến giảm rất lớn trong hoạt động ...

iPad 1 (iOS 5.5.1)

iPad 3 (iOS 6.1.3)

     CSS Sprite  Canvas Sprites 
----------------------------------------------------- 
iPad 1     90     100 
iPad 3     55     120 
iPad 1(canvas changes) n/a     100 
iPad 3(canvas changes) n/a     35