Wykryj rzeczywistą dostępną moc obliczeniową javascript

Question

Rozwijam ogromną stronę internetową z wieloma obrazami i animacjami. Moim problemem jest to, że animacje i obrazy zajmują dużo dostępnej mocy obliczeniowej przeglądarki, a czasami mogą być nasycone i po prostu się zawieszają.

Chcę przetestować rzeczywistą dostępną moc obliczeniową przeglądarki, aby wiedzieć, kiedy mogę wyświetlać animacje lub ładować obrazy.

W Internecie znajduję metodę Document.readyState, ale daje mi ona tylko informację: kiedy strona jest załadowana i czy zewnętrzne zasoby są w pełni załadowane. Przeglądarka może jednak malować animacje lub ładować inne zewnętrzne zasoby ...

Chcę tylko wiedzieć, czy przeglądarka jest zajęta, czy nie i czy mogę nadać jej więcej zadań (takich jak załadowane obrazy lub animacje displayowe)).

W Google Chrome, możemy to zrobić z poziomu konsoli:

Dlaczego nie programowo?

Uwaga, Znalazłem odpowiedź this w przepełnieniu stosu. Mój post nie jest duplikatem, ponieważ chcę znaleźć najlepszy moment, aby załadować mój obraz i wyświetlić moje animacje. Nie mogę użyć tego testu, do długiego, kilka razy w moim kodzie.

Każda pomoc jest doceniana. Powiedz mi, jeśli masz jakieś pytania lub komentarze.

Answer 1

Oczywiście wiem, że najlepszym sposobem jest poprawa wydajności. Istnieje wiele sposobów na poprawę wydajności i wiele wysiłku. Idealna ścieżka Wymienię tutaj: koszt

1.reduce do sieci (kompresować \ concat \ cdn ...)

koszt

2.Reduce dla CPU \ pamięci (CSS-transform-GPU \ zmniejszyć-dom- tree \ virtual-dom \ shadow-dom ...)

3. [najważniejsze] zachowaj wszystko pod kontrolą i dotrzymaj obietnic. Image \ css \ js, możesz użyć onload, aby aktywować następny; animacja można użyć kontrolki js poprzez api (https://css-tricks.com/controlling-css-animations-transitions-javascript/) lub użyć czegoś takiego jak move.js. To postępowanie, podobnie jak w przypadku gry internetowej, prawdopodobnie wymaga również widoku ładowania.

4.then wiesz To bezczynny lub nie

--- stary odpowiedź ---

zrobiłem paczkę npm na podstawie tego pomysłu, https://github.com/postor/cpu-stat-browser

--- stary odpowiedź - -

Używam setTimeout do wykrywania użycia procesora, dzienników mniejszych, cpu zajęty, to będzie liczyć się w użyteczności na zewnątrz strony/przeglądarki, możesz rozpocząć pracę i zatrzymać, gdy liczba w logu jest wystarczająco duża.

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() 
 
    }) 
 
    }) 
 
}

run fragment stat procesora, podczas gdy można uruchomić coś kosztownego i zobaczyć jak reaguje dziennika

Answer 2

Sprawdzanie użycie procesora może nie być pomocne, jeśli próbujesz optymalizacji animacje. Powinieneś unikać renderowania grafiki na procesorze. Współczesne przeglądarki mogą zdziałać wiele dzięki procesorowi graficznemu, a najlepiej tam, gdzie będą działać twoje animacje.

Oto kilka rzeczy, które możesz wypróbować. Pracują dla mnie.

zoptymalizować swoje animacje

Jeśli animowanie odpowiednie właściwości, a następnie można wykorzystać GPU. Sądzę, że akcelerowane przez GPU właściwości CSS to: transform, opacity i filter (source). Jeśli animujesz inne właściwości (np. margin, left, width), prawdopodobnie zobaczysz więcej szarpnięć i awarii. Jest to szczególnie prawdziwe w przypadku względnie pozycjonowanych elementów, ponieważ powoduje to ponowne napłynięcie.

Płynnego degradacja

miałem duży sukces przy użyciu metody fps powiązany. requestAnimationFrame robi dokładnie to, czego potrzebujesz. Mówi, kiedy przeglądarka jest gotowa do renderowania kolejnej klatki. Od Ciebie zależy, co zrobić z tymi informacjami.

Sprawdzam liczbę klatek wewnątrz funkcji oddzwaniania requestAnimationFrame, aby ustalić, jaki rodzaj animacji i efektów należy wyświetlić użytkownikowi. Moje podejście polega na zachowaniu szeregu przeszłych czasów renderowania, a następnie na średnim podejmowaniu decyzji.

Jeśli uważasz, że większość użytkowników będzie w stanie wyświetlać animacje, zacznij od wersji wysokiej jakości i pogarsz jeśli wykryje powolne renderowanie. I odwrotnie, jeśli większość użytkowników nie będzie w stanie wyrenderować twojej wymyślnej grafiki, uaktualnij ją, jeśli wykryjesz dobry czas renderowania.

WebGL

WebGL jest tak szybko, jak to robi dla grafiki w przeglądarce. Jeśli masz jakieś animacje pełnoekranowe, rozważ przeniesienie ich do WebGL. Generalnie WebGL nie pomoże w renderowaniu mniejszych komponentów, ponieważ szybko osiągasz maksymalną liczbę kontekstów (16?).