重新加载页面时出现Javascript CSS规则错误

Question

我在我的网站上插入了许多带有Javascript的CSS规则。

类似以下内容：

let styleSheet = document.styleSheets[document.styleSheets.length - 1];

styleSheet.insertRule('hr,img{border:0 }', styleSheet.cssRules.length);

styleSheet.insertRule('a,input{outline:0!important }', styleSheet.cssRules.length); 

...

开始时一切正常。但是，我注意到，当我尝试重新加载页面或在同一浏览器选项卡中输入相同的url时，它会中断页面​​，并且无法正确显示任何内容。这是我得到的错误

Uncaught DOMException: Failed to read the 'cssRules' property from
'CSSStyleSheet': Cannot access rules

但是我发现，如果我在Chrome开发工具中启用了disable caching功能，那么一切都会正常运行，而且我永远不会出现任何错误。

有人知道为什么会这样吗，我该如何解决？

如果您需要更多详细信息，我会提供，请问一下。