Phát hiện phần cứng chậm/trình duyệt chậm với JavaScript

Question

Trang web của tôi có nhiều hoạt ảnh và chuyển tiếp CSS, tất cả đều hiển thị rất, rất chậm trong các trình duyệt nhất định (may mắn, không phải hầu hết trong số chúng) và phần cứng cũ hơn. Tôi đang cố tránh UA ngửi; có cách nào để phát hiện các trình duyệt hoặc cấu hình phần cứng bằng JavaScript hay thư viện JS và sau đó tải các phiên bản không hoạt ảnh cho các trình duyệt mà tôi biết không có hỗ trợ tốt cho các tính năng đó không?

Chỉ để làm sáng tỏ mọi sự mơ hồ, tôi không tìm kiếm thứ gì đó như Modernizr.

Answer 1

Đây là không phải là đủ để phát hiện một hệ thống chậm, nhưng sẽ giảm thiểu tác động đối với những người sử dụng hệ thống như vậy:

Use CSS transitions và kích hoạt chúng với jQuery (bằng cách chuyển đổi qua lại các lớp học khi cần thiết), giảm tải yếu tố hình động cho công cụ hiển thị sao cho đáp ứng chức năng của trang sẽ không bị ảnh hưởng ít nhất.

Sử dụng các thuộc tính CSS đúng CSS. Ví dụ: thay vì hoạt ảnh top:10px;left:10px; thuộc tính, hãy sử dụng CSS transformtransform: translateX(10px) translateY(10px) sẽ hiệu quả hơn.

Tăng tốc phần cứng (GPU) kích hoạt bằng cách thêm transform: translate3d(0,0,0); hoặc cách giải quyết tương tự cho phần tử đích.

Nếu bạn đang hoàn toàn gắn liền với hình ảnh động, hoặc cần phải kích hoạt chức năng dự phòng (ẩn/hiển thị/đặt lại vị trí các yếu tố) mà không CSS cho một số lý do, you could try a Modernizr workaround:

if(!Modernizr.csstransitions) { 
    /*fallback logic*/ 
}