Phát hiện hiệu năng của card đồ họa - JS

Question

Đây là một ảnh dài - có cách nào để phát hiện hiệu suất card đồ họa kém và mạnh mẽ thông qua một plugin JS không?

Chúng tôi đã xây dựng một trang web thị sai cho khách hàng, nó hoạt động trên các máy tính hiệu suất thấp hơn - chúng tôi có thể tinh chỉnh hiệu suất để làm cho nó hoạt động tốt hơn trên bảng.

Chúng ta có thể phát hiện phiên bản trình duyệt cũng - nhưng cùng một trình duyệt có thể chạy trên máy hiệu suất thấp và cao - vì vậy không giúp tình hình của chúng tôi

Bất kỳ ý tưởng?

Answer 1

requestAnimationFrame (rAF) có thể trợ giúp việc này.

Bạn có thể tìm ra tốc độ khung hình bằng cách sử dụng rAF. Chi tiết về điều đó tại đây: calculate FPS in Canvas using requestAnimationFrame. Tóm lại, bạn tìm ra sự khác biệt về thời gian giữa các khung sau đó chia 1 cho nó (ví dụ: 1/.0159s ~ = 62fps).

Lưu ý: với bất kỳ phương pháp nào bạn chọn, hiệu suất sẽ được quyết định tùy ý. Có lẽ mọi thứ trên 24 khung hình/giây có thể được coi là "hiệu suất cao".

Answer 2

Firefox có bản dựng trong danh sách các thẻ đồ họa không được hỗ trợ: https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers liên quan help acrticle.

Nhưng bạn chỉ gián tiếp có thể kiểm tra chúng khi truy cập vào các tính năng WebGL ...

http://get.webgl.org/troubleshooting/ dẫn bạn đến nhà cung cấp trình duyệt tương ứng khi có những vấn đề. Khi kiểm tra mã JS, bạn sẽ thấy rằng chúng kiểm tra qua

if (window.WebGLRenderingContext) { 
    alert('Your browser does not support WebGL'); 
} 

nếu bạn có thẻ đồ họa cập nhật.

Answer 3

Bạn có thể cân nhắc kiểm tra xem trình duyệt có hỗ trợ window.requestAnimationFrame, điều này cho biết bạn đang chạy trong trình duyệt mới hơn. Hoặc cách khác xem xét kiểm tra jQuery.fx.interval.

Sau đó, bạn có thể triển khai chức năng tùy chỉnh để đánh giá sức mạnh xử lý có sẵn. Bạn có thể thử sử dụng chức năng nới lỏng tùy chỉnh mà sau đó có thể chạy qua một hàm như .slideDown() để có ý tưởng về khả năng tính toán có sẵn.

Xem điều này answer cho một câu hỏi khác để có thêm ý tưởng về cách kiểm tra hiệu suất trong javascript.

Answer 4

Đây là nơi màn hình tải "trường học cũ" hữu ích, bạn có thể hiển thị nội dung phức tạp ở mặt trước (hoặc ẩn) không quan trọng nếu nó trông kỳ quặc hoặc kỳ quặc - và vào thời điểm bạn có nạp tài nguyên của bạn, bạn có thể quyết định về những hiệu ứng để kích hoạt hoặc vô hiệu hóa.

Về cơ bản, bạn sẽ sử dụng jcage được đề cập cho điều này, kiểm tra tốc độ khung hình (tức là sử dụng setInterval để kết hợp với bộ hẹn giờ). Điều này không phải lúc nào cũng đáng tin cậy 100% tuy nhiên vì nếu máy của họ quyết định trong trường hợp đó để thực hiện một triple-helix-backward-somersault (hoặc một cái gì đó nhiều khả năng) bạn sẽ nhận được một đọc tinh ranh. Có thể, tùy thuộc vào hoạt ảnh liên quan, để nâng cấp và hạ cấp hiệu ứng trong thời gian thực — nhưng điều này luôn phức tạp hơn với mã, cộng với phân tích của riêng bạn về tình huống thực sự đôi khi có thể làm giảm hiệu suất.

Answer 5

Tại sao không cho phép người dùng quyết định? Youtube (và nhiều trang chia sẻ video khác) thực hiện bộ chọn cho chất lượng phát lại, giờ đây là biểu tượng bánh răng có danh sách các độ phân giải bạn có thể chọn. Sẽ như vậy HD | SD hoặc Hi-Fi | Lo-Fi công việc chọn (hoặc thậm chí có ý nghĩa) trong ngữ cảnh của đơn đăng ký của bạn?

Answer 6

Nếu trình duyệt cực kỳ hiện đại và hỗ trợ requestAnimationFrame, bạn có thể tính tốc độ khung hình động trong thời gian thực và thả cài đặt hoạt ảnh cho máy chậm hơn. Đó là IE 10, Firefox 4, Chrome 10 và Safari 6.

Về cơ bản, bạn sẽ tạo chức năng 'đánh dấu' chạy trên cuộc gọi lại requestAnimationFrame() và theo dõi số lượng mili giây trôi qua giữa mỗi lần đánh dấu. Sau khi rất nhiều ve đã được đăng ký, bạn có thể trung bình nó ra để xác định tỷ lệ khung hình tổng thể của bạn. Nhưng có hai hãy cẩn thận như thế này:

1. Khi tab đang trong callbacks nền requestAnimationFrame sẽ bị đình chỉ - do đó, một, chậm trễ bất ngờ duy nhất giữa khung của vài giây đến nhiều phút không có nghĩa đó là một hình ảnh động chậm . Và:

2. Đơn giản chỉ cần có một thước đo JavaScript chạy trên mỗi khung hình động sẽ làm cho hoạt ảnh tổng thể giảm xuống một chút; không có cách nào để đo lường điều gì đó như thế mà không ảnh hưởng tiêu cực đến nó. Hãy nhớ, Heisenberg là một tên khốn.

Đối với các trình duyệt cũ hơn, tôi không biết cách nào đáng tin cậy để đo tốc độ khung hình. Bạn có thể mô phỏng nó bằng cách sử dụng setTimeout() nhưng nó sẽ không gần như chính xác - và có thể có tác động tiêu cực hơn đến hiệu năng.

Answer 7

Đây có thể là quyết định dựa trên rủi ro/lợi ích. Tôi nghĩ rằng bạn sẽ phải đưa ra quyết định quan trọng, nhưng khó khăn ở đây.

1) Nếu bạn quyết định có hai verions, bạn sẽ phải mất một thời gian để:

• hình ra nhanh, không kiểm tra xâm nhập
thời gian
• chi tiêu thực hiện mà
• cuộn nó vào sản xuất

và bạn có thể sẽ kết thúc với việc triển khai không chính xác, ví dụ tại thời điểm máy tính của tôi đang chạy 70 tab chrome, VLC với phim hoạt hình 1080p, nd IntellijIDEA

Xác suất MBP của tôi, mô hình 2012 sẽ được phát hiện là máy tính "chậm" cao, ít nhất là bây giờ.

Tích cực giả thực sự khó xác định.

2) Nếu bạn chọn một phiên bản, bạn sẽ phải chọn giữa HD và Lo-Fi, như @Patrick đã đề cập, một lần nữa là sai lầm trong quan điểm của tôi.

Điều tôi đề nghị là bạn vào Google Analytics, tìm ra phân phối trình duyệt (có, tôi biết rằng nó có thể gây hiểu lầm, nhưng có thể thử nghiệm khác) và dựa trên điều đó (nếu đa số người dùng là Chrome + IE/FF hiện đại đi kèm với phiên bản HD, NHƯNG dành một chút thời gian để tìm ra chiến lược tối ưu hóa

Luôn có những thứ có thể làm tốt hơn và nhanh hơn. nó, yo là một nhà phát triển cần phải đưa ra quyết định đó, nghĩa vụ của bạn là

3) Nếu từ bản phân phối Trình duyệt, bạn hiểu rằng bạn hoàn toàn phải đi với phiên bản Lo-Fi, tốt, cố gắng nghĩ là "hạ cấp" giá trị nó, và thực hiện nó chỉ nếu đó là phương sách cuối cùng của bạn.