2015-10-06 16 views
5

Tôi dự định sẽ có Canvas Fabric để hiển thị hàng chục đồ họa khác nhau, có thể được phân phát dưới dạng tệp hình ảnh riêng lẻ hoặc một ảnh. Đối với mỗi đồ họa, có thể đồ họa cụ thể sẽ được hiển thị trên canvas 0 đến hàng chục lần. Tôi biết rằng FabricJS có khả năng clipping, điều này sẽ làm cho việc sử dụng các sprites có thể, và tôi biết rằng nói chung, các sprites trên web được ưu tiên cao hơn các hình ảnh riêng lẻ, chẳng hạn như cho CSS.Hiệu quả của hình ảnh Spap so với hình ảnh riêng lẻ

Tuy nhiên, tôi cũng đã nghe về hành vi/quirks trình duyệt xung quanh canvas nơi một số tối ưu hóa mà bạn có thể mong đợi sẽ diễn ra, không - tôi không thể tìm thấy liên kết tại thời điểm này các yếu tố nội dung canvas lớn không được xem trong Chrome sẽ mất một lượng thời gian đáng kể để được tính/"hiển thị", mặc dù không liên quan đến hình thức trên màn hình.

Vì vậy, được có bất kỳ sự mong đợi được biết về việc liệu n hình ảnh không cắt bớt cá nhân sẽ là một lợi thế/unpreferable sang định dạng Sprite đó là cắt bớt n lần cho một bạt FabricJS? Trong trường hợp nó quan trọng, đây sẽ không phải là một canvas FabricJS hoạt hình mạnh; mọi thứ có thể di chuyển khi được kéo, ví dụ, nhưng hoạt ảnh liên tục không phải là những gì liên quan trong trường hợp này.

+0

Theo http://caniuse.com/#feat=canvas không có bất kỳ vấn đề cắt liên quan (xem vấn đề được biết chuyển hướng). Điều đó nói rằng tôi nghĩ bạn nên chọn ba nền tảng hàng đầu của bạn (chrome, ios và .... android, nói ...) và thực hiện một số thử nghiệm hiệu suất cơ bản. – dsummersl

+1

@dsummersl Thật thú vị, caniuse.com đề cập đến một vấn đề trong Android; báo cáo lỗi mà nó liên kết đến được đóng lại là lỗi thời với một độ phân giải rõ ràng. – jmq

+0

oh vâng, đúng ... đọc vé có vẻ như nó có thể là vấn đề đối với 1/3 trình duyệt Android (tổng số khách truy cập thô từ http://developer.android.com/about/dashboards/index.html). – dsummersl

Trả lời

0

Chỉ cần tự mình kiểm tra để tìm hiểu điều gì làm chậm máy tính của bạn. Nó phụ thuộc vào PC và trình duyệt và card đồ họa.

Tôi không biết gì về Fabric.js, nhưng CPU máy tính và card đồ họa có thể dễ dàng xử lý thao tác cắt/đồ họa. Bạn không hiển thị hàng triệu đa giác giống như trò chơi 3D, vì vậy bạn nên ổn.

Đây là một trang web mà giải thích CSS sprites vs hình ảnh cá nhân mạng hiệu suất tăng: https://medium.com/parlay-engineering/emoji-at-scale-render-performance-of-css-sprites-vs-individual-images-f0a0a2dd8039

+0

Cảm ơn, nhưng câu trả lời này không thỏa mãn câu hỏi. Nếu cần thiết, tôi có thể viết các bài kiểm tra của riêng mình, vâng, nhưng tôi đã hỏi về SO trong trường hợp có một số kiến ​​thức đầy đủ mà ai đó sẽ chia sẻ từ kinh nghiệm hoặc kiểm tra trước đó. Về số hình dạng, có một sự khác biệt đáng chú ý trong kinh nghiệm của tôi khi làm việc với canvas Canvas.js và hàng trăm hoặc hàng nghìn yếu tố thấp, vì vậy thực tế là tôi sẽ không làm hàng triệu hình dạng không đủ thoải mái khi sprites con đường để đi. – jmq

Các vấn đề liên quan