Tôi có một trang có hoạt động khá nặng (giữa trọng lượng thay vì) canvas đang diễn ra. Để phục vụ người dùng trên thiết bị di động và máy tính cũ, tôi nghĩ tôi có thể triển khai cơ chế sẽ kiểm tra xem phần tử canvas có thực sự hiển thị hay không và quyết định xem các tính toán liên tục và cập nhật canvas (hoạt ảnh chạy ở tốc độ 30 khung hình/giây) có phải được thực hiện hay không .Trình duyệt có hiển thị các phần tử canvas không nằm trong khung nhìn không?
Điều này có hiệu quả, nhưng khi thực hiện kiểm tra hiệu suất với Công cụ Chrome Dev, tôi nhận thấy rằng ngay cả khi tôi tắt kiểm tra khả năng hiển thị của mình và chỉ cho phép mọi thứ hiển thị hết thời gian sử dụng CPU của hàm được đề cập. khi không có phần nào của phần tử canvas (s) hiển thị (mặc dù trong lý thuyết nó vẫn phải thực hiện các tác vụ tương tự). Vì vậy: ít nhất là trên máy tính của tôi chạy Chrome 17, nó không tạo ra sự khác biệt thực sự nếu tôi kiểm tra khả năng hiển thị của phần tử.
Để cắt một câu chuyện dài: Tôi có cần phải làm điều này hoặc là trình duyệt đủ thông minh để xử lý một trường hợp như vậy mà không nói cho họ biết (và tôi có thể lưu kiểm tra hiển thị) không?
EDIT:
Vì vậy, tôi thực hiện một số "nghiên cứu" về chủ đề này và xây dựng this fiddle.
gì xảy ra là nó chỉ tạo ra tiếng ồn ở tốc độ 30 khung hình mỗi giây. Không quá hài lòng với mắt nhưng, ... Phần trên chỉ là một đồng bằng div để chặn chế độ xem. Khi tôi cuộn xuống và có phần tử canvas trong khung nhìn CPU Cách sử dụng cho tôi biết nó chiếm khoảng 40%, vì vậy dường như trình duyệt hiện có khá nhiều việc phải làm ở đây. Khi tôi cuộn lại lên để tôi chỉ có maroon màu div trong chế độ xem và hồ sơ của tôi, việc sử dụng CPU giảm xuống còn khoảng 10%. Khi tôi cuộn xuống dưới: mức sử dụng tăng trở lại.
Vì vậy, khi tôi thực hiện kiểm tra mức độ hiển thị như trong modified fiddle, tôi thấy sự gia tăng (nhỏ nhất thành thật) trong việc sử dụng CPU thay vì thả (vì nó có nhiệm vụ bổ sung kiểm tra xem canvas nằm trong khung nhìn). Vì vậy, tôi vẫn tự hỏi nếu đây là một số tác dụng phụ của một cái gì đó mà tôi không nhận thức được (hoặc tôi đang làm một số sai lầm lớn khi profiling) hoặc nếu tôi có thể mong đợi các trình duyệt đủ thông minh để xử lý các tình huống như vậy? Không, tôi không biết.
Nếu có ai có thể làm sáng tỏ điều đó, tôi sẽ rất biết ơn!
Wow, cảm ơn rất nhiều vì câu trả lời siêu kỹ lưỡng đó! Tôi đã nghe nói về 'requestAnimationFrame' trước đây, nhưng những gì luôn làm tôi nhớ về nó là nó dường như nhằm mục đích cho hoạt hình chạy ở tốc độ 60 khung hình/giây, bất kể cái gì (cái mà tôi nghĩ là quá mượt mà đối với nhiều loại hình động). Cách duy nhất để hạn chế điều này tôi có thể nghĩ đến một lần nữa bao gồm một 'setInterval' .... Bạn có biết nếu có bất kỳ cách nào để hạn chế/thay đổi điều đó? – m90
Quá trơn tru? Tôi chưa bao giờ nghe nói về một hoạt hình quá mượt mà, có chuyện gì với điều đó? : S – AshleysBrain
Có thể âm thanh lạ, nhưng tôi có một nền tảng trong hoạt hình cổ điển vì vậy tôi thực sự nghĩ ở tốc độ 12 khung hình/giây, suy nghĩ như thế này là một phần của bộ não của tôi bây giờ. Phản đối của tôi có thể là ngớ ngẩn trong 95% các trường hợp, nhưng đối với một số trường hợp, nó sẽ là tuyệt vời để có quyền kiểm soát nhiều hơn. – m90