JSF页面使用时内存快速增长，大量CSSStyleRules和CSSStyleSheets的成因是什么？

• 动态插入样式表后未正确清理：每次搜索刷新商品表格时如果逻辑是新增<style>标签、调用CSSOM API插入样式，旧样式没有被主动移除，会导致CSSStyleSheet实例持续累积无法回收
• PrimeFaces 6.x版本已知bug：PrimeFaces 6.0的动态组件（比如DataTable、Ajax更新组件）存在重复注入组件专属样式的问题，每次Ajax刷新商品表格就会插入一份重复的组件样式，框架没有自带清理逻辑
• 动态样式引用未释放：如果用JS动态给DOM绑定样式规则，或者使用了style属性的动态表达式，DOM被卸载后对应的样式引用没有被断开，会连带CSSStyleRule实例被残留引用无法回收
• 资源合并工具缓存泄漏：如果你启用了资源合并功能，旧版本的资源合并逻辑可能会重复缓存样式资源，无法自动清理过期缓存

• 打开Chrome DevTools的Elements面板，搜索<style>标签，多次执行商品搜索操作后查看<style>标签数量是否持续增长，如果是即可确认是动态插入样式未清理的问题
• 对比两次内存快照，筛选CSSStyleSheet/CSSStyleRule实例，点击实例查看保留树（Retainers），找到持有引用的上层对象，即可确认是PrimeFaces组件、自定义代码还是其他工具库持有了残留引用
• 临时关闭所有自定义动态样式逻辑，仅保留PrimeFaces原生的DataTable Ajax更新功能，复现操作后观察内存是否还会持续增长，即可排除自定义代码的问题

• 修复PrimeFaces重复注入样式问题：优先升级到PrimeFaces 6.0.10以上的兼容小版本，这个版本修复了动态组件重复插入样式的已知bug；如果暂时无法升级，可以添加全局JS钩子，每次Ajax请求完成后清理重复的PrimeFaces样式标签，参考代码如下：

$(document).on('pfAjaxComplete', function() {
  const existStyleIds = new Set();
  document.querySelectorAll('style[id^="primefaces"]').forEach(styleEl => {
    if (existStyleIds.has(styleEl.id)) {
      styleEl.remove();
    } else {
      existStyleIds.add(styleEl.id);
    }
  });
});

• 清理自定义动态样式逻辑：如果业务代码里有搜索后动态插入自定义样式的操作，每次执行新的搜索前，先把上一次插入的自定义样式标签移除，不要直接新增
• 优先修复detached DOM泄漏：样式泄漏通常和未清理的DOM引用关联，先修复detached DOM问题后，大部分连带的样式引用会被浏览器自动回收
• 升级OmniFaces兼容版本：OmniFaces 2.6.1的CombinedResourceHandler资源合并逻辑存在样式缓存残留的问题，可升级到OmniFaces 2.7.x的兼容版本修复

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