Phát hiện trình duyệt điện toán khả dụng thực tế javascript

Question

Tôi đang phát triển một trang web lớn với rất nhiều hình ảnh và hoạt ảnh. Vấn đề của tôi là hình ảnh động và hình ảnh mất rất nhiều sức mạnh tính toán khả dụng của trình duyệt và đôi khi, nó có thể bão hòa và chỉ bị sập.

Vì vậy, tôi muốn kiểm tra sức mạnh tính toán khả dụng thực tế của trình duyệt để biết khi nào tôi có thể hiển thị hoạt ảnh hoặc tải hình ảnh.

Trong web, tôi tìm phương thức Document.readyState nhưng nó chỉ cung cấp cho tôi thông tin: khi trang được tải và nếu tài nguyên bên ngoài được tải đầy đủ. Tuy nhiên, trình duyệt có thể vẽ hình động hoặc tải một số tài nguyên bên ngoài khác ...

Tôi chỉ muốn biết trình duyệt có bận hay không và nếu tôi có thể cung cấp thêm công việc (như hình ảnh đã tải hoặc hiển thị hình động)).

Trong Google Chrome, chúng ta có thể làm điều này với giao diện điều khiển:

Tại sao không lập trình?

Lưu ý, Tôi tìm thấy câu trả lời this trong Stack Overflow. Bài viết của tôi không phải là một bản sao bởi vì tôi muốn tìm thời điểm tốt nhất để tải hình ảnh của tôi và hiển thị hình ảnh động của tôi Tôi không thể sử dụng thử nghiệm này, lâu, nhiều lần trong mã của tôi.

Mọi trợ giúp đều được đánh giá cao. Cho tôi biết nếu bạn có một số câu hỏi hoặc nhận xét.

Answer 1

Tất nhiên, tôi biết cách tốt nhất là cải thiện hiệu suất. Có rất nhiều cách để cải thiện hiệu suất và rất nhiều nỗ lực cần thiết. Con đường lý tưởng tôi liệt kê ở đây: chi phí

1.reduce mạng (nén \ concat \ cdn ...)

chi phí

2.reduce cho cpu \ bộ nhớ (css-transform-gpu \ giảm-dom- cây \ virtual-dom \ shadow-dom ...)

3. [quan trọng nhất] giữ tất cả mọi thứ trong tầm kiểm soát và đưa ra lời hứa. Hình ảnh \ css \ js, bạn có thể sử dụng onload để kích hoạt tiếp theo; hoạt hình, bạn có thể sử dụng điều khiển js thông qua api (https://css-tricks.com/controlling-css-animations-transitions-javascript/), hoặc sử dụng một cái gì đó như move.js. Quá trình này giống như một trò chơi trên web, có thể bạn cũng cần có chế độ xem tải.

4.then bạn biết Đó là nhàn rỗi hay không

--- câu trả lời cũ ---

tôi đã thực hiện một gói NPM dựa trên ý tưởng này, https://github.com/postor/cpu-stat-browser

--- câu trả lời cũ - -

Tôi sử dụng setTimeout để phát hiện mức sử dụng cpu, nhật ký nhỏ hơn, bộ vi xử lý cpu, điều này sẽ được tính trong trang/trình duyệt, bạn có thể bắt đầu công việc của mình và dừng điều này khi số lượng nhật ký đủ lớn.

let k = 0 
 
let profilling = true 
 
let interval = null 
 
let period = 1000 
 

 
console.log = (x) => { 
 
    document.write(x + '<br>') 
 
    window.scrollTo(0, document.body.scrollHeight); 
 
} 
 

 
start() 
 

 
interval = setInterval(() => { 
 
    console.log(k) 
 
    k = 0 
 
}, period) 
 

 
async function start() { 
 

 
    while (profilling) { 
 
    await step() 
 
    } 
 
} 
 

 
function stop() { 
 
    clearInterval(interval) 
 
    profilling = false 
 
} 
 

 
async function step() { 
 
    return new Promise((resolve, reject) => { 
 
    setTimeout(() => { 
 
     k++ 
 
     resolve() 
 
    }) 
 
    }) 
 
}

đoạn chạy để stat cpu của bạn, trong khi bạn có thể chạy một cái gì đó tốn kém và xem như thế nào log phản ứng

Answer 2

Kiểm tra việc sử dụng CPU có thể không thể hữu ích nếu bạn đang cố gắng để tối ưu hóa hình động. Bạn nên tránh hiển thị đồ họa trên CPU. Các trình duyệt hiện đại có thể làm được rất nhiều với GPU và lý tưởng là nơi hoạt ảnh của bạn sẽ chạy.

Dưới đây là một vài điều bạn có thể thử. Họ làm việc cho tôi.

Optimize hình ảnh động của bạn

Nếu bạn đang tạo hiệu ứng động các thuộc tính đúng, sau đó bạn có thể tận dụng GPU. Tôi tin rằng các thuộc tính CSS tăng tốc của GPU là transform, opacity và filter (source). Nếu bạn đang làm động các thuộc tính khác (ví dụ: margin, left, width), có thể bạn sẽ thấy nhiều trò đùa và sự cố hơn. Điều này đặc biệt đúng với các yếu tố vị trí tương đối, bởi vì nó gây ra một reflow.

suy thoái Graceful

Tôi đã thành công tốt bằng cách sử dụng phương pháp FPS bạn liên kết đến. requestAnimationFrame thực hiện chính xác những gì bạn cần. Nó cho bạn biết khi nào trình duyệt sẵn sàng hiển thị khung khác. Đó là vào bạn những gì để làm với thông tin đó.

Tôi kiểm tra tốc độ khung hình bên trong cuộc gọi lại requestAnimationFrame để xác định loại hoạt ảnh và hiệu ứng nào sẽ hiển thị cho người dùng. Cách tiếp cận của tôi là giữ một loạt thời gian hiển thị trong quá khứ, sau đó trung bình họ thỉnh thoảng đưa ra quyết định.

Nếu bạn cho rằng hầu hết người dùng của mình có thể chạy hoạt ảnh, hãy bắt đầu với phiên bản chất lượng cao và làm suy giảm nếu bạn phát hiện thời gian hiển thị chậm. Ngược lại, nếu hầu hết người dùng sẽ không thể hiển thị đồ họa ưa thích của bạn, hãy nâng cấp nếu bạn phát hiện thời gian hiển thị tốt.

WebGL

WebGL là nhanh như nó được cho đồ họa trình duyệt. Nếu bạn có một số hoạt ảnh toàn màn hình, hãy cân nhắc chuyển chúng sang WebGL. Nói chung WebGL sẽ không giúp ích gì nhiều khi kết xuất các thành phần nhỏ hơn vì bạn nhanh chóng đạt được số lượng ngữ cảnh tối đa (16?).