如何在不增大HTML体积的前提下优化JS字符串拼接性能？

针对你遇到的移动端字符串拼接导致长任务问题，以下几种方案可以在不增大HTML体积的前提下降低耗时：

1. 用数组join替代多次+拼接 #

多次使用+拼接字符串时，每次操作都会创建新的字符串实例，带来额外的内存分配开销。改用数组存储所有片段后一次性join，能减少内存操作次数，提升效率：

console.time("T");
const parts = [
  "url('data:image/png;base64,UNIZQUE",
  'A'.repeat(500),
  "UNIAQUE",
  'B'.repeat(250),
  "UNIQUE",
  'C'.repeat(150),
  "UNIBQUE')"
];
document.body.style.background = parts.join('');
console.timeEnd("T");

2. 移除自定义copy函数，直接调用原生repeat #

你的copy函数只是封装了原生String.repeat，直接调用原生方法可以避免函数调用的微小开销，同时代码更简洁。

3. 用Web Worker后台处理字符串拼接（彻底解决长任务） #

移动端主线程资源有限，字符串拼接的计算会阻塞主线程导致长任务。将拼接逻辑放到Web Worker中执行，主线程仅负责接收结果并设置样式，完全避免主线程阻塞：

// 主线程代码
const workerCode = `
self.onmessage = function(e) {
  const { uniqueSegments, repeatPairs } = e.data;
  const parts = [
    "url('data:image/png;base64,",
    uniqueSegments[0],
    repeatPairs[0][0].repeat(repeatPairs[0][1]),
    uniqueSegments[1],
    repeatPairs[1][0].repeat(repeatPairs[1][1]),
    uniqueSegments[2],
    repeatPairs[2][0].repeat(repeatPairs[2][1]),
    uniqueSegments[3],
    "')"
  ];
  self.postMessage(parts.join(''));
};
`;

const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

worker.postMessage({
  uniqueSegments: ["UNIZQUE", "UNIAQUE", "UNIQUE", "UNIBQUE"],
  repeatPairs: [['A', 500], ['B', 250], ['C', 150]]
});

worker.onmessage = function(e) {
  document.body.style.background = e.data;
  URL.revokeObjectURL(blob);
  worker.terminate();
};

这种方式不会增加HTML体积（Worker代码通过Blob生成，无需额外文件），且主线程的任务耗时可忽略不计，彻底消除长任务告警。

4. 预缓存重复片段（针对多次执行场景） #

如果这段背景图设置逻辑会在页面中多次执行，可提前缓存生成好的重复字符串，避免重复计算：

// 页面加载时预缓存
const cachedRepeats = {
  A: 'A'.repeat(500),
  B: 'B'.repeat(250),
  C: 'C'.repeat(150)
};

// 需要设置背景时直接使用缓存
console.time("T");
document.body.style.background = `url('data:image/png;base64,UNIZQUE${cachedRepeats.A}UNIAQUE${cachedRepeats.B}UNIQUE${cachedRepeats.C}UNIBQUE')`;
console.timeEnd("T");

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