JS修改CSSStyleRule时浏览器未同步更新页面渲染问题咨询

问题表现 #

通过JS操作CSS对象模型（CSSOM）时，会出现规则已更新但视图不刷新的问题，常见触发操作包括：

• 调用CSSStyleSheet实例的insertRule()、deleteRule()方法增删样式规则
• 调用CSSStyleRule.style.setProperty()方法修改已有规则的CSS属性值
  上述操作执行后，读取CSSOM可以确认规则已经修改完成，但页面不会同步渲染出对应的样式变化。这类变更只有在触发重排（reflow）后才会实际生效，比如修改元素任意属性（哪怕是浏览器不识别的无效属性）后，新样式才会展示在页面上。
  测试环境：Edge 及所有Chromium内核浏览器

推荐实现方式 #

不要使用修改元素class字符串、增删无意义自定义属性这类hack手段触发更新，根据使用场景选择对应标准方案即可：

• 单元素内联样式修改场景
  直接操作目标元素的style属性即可，比如document.querySelector('.target').style.fontSize = '16px'，这类操作浏览器会自动标记样式脏区，在下次渲染帧自动更新视图，不需要额外触发重排。
• 批量新增/修改样式规则场景
  优先使用构造式样式表（Constructable Stylesheets）能力：先通过new CSSStyleSheet()创建独立的样式表实例，完成所有规则的增删改操作后，再将样式表统一挂载到文档或影子DOM的adoptedStyleSheets列表中。挂载动作会自动触发浏览器的样式重算，所有规则会一次性生效，不会出现更新不同步的问题。
  参考代码：

  // 初始化独立样式表
  const customSheet = new CSSStyleSheet();
  // 批量执行规则操作
  customSheet.insertRule('.card { padding: 12px; border: 1px solid #eee; }');
  customSheet.cssRules[0].style.setProperty('border-radius', '6px');
  // 挂载到文档，样式自动生效
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, customSheet];
  

• 必须操作已内联/外链引入的存量样式表场景
  规则修改完成后，不需要修改DOM属性触发重排，只需读取一次会触发强制布局计算的属性即可，比如document.body.offsetHeight。浏览器为了保证这类布局属性返回值的准确性，会自动完成所有待处理的样式计算、重排任务，让新规则立即生效。这种方式是浏览器标准行为，不属于hack，性能开销远低于DOM修改操作。

  常见的可触发强制重排的属性/API包括：offsetHeight、offsetWidth、clientTop、getBoundingClientRect()、scrollTo()等，所有需要返回实时元素布局信息的API都会触发这一流程。

内容的提问来源于stack exchange，提问作者David Min