动态插入 <style> 标记时是不是会对性能造成重大影响？

Posted 2023-03-06

【中文标题】动态插入 <style> 标记时是不是会对性能造成重大影响？

【英文标题】：Is there major performance hit when insert <style> tag dynamically?动态插入 <style> 标记时是否会对性能造成重大影响？

【发布时间】：2021-10-30 13:43:28

【问题描述】：

我所处的环境必须使用 AngularJS/Ng7，而大多数代码仍停留在 Ng1 世界中。由于各种情况，我想暂时覆盖某些角度组件外部的某些样式。所以我想出了一种方法来在我的组件中动态注入一个<style> 标签，它的 CSS 覆盖了父级 html 元素的几个级别。

一切正常，我没有观察到任何页面闪烁、重新加载、滞后或副作用……但我担心我看不到的东西并不意味着没有影响。

我想知道，以这种方式注入 <style> 标记，然后在组件被销毁时将其与组件一起删除，是否会产生我不知道的任何性能影响和潜在副作用？

  constructor(
    private elRef: ElementRef,
    private renderer2: Renderer2
  ) 
        const style = this.renderer2.createElement('style') as HTMLStyleElement;
    style.innerHTML = `
      #main .helloworld 
        background-color: rebeccapurple !important;
      
    `;

    (this.elRef.nativeElement as HTMLElement).append(style);
  

上面在运行时会生成类似这样的东西：

<my-component>
  <style>
      #main .helloworld 
        background-color: rebeccapurple !important;
      
  </style>
  <div>...stuff</div>
</my-component>

【问题讨论】：

<style> 属于head-element。在body 中，它将是一个无效的HTML 标记，由于scope 属性的弃用，它不会传递任何Markup Validator。因此，style tag 首先不应与body 一起使用。

我不是在问我是否可以在正文中添加<style>。如果我生活在一个完美的世界中，我会完全摆脱 Ng1 并自己解决所有问题。关键是我不能，我必须解决这个问题。

它应该是因为它只有在浏览器自动更正确实支持它的情况下才有效。如果浏览器放弃了该功能，或者用户使用的 enw 浏览器一开始就没有添加此功能，那么样式将被弄乱，因为无效标记未被读取，因此根本不应用。因此，当通过正文中的 stle 标签注入样式时，可能会出现 ovios 的不利影响。

【参考方案1】：

只要