☰

YouTube Live Cpu Tamer

降低超级聊天的高CPU利用率。外观完全没有变化。

当前为 2020-02-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        YouTube Live Cpu Tamer
  3. // @name:ja     YouTube Live Cpu Tamer
  4. // @name:zh-CN  YouTube Live Cpu Tamer
  5. // @description It reduces the high CPU usage on Super Chats with nothing to lose.
  6. // @description:ja スーパーチャットによる高いCPU使用率を削減します。見た目は何も変わりません。
  7. // @description:zh-CN 降低超级聊天的高CPU利用率。外观完全没有变化。
  8. // @namespace   knoa.jp
  9. // @include     https://www.youtube.com/live_chat*
  10. // @include     https://www.youtube.com/live_chat_replay*
  11. // @version     1.0.1
  12. // @grant       none
  13. // ==/UserScript==
  14.  
  15. (function(){
  16.   const THROTTLE = 1000;
  17.   let items = document.querySelector('yt-live-chat-ticker-renderer #items');
  18.   let site = {
  19.     get: {
  20.       container: (node) => node.querySelector('#container'),
  21.     },
  22.   };
  23.   let core = {
  24.     initialize: function(){
  25.       if(items === null) return setTimeout(core.initialize, 1000);
  26.       observe(items, function(records){
  27.         records.forEach(r => r.addedNodes.forEach(node => {
  28.           let container = site.get.container(node);
  29.           container.parentNode.style.background = container.style.background;
  30.           let lastUpdated = Date.now();
  31.           observe(container, function(records){
  32.             let now = Date.now();
  33.             if(now - lastUpdated < THROTTLE) return;
  34.             lastUpdated = now;
  35.             container.parentNode.style.background = container.style.background;
  36.           }, {attributes: true, attributeOldValue: true, attributeFilter: ['style']});
  37.         }));
  38.       });
  39.       core.addStyle();
  40.     },
  41.     addStyle: function(name = 'style'){
  42.       if(core.html[name] === undefined) return;
  43.       let style = createElement(core.html[name]());
  44.       document.head.appendChild(style);
  45.     },
  46.     html: {
  47.       style: () => `
  48.         <style type="text/css">
  49.           yt-live-chat-ticker-renderer #items > *{
  50.             border-radius: 999px;
  51.           }
  52.           yt-live-chat-ticker-renderer #items > * > #container{
  53.             background: none !important;
  54.           }
  55.         </style>
  56.       `,
  57.     },
  58.   };
  59.   const createElement = function(html = '<span></span>'){
  60.     let outer = document.createElement('div');
  61.     outer.innerHTML = html;
  62.     return outer.firstElementChild;
  63.   };
  64.   const observe = function(element, callback, options = {childList: true, attributes: false, characterData: false, subtree: false}){
  65.     let observer = new MutationObserver(callback.bind(element));
  66.     observer.observe(element, options);
  67.     return observer;
  68.   };
  69.   core.initialize();
  70. })();