YouTube CPU Tamer by AnimationFrame

Reduce Browser's Energy Impact for playing YouTube Video

Від 14.09.2021. Дивіться остання версія.

Автор
𝖢𝖸 𝖥𝗎𝗇𝗀
Рейтинги
0 0 0
Версія
2021.09.14
Створено
29.08.2021
Оновлено
14.09.2021
Size
7,0 кБ
Ліцензія
MIT
Відноситься до

Inspired by kona's YouTube CPU Tamer

Description

This is for all kinds of YouTube applications, including main page, embedded video, and live chat.

- Faster
- More Stable
- Lower Battery Consumption

Note1: This hijacks Web APIs: setTimeout, setInterval, clearTimeout, and clearInterval
Note2: This uses setInterval(..., 250ms) instead of requestAnimationFrame for background running.
Note3: If Timer Throttling2 occurs in background running, the interval would be increased, say 1000ms.

Remarks

This userscript hijacks setTimeout & setInterval leading different browser behaviors as follows:

Case 1A (Active Page)

let f=function(){console.log('hello world')};
setTimeout(f,100);setTimeout(f,100);setTimeout(f,100);

Native: print out "hello world" 3 times.
Modified: print out "hellow world" 1 time. (in the same AnimationFrame)

Case 1B (Active Page)

let f=function(){console.log('hello world')};
setTimeout(f,100);setTimeout(f,110);setTimeout(f,120);

Native: print out "hello world" 3 times.
Modified: print out "hellow world" 1 ~ 3 time(s) depending on the execution time of function handler, the responsiveness of browser, and the segregation of AnimationFrames;

Case 1C (Active Page)

let f=function(){console.log('hello world')};
setTimeout(f,100);setTimeout(f,200);setTimeout(f,300);

Native: print out "hello world" 3 times.
Modified: print out "hello world" 3 times. (in 3 AnimationFrames)

Case 2A (Active Page)

clearInterval(window.f1s); clearInterval(window.f2s); let w1=0,w2=0;let f1 = ()=>{w1++}, f2= ()=>{w2++}; window.f1s=setInterval(f1,70); window.f2s=setInterval(f2, 140); setTimeout(()=>{console.log(w1,w2);},3000)
Native: print out "42 21".
Modified: print out "42 21".

Case 2B (Background Application)

clearInterval(window.f1s); clearInterval(window.f2s); let w1=0,w2=0;let f1 = ()=>{w1++}, f2= ()=>{w2++}; window.f1s=setInterval(f1,70); window.f2s=setInterval(f2, 140); setTimeout(()=>{console.log(w1,w2);},3000)
Native (Timer Throttling2): print out values between 3 and 4. (e.g. "4 4", "4 3")
Modified, if no Timer Throttling: print out values between 12 and 13 (e.g. "13 12", "13 13", "12 12", "13 12").
Remarks: 3000/250 = 12

Case 3A (Active Page)

clearInterval(window.f1s); clearInterval(window.f2s); let w1=0,w2=0;let f1 = ()=>{w1++}, f2= ()=>{w2++}; window.f1s=setInterval(f1,5); window.f2s=setInterval(f2, 10); setTimeout(()=>{console.log(w1,w2);},3000)
Native: print out "600 300"1.
Modified: print out "600 301"1 or "600 300"1.

Case 3B (Background Application)

clearInterval(window.f1s); clearInterval(window.f2s); let w1=0,w2=0;let f1 = ()=>{w1++}, f2= ()=>{w2++}; window.f1s=setInterval(f1,5); window.f2s=setInterval(f2, 10); setTimeout(()=>{console.log(w1,w2);},3000)
Native (Timer Throttling2): print out values between 3 and 4. (e.g. "4 4", "4 3")
Modified, if no Timer Throttling: print out values between 12 and 13 (e.g. "13 12", "13 13", "12 12", "13 12").
Remarks: 3000/250 = 12

1 Actual values could be smaller due to your UI/network activity.
2 Timer Throttling is the browser's native behavior on background applications.

Disclaimer: The suggested results and behaviors are for reference only. They are not guaranteed and depend on your OS and browser.

Further Reading - Timer Throttling

What Happens to setTimeout() / setInterval() Timers Running on Inactive Browser Tabs ?
Heavy throttling of chained JS timers beginning in Chrome 88

Sample Testing Links

Also see...