Array.prototype.join() 拼接字符串比反复 += 更快，配合模板字符串预处理数据可提升性能、可读性与可维护性；应避免频繁 DOM 操作，一次性 innerHTML 插入，并做好 XSS 防护。
直接用 Array.prototype.join() 拼接字符串比反复 += 更快，再配合模板字符串预处理数据，能写出清晰又高效的 HTML 构建逻辑——关键不在“炫技”，而在避免 DOM 操作、减少内存分配、提升可读性。
用 join() 替代循环拼接，避开性能陷阱
频繁使用 += 拼接字符串时，JavaScript 引擎可能多次创建中间字符串（尤其在长列表中），造成隐式内存开销。而 join() 是原生方法，一次性合成，底层优化充分。
❌ 低效写法：
let html = '';
for (const item of list) {
html += `<li>${item.name}</li>`;
}
html = `<ul>${html}</ul>`;
✅ 推荐写法：
立即学习“前端免费学习笔记（深入）”；
const itemsHtml = list.map(item => `<li>${item.name}</li>`).join('');
const html = `<ul>${itemsHtml}</ul>`;
模板字符串提前插值，避免 join 内部重复计算
join() 只负责连接，不处理动态内容。把数据映射成完整 HTML 片段再 join，比在 join 回调里反复拼接更可控。模板字符串在这里承担“单次插值”角色，语义清晰且无运行时开销。
- 对每个对象只执行一次模板插值，不嵌套字符串拼接
- 支持转义、条件片段、空值兜底（如
${item.title || '无标题'}） - 便于提取为独立函数，比如
renderCard(item)，提升复用性
批量生成 + 一次插入，绕过频繁 DOM 操作
构建完 HTML 字符串后，应通过 element.innerHTML 一次性写入，而不是用 appendChild() 循环添加节点。后者会触发多次样式计算与布局重排。
✅ 正确收尾方式：
document.getElementById('list-container').innerHTML = html;
⚠️ 注意：确保数据已做 XSS 过滤（如用 DOMPurify.sanitize() 或服务端转义），模板字符串不会自动防御脚本注入。
复杂结构用数组分段构建，保持可维护性
面对带头部、分组、尾部的列表，可将各部分分别 map + join，再组合：
const header = `<header><h2>${title}</h2></header>`;
const body = list.map(renderItem).join('');
const footer = `<footer><small>${list.length} 条</small></footer>`;
const fullHtml = `${header}${body}${footer}`;
这种写法比硬塞在一个 map 里更易定位修改点，也方便后续抽离为组件化片段。
