Một số thiết bị Android cực kỳ chậm khi hiển thị các yếu tố canvas

Question

Im phát triển ứng dụng cho thiết bị Android và thấy rằng Samsung Galaxy S4 cụ thể, có hiệu suất cực kỳ kém khi ứng dụng/trang web sử dụng canvas. Điều kỳ lạ là, không phải lúc nào cũng vậy.

Tôi đã thử nghiệm 2 ứng dụng mẫu.

http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html

và

http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Default.html

người đầu tiên hoạt động tốt, và nhanh hơn so với Nokia của tôi (đó là lý lõi kép) và dự kiến. Tuy nhiên, bản demo khác, gần như hoàn toàn không phản hồi và tốc độ khung hình gần bằng 1, nơi mà tất cả các thiết bị khác đều hiển thị tốt.

Kể từ khi ứng dụng đầu tiên chạy tốt và ứng dụng kia không, nó sẽ hỏi câu hỏi, tại sao? Người đầu tiên không có người nghe sự kiện, nơi người nghe khác đã chạm vào người nghe. Touchmove có thể là nguyên nhân thay vì canvas ... hoặc là bản demo sử dụng một số tính năng canvas mà một trong những khác là không, và do đó có hiệu suất kém.

Tôi đã đọc rất nhiều chủ đề về vấn đề này và dường như không có câu trả lời nào. Hầu hết là nhiều tháng tuổi ... vì vậy tôi nghĩ rằng bệnh làm cho một chủ đề mới.

Có cách nào để giải quyết vấn đề canvas trên Samsung S4 ... và các thiết bị Android khác có khả năng chạy 4.2.x. Nếu bất kỳ người dùng StackOverflow nào ở đây có S4, bạn có thể kiểm tra cả bản trình diễn và xác nhận các quan sát của tôi không?

Answer 1

Tôi thật sự nghi ngờ đây không phải là vấn đề cụ thể về Canvas, mà là sự cố requestAnimationFrame. Hoạt ảnh đầu tiên không cố gắng sử dụng requestAnimationFrame, nhưng hoạt ảnh thứ hai thực hiện, trong this file trên line 206.

Trình duyệt Android trên firmwares < = 4,2 không hỗ trợrequestAnimationFrame, và thay vào đó sử dụng setTimeout, chia một giây bởi tốc độ khung quy định tại Hz, mà thực hiện làm cho trong vòng lặp sự kiện bình thường.

setTimeout không thực hiện vào thời điểm chính xác trong mili giây được yêu cầu, nhưng enqueues sự kiện trong vòng lặp tại thời gian quy định. Nếu vòng lặp sự kiện bị treo bởi javascript khác trên trang hoặc thiết bị lõi đơn quyết định thứ gì đó quan trọng hơn, thời gian chạy là rất dễ bị khử ưu tiên mà không có API requestAnimationFrame và gọi lại được sử dụng setTimeout và bó. More on setTimeout resolution and timing.

Thật không may, bạn đang ở lòng thương xót của hàng đợi sự kiện nếu bạn (1) đi theo phương pháp dựa trên Canvas này và (2) trên nền tảng không hỗ trợ requestAnimationFrame. Here is the reference table cho những trình duyệt hỗ trợ tính năng này.

Chúc mừng!