JS中带换行追加HTML比无空白拼接HTML体积更大、性能更差吗？

核心差异结论 #

两种写法的差异仅存在于未经过构建压缩的源码阶段，具体可以拆成三个维度判断：

• 未压缩场景下，第一种带换行缩进的写法：生成的HTML字符串会包含所有换行符、缩进空格，JS源文件体积更大，append插入的DOM文本也携带多余空白字符
• 未压缩场景下，第二种逐行字符串拼接的写法：最终得到的HTML是无多余空白的连续文本，没有额外的换行、缩进占位字符，字符串总长度更短
• 上线前经过标准JS压缩、模板压缩流程的项目：两种写法的最终产物没有任何区别，构建工具会自动清除代码里的无效换行、缩进、字符串内多余空白，最终文件体积、运行时拼接结果、DOM渲染负载完全一致

补充：浏览器解析DOM时会自动忽略标签间的多余空白文本节点，哪怕插入带缩进换行的HTML，最终渲染的性能差异也可以忽略不计

两种写法的可运行示例 #

写法1：多行字符串写法 #

// 注意：原示例用单引号包裹多行字符串属于JS语法错误，实际运行需使用反引号模板字符串，或对每行末尾换行做转义
const html = `
<div class="container">
    <div>
        <input type="text" placeholder="login" />
    </div>
    <div>
        <input type="password" placeholder="password" />
    </div>
</div>
`
$('#global_container').append(html)

写法2：逐行拼接写法 #

const html = 
'<div class="container">'
    + '<div>'
        + '<input type="text" placeholder="login" />'
    + '</div>'
    + '<div>'
        + '<input type="password" placeholder="password" />'
    + '</div>'
+ '</div>'
$('#global_container').append(html)

选型建议 #

• 无构建压缩流程的项目：优先选第二种逐行拼接写法，能减少无效字符带来的体积浪费，不过常规业务场景下这点体积差极小，不会造成可感知的负载问题
• 有标准前端构建流程的项目：优先选第一种模板字符串写法，代码结构清晰、可读性高、后续维护成本低，构建后和第二种写法没有任何性能、体积差异
• 点击按钮触发HTML插入属于低频用户交互操作，哪怕单次插入的HTML内容量较大，两种写法的运行时性能差也在微秒级，用户完全感知不到，无需为了极端微小的性能牺牲代码可维护性

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