JavaScript向head注入大体积CSS未完全加载，仅加载一半且末尾带省略号

问题重现 #

以下代码尝试将200KB的CSS字符串通过JavaScript注入页面，但实际仅注入一半内容，末尾出现省略号：

const cssJs ='/*here comes my css - the css here is 200kb in size*/';
function CSSString2CSSStyleSheet ( cssJs ) {
const style = document.createElement ( 'style' );
style.innerText = cssJs;
style.title = 'cssJs';
document.head.appendChild ( style );
const {sheet} = style;
return sheet;
}
CSSString2CSSStyleSheet ( cssJs );

问题原因 #

部分浏览器对innerText存在隐性字符长度限制，且innerText会自动处理字符串中的格式（如换行、空格），可能导致超长CSS内容被截断；另外如果CSS本身存在语法错误，浏览器也会中断解析并截断后续内容。

解决方案 #

1. 替换innerText为textContent #

textContent会原样传递原始字符串，没有innerText的格式处理和隐性长度限制，是最直接的解决方法：

const cssJs ='/*here comes my css - the css here is 200kb in size*/';
function CSSString2CSSStyleSheet ( cssJs ) {
const style = document.createElement ( 'style' );
style.textContent = cssJs; // 替换为textContent
style.title = 'cssJs';
document.head.appendChild ( style );
const {sheet} = style;
return sheet;
}
CSSString2CSSStyleSheet ( cssJs );

2. 用CSSStyleSheet的insertRule批量注入 #

如果CSS内容极大，可尝试拆分规则后逐个插入，同时能捕获语法错误：

const cssJs ='/*here comes my css - the css here is 200kb in size*/';
function CSSString2CSSStyleSheet ( cssJs ) {
  const sheet = new CSSStyleSheet();
  // 按闭合括号拆分规则，过滤空内容
  const rules = cssJs.split(/(?<=\})/).filter(rule => rule.trim());
  rules.forEach(rule => {
    try {
      sheet.insertRule(rule);
    } catch (e) {
      console.warn('插入CSS规则失败:', rule, e);
    }
  });
  // 将样式表附加到页面
  document.head.appendChild(document.createElement('style')).adoptedStyleSheet = sheet;
  return sheet;
}
CSSString2CSSStyleSheet ( cssJs );

3. 验证CSS语法完整性 #

检查CSS字符串是否存在未闭合的括号、错误的属性值等语法问题，这类错误会导致浏览器提前终止解析，截断后续内容。

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