☰

YouTube Live Cpu Tamer

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

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

  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.1.0
  12. // @grant       none
  13. // ==/UserScript==
  14.  
  15. /*
  16. [update]
  17. fix for realtime live.
  18. */
  19. (function(){
  20.   const THROTTLE = 1000;
  21.   let items = document.querySelector('yt-live-chat-ticker-renderer #items');
  22.   let site = {
  23.     get: {
  24.       containers: (items) => items.querySelectorAll('#container'),
  25.       container: (node) => node.querySelector('#container'),
  26.     },
  27.   };
  28.   let core = {
  29.     initialize: function(){
  30.       if(items === null) return setTimeout(core.initialize, 1000);
  31.       let containers = site.get.containers(items);
  32.       Array.from(containers).forEach(container => {
  33.         core.observeContainer(container);
  34.       });
  35.       observe(items, function(records){
  36.         records.forEach(r => r.addedNodes.forEach(node => {
  37.           let container = site.get.container(node);
  38.           core.observeContainer(container);
  39.         }));
  40.       });
  41.       core.addStyle();
  42.     },
  43.     observeContainer: function(container){
  44.       container.parentNode.style.background = container.style.background;
  45.       let lastUpdated = Date.now();
  46.       observe(container, function(records){
  47.         let now = Date.now();
  48.         if(now - lastUpdated < THROTTLE) return;
  49.         lastUpdated = now;
  50.         container.parentNode.style.background = container.style.background;
  51.       }, {attributes: true, attributeFilter: ['style']});
  52.     },
  53.     addStyle: function(name = 'style'){
  54.       if(core.html[name] === undefined) return;
  55.       let style = createElement(core.html[name]());
  56.       document.head.appendChild(style);
  57.     },
  58.     html: {
  59.       style: () => `
  60.         <style type="text/css">
  61.           yt-live-chat-ticker-renderer #items > *{
  62.             border-radius: 999px;
  63.           }
  64.           yt-live-chat-ticker-renderer #items > * > #container{
  65.             background: none !important;
  66.           }
  67.         </style>
  68.       `,
  69.     },
  70.   };
  71.   const createElement = function(html = '<span></span>'){
  72.     let outer = document.createElement('div');
  73.     outer.innerHTML = html;
  74.     return outer.firstElementChild;
  75.   };
  76.   const observe = function(element, callback, options = {childList: true, attributes: false, characterData: false, subtree: false}){
  77.     let observer = new MutationObserver(callback.bind(element));
  78.     observer.observe(element, options);
  79.     return observer;
  80.   };
  81.   core.initialize();
  82. })();