It reduces the high CPU usage on Super Chats with nothing to lose.
Per
// ==UserScript==
// @name YouTube Live Cpu Tamer
// @name:ja YouTube Live Cpu Tamer
// @name:zh-CN YouTube Live Cpu Tamer
// @description It reduces the high CPU usage on Super Chats with nothing to lose.
// @description:ja スーパーチャットによる高いCPU使用率を削減します。見た目は何も変わりません。
// @description:zh-CN 降低超级聊天的高CPU利用率。外观完全没有变化。
// @namespace knoa.jp
// @include https://www.youtube.com/live_chat*
// @include https://www.youtube.com/live_chat_replay*
// @version 1.1.1
// @grant none
// ==/UserScript==
/*
[update] 1.1.1
minor fix.
*/
(function(){
const THROTTLE = 1000;
let site = {
get: {
items: () => document.querySelector('yt-live-chat-ticker-renderer #items'),
containers: (items) => items.querySelectorAll('#container'),
container: (node) => node.querySelector('#container'),
},
};
let core = {
initialize: function(){
let items = site.get.items();
if(items === null) return setTimeout(core.initialize, 1000);
let containers = site.get.containers(items);
Array.from(containers).forEach(container => {
core.observeContainer(container);
});
observe(items, function(records){
records.forEach(r => r.addedNodes.forEach(node => {
let container = site.get.container(node);
core.observeContainer(container);
}));
});
core.addStyle();
},
observeContainer: function(container){
container.parentNode.style.background = container.style.background;
let lastUpdated = Date.now();
observe(container, function(records){
let now = Date.now();
if(now - lastUpdated < THROTTLE) return;
lastUpdated = now;
container.parentNode.style.background = container.style.background;
}, {attributes: true, attributeFilter: ['style']});
},
addStyle: function(name = 'style'){
if(core.html[name] === undefined) return;
let style = createElement(core.html[name]());
document.head.appendChild(style);
},
html: {
style: () => `
<style type="text/css">
yt-live-chat-ticker-renderer #items > *{
border-radius: 999px;
}
yt-live-chat-ticker-renderer #items > * > #container{
background: none !important;
}
</style>
`,
},
};
const createElement = function(html = '<span></span>'){
let outer = document.createElement('div');
outer.innerHTML = html;
return outer.firstElementChild;
};
const observe = function(element, callback, options = {childList: true, attributes: false, characterData: false, subtree: false}){
let observer = new MutationObserver(callback.bind(element));
observer.observe(element, options);
return observer;
};
core.initialize();
})();