原生JavaScript(JS)修改添加CSS樣式表 （更好的性能）

如要增加一個 CSS

body {
 overflow: hidden;
}

低性能方案

網絡一般流傳的都是：通過操作 DOM 的style 屬性來簡潔改變 CSS 的方法
但有肉眼可見的延遲（在后面加個過渡動畫你就知道）

document.querySelector("body").style.overflow= "hidden";

高性能方案

但是其實有一種直接操作 CSS 的方法
這種性能比第一種要好到不知哪里去，肉眼感覺不到延遲
CSSStyleSheet.insertRule()-MDN

insertRule 函數代碼示例

var css0 = document.styleSheets[0];
css0.insertRule("body {overflow: hidden;}", css0.rules.length);

注： insertRule() 最后的參數是 Index, 值為 0 時表示放在樣式表的最前面（最前面的樣式會被后面的樣式效果覆蓋，所以推薦寫 css0.rules.length）
所以樣式排序稍微麻煩點，但你可以很輕松地想出辦法定位的。
更多用法，自己把 css0 打印出來就知道了，我只是搞后端的，你問我我也不懂。

效果

在來個示例1


示例2（添加到CSS表的最后，優先級最高）


示例3（在最后一個CSS表的末尾添加，優先級MAX？，但速度最慢，因為要等前面CSS解析完）

   // CSS0
var css= document.styleSheets;

var css0 = css[css.length-1];
var css0Last = css0.cssRules.length;
css0.insertRule("body {overflow: hidden;}", css0Last+0);
css0.insertRule("div#loading, a[name=top] {   background-color: #f0f0f0;  z-index: 1099; position: fixed; }", css0Last+1);
css0.insertRule("#header,#leftcontentcontainer,#profile_block,.catListTitle,#comment_nav{display:none!important}", css0Last+2);